Alert.

import { Terminal } from "lucide-react";

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

export default function AlertDemo() {
  return (
    <Alert className="max-w-md">
      <Terminal />
      <AlertTitle>Your computer is listening</AlertTitle>
      <AlertDescription>Run lantern on any in-game computer to publish its site to the hub.</AlertDescription>
    </Alert>
  );
}

Installation#

With the CLI

$npx lanterncn add alert

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/alert. See Installation if your project is not set up yet.

Manually

1. Install the dependencies

   npm install class-variance-authority

2. Copy the source into your project

   components/ui/alert.tsx

   import * as React from "react";
   import { cva, type VariantProps } from "class-variance-authority";
   
   import { cn } from "@/lib/utils";
   
   const alertVariants = cva(
     "relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded-md border border-l-2 px-4 py-3.5 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5",
     {
       variants: {
         variant: {
           default: "border-border border-l-primary bg-card text-card-foreground [&>svg]:text-primary",
           success: "border-success/30 border-l-success bg-success/[0.06] text-foreground [&>svg]:text-success",
           warning: "border-warning/30 border-l-warning bg-warning/[0.06] text-foreground [&>svg]:text-warning",
           destructive:
             "border-destructive/35 border-l-destructive bg-destructive/[0.07] text-foreground [&>svg]:text-destructive *:data-[slot=alert-title]:text-destructive",
         },
       },
       defaultVariants: { variant: "default" },
     },
   );
   
   function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
     return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
   }
   
   function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     return (
       <div
         data-slot="alert-title"
         className={cn("col-start-2 line-clamp-1 min-h-4 font-display font-medium tracking-tight", className)}
         {...props}
       />
     );
   }
   
   function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
     return (
       <div
         data-slot="alert-description"
         className={cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className)}
         {...props}
       />
     );
   }
   
   export { Alert, AlertTitle, AlertDescription, alertVariants };

3. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

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

<Alert variant="warning">
  <TriangleAlert />
  <AlertTitle>Low fuel</AlertTitle>
  <AlertDescription>Drop coal in the turtle.</AlertDescription>
</Alert>

Examples#

import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";

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

export default function AlertVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Alert>
        <Info />
        <AlertTitle>New hub version</AlertTitle>
        <AlertDescription>Restart your computers to pick up the update.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <CircleCheck />
        <AlertTitle>Site published</AlertTitle>
        <AlertDescription>turtle.farm is live on the directory.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlert />
        <AlertTitle>Low fuel</AlertTitle>
        <AlertDescription>T-03 has 95 moves left. Drop coal in its inventory.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlert />
        <AlertTitle>Server unreachable</AlertTitle>
        <AlertDescription>Deepstone stopped answering. Your site will be hidden until it returns.</AlertDescription>
      </Alert>
    </div>
  );
}