npm

Alert

Alert is a callout that highlights an important message to the user.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/alert.

Usage

Include an icon as the first child to get the two-column layout; use variant="destructive" for errors.

alert-demo.tsx
import { Alert, AlertTitle, AlertDescription } from "@viliha/vui-ui/alert";
import { InfoCircledIcon } from "@radix-ui/react-icons";

export function Example() {
  return (
    <Alert>
      <InfoCircledIcon />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  );
}