7:["$","div",null,{"className":"p-3","children":["$","div",null,{"children":["$","div",null,{"className":"grid grid-cols-1 gap-3 lg:grid-cols-[1fr_192px]","children":[["$","div",null,{"className":"min-w-0 flex-grow","children":[["$","div",null,{"className":"typography","children":[["$","h1",null,{"children":"Alert"}],["$","h2",null,{"id":"description","children":"Description"}],["$","div",null,{"className":"mb-5","children":"An alert is a component used to display important messages or notifications to the user. It can be used to convey success, error, warning, or informational messages that require the user's attention."}],""]}],["$","div",null,{"className":"mb-5","children":[["$","div",null,{"className":"typography","children":["$","h2",null,{"id":"preview","children":"Preview"}]}],["$","div",null,{"className":"border-border flex flex-col border p-5","children":["$","$10",null,{"children":["$","div",null,{"className":"flex flex-col gap-5","children":[["$","div",null,{"ref":"$undefined","className":"flex items-center gap-2 rounded border p-2 border-primary text-primary","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-message-circle","children":[["$","path","vv11sd",{"d":"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"}],"$undefined"]}]," Default"]}],["$","div",null,{"ref":"$undefined","className":"flex items-center gap-2 rounded border p-2 border-muted text-muted-foreground","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-volume-off","children":[["$","path","1fgyg8",{"d":"M16 9a5 5 0 0 1 .95 2.293"}],["$","path","l3zxae",{"d":"M19.364 5.636a9 9 0 0 1 1.889 9.96"}],["$","path","1ooewy",{"d":"m2 2 20 20"}],["$","path","1gbwow",{"d":"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"}],["$","path","s2je0y",{"d":"M9.828 4.172A.686.686 0 0 1 11 4.657v.686"}],"$undefined"]}]," Muted"]}],["$","div",null,{"ref":"$undefined","className":"flex items-center gap-2 rounded border p-2 border-success text-success","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-check","children":[["$","path","1gmf2c",{"d":"M20 6 9 17l-5-5"}],"$undefined"]}]," Success"]}],["$","div",null,{"ref":"$undefined","className":"flex items-center gap-2 rounded border p-2 border-destructive text-destructive","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-x","children":[["$","path","1bl5f8",{"d":"M18 6 6 18"}],["$","path","d8bk6v",{"d":"m6 6 12 12"}],"$undefined"]}]," Destructive"]}],["$","div",null,{"ref":"$undefined","className":"flex items-center gap-2 rounded border p-2 border-warning text-warning","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-triangle-alert","children":[["$","path","wmoenq",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["$","path","juzpu7",{"d":"M12 9v4"}],["$","path","p32p05",{"d":"M12 17h.01"}],"$undefined"]}]," Warning"]}],["$","div",null,{"ref":"$undefined","className":"flex items-center gap-2 rounded border p-2 border-info text-info","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-info","children":[["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],["$","path","1dtifu",{"d":"M12 16v-4"}],["$","path","e9boi3",{"d":"M12 8h.01"}],"$undefined"]}]," Info"]}]]}]}]}]]}],["$","div",null,{"className":"typography","children":[["$","h2",null,{"id":"installation","children":"Installation"}],["$","p",null,{"children":"Add component:"}],["$","$L11",null,{"language":"bash","code":"npx drizzle-ui@latest add alert"}],"$undefined","$undefined",["$","h2",null,{"id":"usage","children":"Usage"}],["$","$L11",null,{"language":"ts","code":"import { Alert } from \"@/components/ui/alert\";\nimport {\n CheckIcon,\n InfoIcon,\n MessageCircleIcon,\n TriangleAlertIcon,\n VolumeOffIcon,\n XIcon,\n} from \"lucide-react\";\n\nexport function AlertDemo() {\n return (\n

\n \n Default\n \n \n Muted\n \n \n Success\n \n \n Destructive\n \n \n Warning\n \n \n Info\n \n

\n );\n}\n"}],["$","h2",null,{"id":"code","children":"Code"}],[["$","div","src/components/ui/alert.tsx",{"children":[["$","p",null,{"children":"components/ui/alert.tsx"}],["$","$L11",null,{"language":"tsx","code":"import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype AlertVariant =\n | \"default\"\n | \"muted\"\n | \"success\"\n | \"destructive\"\n | \"warning\"\n | \"info\";\n\nconst alertVariantMap: Record = {\n default: \"border-primary text-primary\",\n muted: \"border-muted text-muted-foreground\",\n success: \"border-success text-success\",\n destructive: \"border-destructive text-destructive\",\n warning: \"border-warning text-warning\",\n info: \"border-info text-info\",\n};\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & { variant?: AlertVariant }\n>(({ className, variant = \"default\", ...props }, ref) => (\n \n));\nAlert.displayName = \"Alert\";\n\nexport { Alert };\n"}]]}]]]}]]}],["$","div",null,{"className":"sticky top-15 hidden self-start lg:block","children":[["$","h4",null,{"className":"font-semibold","children":"On this page"}],["$","div",null,{"className":"flex flex-col","children":[["$","$L12",null,{"href":"#description","children":"Description"}],["$","$L12",null,{"href":"#preview","children":"Preview"}],["$","$L12",null,{"href":"#installation","children":"Installation"}],["$","$L12",null,{"href":"#usage","children":"Usage"}],["$","$L12",null,{"href":"#code","children":"Code"}]]}]]}]]}]}]}]