Alert · Components

inline, persistent · variant default/info/success/warning/destructive · icon · onDismiss/action make it a nudge

The native kit's real component, live in its web build at phone width. Follows this site's theme.

Usage

Inline and persistent, tinted by tone. For transient messages use Toast. onDismiss and action turn it into a nudge — never dismissible for an error the user must act on.

API

<Alert icon variant="default|info|success|warning|destructive" onDismiss? action?><AlertTitle /><AlertDescription /></Alert>

Get it

Already in every copy of the native kit:

import { Alert } from '@/components/ui/alert';

Details

Exports: Alert
Source: apps/mobile/components/ui/alert.tsx
Packages: class-variance-authority@^0.7.1, lucide-react-native@^1.21.0
Installs with: @kit-native/icon, @kit-native/lib-utils, @kit-native/text
Also searched as: inline message, banner, callout, error, success
Registry JSON: /r/native/alert.json

The web kit's real component, live. Follows this site's theme.

API

<Alert variant?><Icon /><AlertTitle /><AlertDescription /></Alert>

Get it

Already in every copy of the web kit:

import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';

Details

Exports: Alert, AlertTitle, AlertDescription
Source: apps/web/components/ui/alert.tsx
Packages: class-variance-authority@^0.7.1, cn@^0.4.0
Registry JSON: /r/web/alert.json

Agents: the whole registry is at /llms.txt.