Murasaki
Components

Alert

Displays a callout for user attention.

Usage

import { Alert, AlertDescription, AlertTitle } from "@murasakijs/ui";
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Variants

Use the variant prop to switch to the destructive style for errors and warnings.

API Reference

Props

PropTypeDefault
variant"default" | "destructive""default"

Alert, AlertTitle, and AlertDescription all extend the matching native HTML element's attributes. A leading <svg> child (e.g. a lucide-react icon) is automatically positioned in the top-left corner via CSS.

Improve this page on GitHub

On this page