Alert
A notice with a title and supporting text.
Upstream documentationExamples
Theme preview
Compare the neutral surfaces and text contrast.
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Alert
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/alert.json'Usage
A complete example using the installed component and hook paths.
Alert usage
"use client";import { MessageCircleIcon } from "@/lib/icons";import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";const AlertPreview = function AlertPreview() { return ( <Alert> <MessageCircleIcon /> <AlertTitle>Theme preview</AlertTitle> <AlertDescription>Compare the neutral surfaces and text contrast.</AlertDescription> </Alert> ); };export default function Demo() { return <AlertPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Alert
Alert props
React.ComponentProps<"div"> & VariantProps<typeof alertVariants>AlertTitle
AlertTitle props
React.ComponentProps<"div">AlertDescription
AlertDescription props
React.ComponentProps<"div">AlertAction
AlertAction props
React.ComponentProps<"div">