Alert

Displays an alert for user attention.

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

1
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/pxl/alert";
2

3
export default function AlertDemo() {
4
  return (
5
    <div className="flex flex-col gap-4 max-w-md">
6
      <Alert>
7
        <svg
8
          xmlns="http://www.w3.org/2000/svg"
9
          fill="currentColor"
10
          viewBox="0 0 24 24"
11
        >
12
          <path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path>
13
        </svg>
14
        <AlertTitle>Payment successful</AlertTitle>
15
        <AlertDescription>
16
          Your payment of $29.99 has been processed. A receipt has been sent to
17
          your email address.
18
        </AlertDescription>
19
      </Alert>
20
      <Alert>
21
        <svg
22
          xmlns="http://www.w3.org/2000/svg"
23
          fill="currentColor"
24
          viewBox="0 0 24 24"
25
        >
26
          <path d="M18 22H6V20H18V22ZM6 20H4V18H6V20ZM20 20H18V18H20V20ZM4 18H2V6H4V18ZM22 18H20V6H22V18ZM13 17H11V11H13V17ZM13 9H11V7H13V9ZM6 6H4V4H6V6ZM20 6H18V4H20V6ZM18 4H6V2H18V4Z" />
27
        </svg>
28
        <AlertTitle>New feature available</AlertTitle>
29
        <AlertDescription>
30
          We&apos;ve added dark mode support. You can enable it in your account
31
          settings.
32
        </AlertDescription>
33
      </Alert>
34
    </div>
35
  );
36
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/alert

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import type { ComponentProps } from "react";
3

4
import { cn } from "@/lib/utils";
5

6
const alertVariants = cva(
7
  "group/alert relative grid w-full gap-0.5 rounded-none text-card-foreground px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg:not([class*='size-'])]:size-4",
8
  {
9
    variants: {
10
      border: {
11
        solid: "pixel-border pixel-size-lg px-[calc(--spacing(2.5)+var(--pixel-size))] py-[calc(--spacing(2)+var(--pixel-size))]",
12
        rounded: "pixel-rounded pixel-size-lg px-[calc(--spacing(2.5)+var(--pixel-size))] py-[calc(--spacing(2)+var(--pixel-size))]",
13
        none: "",
14
      },
15
      variant: {
16
        default:
17
          "bg-card     pixel-color-border             *:data-[slot=alert-title]:text-card-foreground    *:data-[slot=alert-description]:text-muted-foreground *:[svg]:text-card-foreground",
18
        primary:
19
          "bg-primary  pixel-color-primary-foreground *:data-[slot=alert-title]:text-primary-foreground *:data-[slot=alert-description]:text-foreground       *:[svg]:text-primary-foreground",
20
        success:
21
          "bg-success  pixel-color-success-foreground *:data-[slot=alert-title]:text-success-foreground *:data-[slot=alert-description]:text-foreground       *:[svg]:text-success-foreground",
22
        danger:
23
          "bg-danger   pixel-color-danger-foreground  *:data-[slot=alert-title]:text-danger-foreground  *:data-[slot=alert-description]:text-foreground       *:[svg]:text-danger-foreground",
24
        warning:
25
          "bg-warning  pixel-color-warning-foreground *:data-[slot=alert-title]:text-warning-foreground *:data-[slot=alert-description]:text-foreground       *:[svg]:text-warning-foreground",
26
        info: "bg-info     pixel-color-info-foreground    *:data-[slot=alert-title]:text-info-foreground    *:data-[slot=alert-description]:text-foreground       *:[svg]:text-info-foreground",
27
        muted:
28
          "bg-muted     pixel-color-muted-foreground    *:data-[slot=alert-title]:text-muted-foreground    *:data-[slot=alert-description]:text-foreground       *:[svg]:text-muted-foreground",
29
        destructive:
30
          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
31
      },
32
    },
33
    defaultVariants: {
34
      border: "solid",
35
      variant: "default",
36
    },
37
    compoundVariants: [
38
      {
39
        border: "rounded",
40
        variant: "default",
41
        className: "bg-border/30 dark:bg-card",
42
      },
43
    ],
44
  },
45
);
46

47
function Alert({
48
  border,
49
  children,
50
  className,
51
  variant,
52
  ...props
53
}: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
54
  return (
55
    <div
56
      data-slot="alert"
57
      role="alert"
58
      className={cn(
59
        alertVariants({
60
          border,
61
          variant,
62
        }),
63
        className,
64
      )}
65
      {...props}
66
    >
67
      {children}
68
    </div>
69
  );
70
}
71

72
function AlertTitle({ className, ...props }: ComponentProps<"div">) {
73
  return (
74
    <div
75
      data-slot="alert-title"
76
      className={cn(
77
        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
78
        className,
79
      )}
80
      {...props}
81
    />
82
  );
83
}
84

85
function AlertDescription({ className, ...props }: ComponentProps<"div">) {
86
  return (
87
    <div
88
      data-slot="alert-description"
89
      className={cn(
90
        "text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2",
91
        className,
92
      )}
93
      {...props}
94
    />
95
  );
96
}
97

98
function AlertAction({ className, ...props }: ComponentProps<"div">) {
99
  return (
100
    <div
101
      data-slot="alert-action"
102
      className={cn("absolute top-[calc(--spacing(2)+var(--pixel-size))] right-[calc(--spacing(2.5)+var(--pixel-size))]", className)}
103
      {...props}
104
    />
105
  );
106
}
107

108
export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };

Update the import paths to match your project setup.

Usage

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/pxl/alert"

<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>

Composition

Use the following composition to build an Alert:

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Alert vs Callout

