Components

Live status

Always-mounted polite status region that announces changes to assistive technology.

Composition

Keep it mounted and change only its message.

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/live-status.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/live-status.json

Primary installed source

src/registry/sources/control-ui/ui/live-status.tsx

import type { ComponentProps } from "react";

import { cn } from "@/components/control-ui/lib/cn";

export type LiveStatusProps = Omit<ComponentProps<"span">, "role" | "children"> & { message: string };

export function LiveStatus({ message, className, ...props }: LiveStatusProps) {

return (

<span

{...props}

role="status"

aria-live="polite"

aria-atomic="true"

data-control-ui="live-status"

data-slot="root"

className={cn("sr-only", className)}

>

{message}

</span>

);

}