Announcement

A compact onboarding / announcement card sized for the sidebar footer - leading icon, dismiss button, title, description, and a full-width secondary CTA. Dismissal animates out with Motion.

Setting up your account

Take the tour and learn how to use our product.

Installation

You can add this announcement component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add announcement

In the sidebar

The card is designed for the foot of the 260px sidebar panel - it's what the sidebar block renders above the user menu.

Setting up your account

Take the tour and learn how to use our product.

Variations

Every part is optional - swap the icon, drop the description or actionLabel, and toggle dismissible.

What's new in v2

Charts, command menu, and a brand-new data table.

You're all set

Your workspace is ready to go.

2 seats left on your plan

import { RiSparklingFill } from "@remixicon/react"; {/* Custom icon */}<Announcement icon={RiSparklingFill} title="What's new in v2" description="Charts, command menu, and a brand-new data table." actionLabel="See the changelog"/> {/* No action */}<Announcement title="You're all set" description="Your workspace is ready to go." dismissible /> {/* Title + action only */}<Announcement title="2 seats left on your plan" actionLabel="Upgrade" />