Skip to main content
Ouro UI

Display

UnreadDot

The dot that marks something unread: a small round dot in the theme's primary color, with a spoken label. ConversationList and Command draw it for their unread rows; use it for an unread mark of your own, such as a chat row's mark slot.

Ana Lind

Unread

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.3.74

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/unread-dot#v1.3.74

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/unread-dot

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/unread-dot#v1.3.74 ourostack/ouro-ui/unread-dot-tests#v1.3.74
import { UnreadDot } from "@/components/ouro/unread-dot/unread-dot";

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

Example

<UnreadDot label="Unread" />

Use instead when

  • Use Avatar's presence instead when the dot says whether a person is online, and Badge for a count.

Props

Type: UnreadDotProps.

dot
Type: boolean
Default: true
Draws the dot. Pass false where a mark takes the dot's place: screen readers still hear label, and nothing is drawn.
label (required)
Type: string
What screen readers hear for the dot, such as "Unread". A required prop.

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.

Source on GitHubThis page as Markdown