)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } `,src:"registry/default/ui/alert.tsx",style:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cva"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" VariantProps "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "class-variance-authority"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" alertVariants "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cva"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "relative w-full rounded-2xl border-2 p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~]:pl-7"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variants"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-popover text-primary"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" destructive"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "border-destructive bg-destructive/10 text-destructive [&>svg]:text-destructive"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" defaultVariants"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "default"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Alert "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" &"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" VariantProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" role"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"alert"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"alertVariants"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}),"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Alert"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "Alert"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertTitle "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLParagraphElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLHeadingElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"h5"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mb-1 font-medium leading-none tracking-tight"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertTitle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "AlertTitle"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertDescription "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" HTMLParagraphElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"HTMLParagraphElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-sm [&_p]:leading-relaxed"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "AlertDescription"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Alert"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertTitle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertDescription "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]})]})})})}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",rawString:`import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Alert"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertTitle "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/alert"'})]})})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",rawString:` Heads up! You can add components and dependencies to your app using the cli. `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Alert"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Terminal className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-4 w-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertTitle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Heads up!"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" You can add components and dependencies to your app using the cli."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]})]})})}),` `,(0,e.jsxs)(l.h2,{id:"examples",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,e.jsxs)(l.h3,{id:"default",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Default"]}),` `,(0,e.jsx)(s,{name:"alert-demo",description:"An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'.",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",rawString:`import { Terminal } from "lucide-react" import { Alert, AlertDescription, AlertTitle, } from "@/components/ui/alert" export function AlertDemo() { return ( Heads up! You can add components to your app using the cli. ) } `,src:"registry/default/example/alert-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Terminal "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Alert"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertTitle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/alert"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AlertDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Alert"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Terminal className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-4 w-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertTitle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Heads up!"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" You can add components to your app using the cli."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"destructive",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#destructive",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Destructive"]}),` `,(0,e.jsx)(s,{name:"alert-destructive",description:"An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'.",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",rawString:`import { AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle, } from "@/components/ui/alert" export function AlertDestructive() { return ( Error Your session has expired. Please log in again. ) } `,src:"registry/default/example/alert-destructive.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertCircle "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Alert"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AlertTitle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/alert"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AlertDestructive"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Alert variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"destructive"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertCircle className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-4 w-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertTitle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AlertDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Your session has expired. Please log in again."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})})]})}function N(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(u,{...n})}):u(n)}function a(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(H);})(); ;return Component;

Alert

Heads up!

Installation

Usage

Examples

Default

Heads up!

Destructive

Error