Use the Callout if you need to display admonitions/callouts for example from Markdown sources. Use the Alert component if you need deeper control or advanced customization.

Action

Use AlertAction to add a button or other action element to the alert.

Dark mode is now available

Enable it under your profile settings to get started.

1
import {
2
  Alert,
3
  AlertAction,
4
  AlertDescription,
5
  AlertTitle,
6
} from "@/components/ui/pxl/alert";
7
import { Button } from "@/components/ui/pxl/button";
8

9
export default function AlertActionExample() {
10
  return (
11
    <div className="max-w-md">
12
      <Alert>
13
        <AlertTitle>Dark mode is now available</AlertTitle>
14
        <AlertDescription>
15
          Enable it under your profile settings to get started.
16
        </AlertDescription>
17
        <AlertAction>
18
          <Button size="xs" variant="default">
19
            Enable
20
          </Button>
21
        </AlertAction>
22
      </Alert>
23
    </div>
24
  );
25
}

Border

Use the border prop to change the border of the alert.

None

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rounded

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Solid

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1
import {
2
  Alert,
3
  AlertDescription,
4
  AlertTitle
5
} from "@/components/ui/pxl/alert";
6

7
export default function AlertBordersExample() {
8
  return (
9
    <div className="flex flex-col gap-4 max-w-md">
10

11
      <Alert border="none">
12
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path></svg>
13
        <AlertTitle>None</AlertTitle>
14
        <AlertDescription>
15
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
16
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
17
        </AlertDescription>
18
      </Alert>
19
      <Alert border="rounded">
20
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path></svg>
21
        <AlertTitle>Rounded</AlertTitle>
22
        <AlertDescription>
23
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
24
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
25
        </AlertDescription>
26
      </Alert>
27
      <Alert border="solid">
28
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path></svg>
29
        <AlertTitle>Solid</AlertTitle>
30
        <AlertDescription>
31
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
32
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
33
        </AlertDescription>
34
      </Alert>
35
    </div>
36
  );
37
}

Variants

Use the variant prop to change the colors of the alert.

New feature available

We've added dark mode support. You can enable it in your account settings.

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

1
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/pxl/alert";
2

3
export default function AlertVariantsExample() {
4
  return (
5
    <div className="flex flex-col gap-4 max-w-md">
6
      <Alert variant="primary">
7
        <svg
8
          xmlns="http://www.w3.org/2000/svg"
9
          fill="currentColor"
10
          viewBox="0 0 24 24"
11
        >
12
          <path d="M18 22H6V20H18V22ZM6 20H4V18H6V20ZM20 20H18V18H20V20ZM4 18H2V6H4V18ZM22 18H20V6H22V18ZM13 17H11V11H13V17ZM13 9H11V7H13V9ZM6 6H4V4H6V6ZM20 6H18V4H20V6ZM18 4H6V2H18V4Z" />
13
        </svg>
14
        <AlertTitle>New feature available</AlertTitle>
15
        <AlertDescription>
16
          We&apos;ve added dark mode support. You can enable it in your account
17
          settings.
18
        </AlertDescription>
19
      </Alert>
20
      <Alert variant="success">
21
        <svg
22
          xmlns="http://www.w3.org/2000/svg"
23
          fill="currentColor"
24
          viewBox="0 0 24 24"
25
        >
26
          <path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path>
27
        </svg>
28
        <AlertTitle>Payment successful</AlertTitle>
29
        <AlertDescription>
30
          Your payment of $29.99 has been processed. A receipt has been sent to
31
          your email address.
32
        </AlertDescription>
33
      </Alert>
34
      <Alert variant="danger">
35
        <svg
36
          xmlns="http://www.w3.org/2000/svg"
37
          fill="currentColor"
38
          viewBox="0 0 24 24"
39
        >
40
          <path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path>
41
        </svg>
42
        <AlertTitle>Payment successful</AlertTitle>
43
        <AlertDescription>
44
          Your payment of $29.99 has been processed. A receipt has been sent to
45
          your email address.
46
        </AlertDescription>
47
      </Alert>
48
      <Alert variant="warning">
49
        <svg
50
          xmlns="http://www.w3.org/2000/svg"
51
          fill="currentColor"
52
          viewBox="0 0 24 24"
53
        >
54
          <path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path>
55
        </svg>
56
        <AlertTitle>Payment successful</AlertTitle>
57
        <AlertDescription>
58
          Your payment of $29.99 has been processed. A receipt has been sent to
59
          your email address.
60
        </AlertDescription>
61
      </Alert>
62
      <Alert variant="info">
63
        <svg
64
          xmlns="http://www.w3.org/2000/svg"
65
          fill="currentColor"
66
          viewBox="0 0 24 24"
67
        >
68
          <path d="M18 22H6v-2h12v2ZM6 20H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-11-2H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2ZM6 6H4V4h2v2Zm14 0h-2V4h2v2Zm-2-2H6V2h12v2Z"></path>
69
        </svg>
70
        <AlertTitle>Payment successful</AlertTitle>
71
        <AlertDescription>
72
          Your payment of $29.99 has been processed. A receipt has been sent to
73
          your email address.
74
        </AlertDescription>
75
      </Alert>
76
    </div>
77
  );
78
}

API Reference

Alert

The Alert component displays a callout for user attention.

Prop	Type	Default
`variant`	`"default" \| "destructive"`	`"default"`

AlertTitle

The AlertTitle component displays the title of the alert.

Prop	Type	Default
`className`	`string`	-

AlertDescription

The AlertDescription component displays the description or content of the alert.

Prop	Type	Default
`className`	`string`	-

AlertAction

The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.

Prop	Type	Default
`className`	`string`	-