Docs
Alert
Alert
Displays a callout for user attention.
import {
Alert,
AlertDescription,
AlertTitle,
} from "@repo/tailwindcss/default/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;import {
Alert,
AlertDescription,
AlertTitle,
} from "@repo/tailwindcss/solid/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:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
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
Error
Your session has expired. Please log in again.
import {
Alert,
AlertDescription,
AlertTitle,
} from "@repo/tailwindcss/default/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;import {
Alert,
AlertDescription,
AlertTitle,
} from "@repo/tailwindcss/solid/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;