Displays a callout for user attention.
import { Alert, AlertDescription, AlertTitle, } from "@repo/tailwindcss/ui/alert"; const AlertDemo = () => { return ( <Alert> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" > <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 7l5 5l-5 5m7 2h7" /> </svg> <AlertTitle>Heads up!</AlertTitle> <AlertDescription> You can not add components to your app using the cli, yet. </AlertDescription> </Alert> ); }; export default AlertDemo;
npx shadcn-solid@latest add alert
npm install @kobalte/core
import { cn } from "@/libs/cn"; import type { AlertRootProps } from "@kobalte/core/alert"; import { Alert as AlertPrimitive } from "@kobalte/core/alert"; import type { PolymorphicProps } from "@kobalte/core/polymorphic"; import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import type { ComponentProps, ValidComponent } from "solid-js"; import { splitProps } from "solid-js"; export const alertVariants = cva( "relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ); type alertProps<T extends ValidComponent = "div"> = AlertRootProps<T> & VariantProps<typeof alertVariants> & { class?: string; }; export const Alert = <T extends ValidComponent = "div">( props: PolymorphicProps<T, alertProps<T>>, ) => { const [local, rest] = splitProps(props as alertProps, ["class", "variant"]); return ( <AlertPrimitive class={cn( alertVariants({ variant: props.variant, }), local.class, )} {...rest} /> ); }; export const AlertTitle = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"]); return ( <div class={cn("font-medium leading-5 tracking-tight", local.class)} {...rest} /> ); }; export const AlertDescription = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"]); return ( <div class={cn("text-sm [&_p]:leading-relaxed", local.class)} {...rest} /> ); };
import { cn } from "@/libs/cn"; import type { AlertRootProps } from "@kobalte/core/alert"; import { Alert as AlertPrimitive } from "@kobalte/core/alert"; import type { PolymorphicProps } from "@kobalte/core/polymorphic"; import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import type { ComponentProps, ValidComponent } from "solid-js"; import { splitProps } from "solid-js"; export const alertVariants = cva( "relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:(absolute left-4 top-4 text-foreground)", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ); type alertProps<T extends ValidComponent = "div"> = AlertRootProps<T> & VariantProps<typeof alertVariants> & { class?: string; }; export const Alert = <T extends ValidComponent = "div">( props: PolymorphicProps<T, alertProps<T>>, ) => { const [local, rest] = splitProps(props as alertProps, ["class", "variant"]); return ( <AlertPrimitive class={cn( alertVariants({ variant: props.variant, }), local.class, )} {...rest} /> ); }; export const AlertTitle = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"]); return ( <div class={cn("font-medium leading-5 tracking-tight", local.class)} {...rest} /> ); }; export const AlertDescription = (props: ComponentProps<"div">) => { const [local, rest] = splitProps(props, ["class"]); return ( <div class={cn("text-sm [&_p]:leading-relaxed", local.class)} {...rest} /> ); };
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
<Alert> <TbTerminal class="h-4 w-4" /> <AlertTitle>Heads up!</AlertTitle> <AlertDescription> You can not add components and dependencies to your app using the cli, yet. </AlertDescription> </Alert>
import { Alert, AlertDescription, AlertTitle, } from "@repo/tailwindcss/ui/alert"; const AlertDestructive = () => { return ( <Alert variant="destructive"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" > <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01" /> </svg> <AlertTitle>Error</AlertTitle> <AlertDescription> Your session has expired. Please log in again. </AlertDescription> </Alert> ); }; export default AlertDestructive;