Fabrials UI

Loading state

Observation is stale

The last sync is 14 minutes old. Refresh before acting on it.

You are offline

Changes wait for the connection. From 48rem this sits on one line.

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { Alert, AlertTitle, AlertDescription, AlertAction } from "@fabrials/ui";

Or install it under shadcn's name, so code that imports @/components/ui/alert gets this control. See shims.
```
npx shadcn@latest add @fabrials/alert
```

API reference

Prop / export	Type	Description
`variant`	`default \| info \| success \| warning \| destructive`	destructive announces an error.
`layout`	`stacked \| inline`	inline is a slim notice for the top of a page or pane: from 48rem of its own width the title and description share a line and the action sits at the end; narrower it stacks. It fills its container.

Behavior

Say what happened and what the person can do. A healthy connection stays quiet. Use the inline layout for a one-off notice, never for status that refreshes periodically.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.