Docs
Alert
Alert
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;Installation
npx shadcn-solid@latest add alertInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
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} />
);
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
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} />
);
};Usage
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>Examples
Destructive
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;