Components

Announcement Bar

Slim top banner that slides down on mount and, when dismissed, collapses its height and fades away.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add announcement

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { AnnouncementBar } from "@lumora/ui/components/announcement";
// or from the barrel:
import { AnnouncementBar } from "@lumora/ui";

Props worth knowing

Give it an id and dismissal sticks across visits via localStorage. tone: "neutral" | "accent"; link adds a trailing link whose arrow nudges forward on hover; dismissible (default true) shows the close button and onDismiss fires after it collapses. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.