Displays a callout for user attention.
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";2import { CheckCircle2Icon, InfoIcon } from "lucide-react";34export default function Preview() {Installation
pnpm dlx sprawlify@latest add alertnpx sprawlify@latest add alertyarn sprawlify@latest add alertbunx --bun sprawlify@latest add alert
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import * as React from "react";4import { cva, type VariantProps } from "class-variance-authority";5import { cn } from "@/lib/utils";6import { sprawlify } from "@sprawlify/react";78const alertVariants = cva(9 "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",10 {11 variants: {12 variant: {13 default: "bg-card text-card-foreground",14 destructive:15 "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",16 },17 },18 defaultVariants: {19 variant: "default",20 },21 },22);2324function Alert({25 className,26 variant,27 ...props28}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof alertVariants>) {29 return (30 <sprawlify.div31 data-scope="alert"32 data-part="root"33 data-slot="alert"34 role="alert"35 className={cn(alertVariants({ variant }), className)}36 {...props}37 />38 );39}4041function AlertTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {42 return (43 <sprawlify.div44 data-scope="alert"45 data-part="title"46 data-slot="alert-title"47 className={cn(48 "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",49 className,50 )}51 {...props}52 />53 );54}5556function AlertDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {57 return (58 <sprawlify.div59 data-scope="alert"60 data-part="description"61 data-slot="alert-description"62 className={cn(63 "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",64 className,65 )}66 {...props}67 />68 );69}7071function AlertAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {72 return (73 <sprawlify.div74 data-scope="alert"75 data-part="action"76 data-slot="alert-action"77 className={cn("absolute top-2 right-2", className)}78 {...props}79 />80 );81}8283export { Alert, AlertTitle, AlertDescription, AlertAction };84Update the import paths to match your project setup.
Usage
1import {
2 Alert,
3 AlertAction,
4 AlertDescription,
5 AlertTitle,
6} from "@/components/ui/alert"1<Alert>
2 <InfoIcon />
3 <AlertTitle>Heads up!</AlertTitle>
4 <AlertDescription>
5 You can add components and dependencies to your app using the cli.
6 </AlertDescription>
7 <AlertAction>
8 <Button variant="outline">Enable</Button>
9 </AlertAction>
10</Alert>Examples
Action
Use AlertAction to add a button or other action element to the alert.
1import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert";2import { Button } from "@/components/ui/button";34export default function Preview() {Basic
A basic alert with an icon, title and description.
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";2import { CheckCircle2Icon } from "lucide-react";34export default function Preview() {Custom Colors
You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";2import { AlertTriangleIcon } from "lucide-react";34export default function Preview() {Destructive
Use variant="destructive" to create a destructive alert.
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";2import { AlertCircleIcon } from "lucide-react";34export default function Preview() {Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.