AttentionCard

Install

import { AttentionCard } from "@/components/ouro/attention-card/attention-card";

Example

<AttentionCard reason="Asked you" tone="warning" title="Design review" from="Ada Lovelace" time="9:41" onOpen={open}>
  Can you look at the second draft before noon?
</AttentionCard>

Use instead when

• Use Message instead for a message inside its conversation, Alert for a notice from the app itself, and Item for a row in a plain list.

Props

Type: AttentionCardProps.

actions

Type: ReactNode

Buttons under the message, such as a quick reply or Dismiss.

children

Type: ReactNode

What they wrote, cut to two lines.

className

Type: string

Layout only: width, margins, grid placement (mt-2). Appearance classes warn in development; use tone.

from (required)

Type: string

Who is asking. Their name comes before the message.

onOpen

Type: (() => void)

Makes the message a button that opens where it happened.

reason (required)

Type: string

Why it needs the person, as a short label in a badge ("Mentioned you", "Asked you").

ref

Type: Ref<HTMLElement>

Reaches the rendered element.

time

Type: ReactNode

When, already formatted ("9:41", <RelativeTime>).

title (required)

Type: string

Where it happened: the conversation, thread or document's name.

tone

Type: "primary" | "secondary" | "destructive" | "success" | "warning"

Default: "primary"

The badge's color role from the theme, named after its token: warning for a question that waits on an answer, secondary for something quieter.

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.

• message: Not a prop. What they wrote is the children: <AttentionCard reason="Asked you" title="Review" from="Ada">Can you review?</AttentionCard>.
• onClick: Not a prop. The message opens with onOpen: <AttentionCard onOpen={open}>.
• text: Not a prop. What they wrote is the children: <AttentionCard reason="Asked you" title="Review" from="Ada">Can you review?</AttentionCard>.

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: AttentionCard 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.