Ouro HX

Feedback

Celebrate

A small moment of celebration for something the person finished: confetti bursts from a badge with the message ("List cleared") and screen readers hear the message once. The message waits about 1.5 s to leave time for the triggering control's announcement; this does not detect when a screen reader finishes speaking. With reduced motion nothing flies: the badge only fades in. Put it where the eye already is, such as at the end of the list that was just cleared.

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/celebrate#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/celebrate

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/celebrate#v1.2.13 ourostack/ouro-ui/celebrate-tests#v1.2.13
import { Celebrate } from "@/components/ouro/celebrate/celebrate";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<Celebrate show={items.every((item) => item.checked)} message="List cleared" />

Use instead when

  • Use toast() instead to confirm an everyday action (saved, sent), and Alert for a message that should stay.

Props

Type: CelebrateProps.

className
Type: string
Layout only: placement (mx-auto, mt-4). Appearance classes warn in development.
hideMessage
Type: boolean
Speaks the message without showing the badge, for a screen that already says it. The confetti still bursts.
message (required)
Type: string
What was achieved, in a few words: "List cleared", "Steps done". Shown in a badge and spoken.
ref
Type: Ref<HTMLSpanElement>
Reaches the rendered element.
show (required)
Type: boolean
Whether the moment is happening. When it turns true, confetti bursts from the message and screen readers hear the message, once; set it back to false to clear it, and to true again for another burst.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • active: Not a prop. Ouro UI uses show: <Celebrate show={done} message="…" />.
  • children: Not a prop. The text is message: <Celebrate show={done} message="List cleared" />.
  • open: Not a prop. Ouro UI uses show: <Celebrate show={done} message="…" />.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2). Your classes always win over Ouro UI's: Celebrate merges className last with cn (tailwind-merge), so a class that conflicts with its own replaces it.layout-classes

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Claim sources

Source on GitHubThis page as Markdown