Alert

Displays a callout for user attention. 

<Alert>
    <TerminalIcon className="h-4 w-4" />
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
        You can add components to your app using the cli.
    </AlertDescription>
</Alert>

Installation

uvx --from basic-components components add alert
pipx run --spec basic-components components add alert
pip install basic-components && components add alert
  • Copy Alert components below to your local environment
  • Place them in the components/ui/alert directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Alert>
    <TerminalIcon className="h-4 w-4" />
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
        You can add components to your app using the cli.
    </AlertDescription>
</Alert>

Attributes

Component Name Type Default Description
Alert variant String default Sets the component style. Available: default, destructive

Code

{#def
    className: str = "",
    variant: str = "default"
#}
{% set baseClassName = "relative w-full rounded-lg border border-zinc-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 dark:border-zinc-800" %}
{% set variantClassName = {
    'default': "bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50",
    'destructive': "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900"
}[variant] %}
<div
        class="{{ baseClassName }} {{ variantClassName }} {{ className }}"
        role="alert"
        {{ attrs.render() }}
>
    {{ content }}
</div>
{#def
    className: str = ""
#}
<div class="{{ className }} text-sm leading-relaxed" {{ attrs.render() }}>{{ content }}</div>
<!-- components/ui/alert/AlertDialogContent.jinja not found -->

Examples

Destructive

<Alert variant="destructive">
    <CircleAlertIcon className="mr-2 h-4 w-4"/>
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
        Your session has expired. Please log in again.
    </AlertDescription>
</Alert>