Alert

Displays a callout for user attention.

Preview

Code

Heads up!

You can add components to your app using the cli.

Installation

CLI

Manual

Copy and paste the following code into your project.

import type { VariantProps } from "~/lib/cva";
import { AlertStyles } from "./styles";
 
export interface AlertRootProps
  extends React.ComponentProps<"div">,
    VariantProps<(typeof AlertStyles)["Root"]> {}
 
export function AlertRoot({ className, variant, ...props }: AlertRootProps) {
  return (
    <div
      role="alert"
      className={AlertStyles.Root({ variant, className })}
      {...props}
    />
  );
}
 
export interface AlertTitleProps extends React.ComponentProps<"h5"> {}
 
export function AlertTitle({ className, ...props }: AlertTitleProps) {
  return <h5 {...props} className={AlertStyles.Title({ className })} />;
}
 
export interface AlertDescriptionProps extends React.ComponentProps<"h6"> {}
 
export function AlertDescription({
  className,
  ...props
}: AlertDescriptionProps) {
  return <h6 {...props} className={AlertStyles.Description({ className })} />;
}

Update the import paths to match your project setup.

Usage

Single import

import { Alert } from "~/components/ui/alert";
import { Icons } from "~/components/ui/icons";

<Alert.Root>
  <Icons.Terminal className="size-4" />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components and dependencies to your app using the cli.
  </Alert.Description>
</Alert.Root>

Multiple imports

import { AlertRoot, AlertDescription, AlertTitle } from "~/components/ui/alert";
import { Icons } from "~/components/ui/icons";

<AlertRoot>
  <Icons.Terminal className="size-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</AlertRoot>