Alert

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-alert

pnpm dlx shadcn@latest add @spaceui/primitives-alert

Usage

Code

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'

Code

<Alert>
  <AlertTitle>Your Alert Title Goes Here</AlertTitle>
  <AlertDescription>
    This is where your alert description will appear. You can customize this text with any message.
  </AlertDescription>
</Alert>

Features

Variants

All available alert variants in one overview: default, info, warning, error, success.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Badge Icon

Alert variants rendered with a badge container for the icon.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

With Actions

Alert with interactive dismiss and action buttons.

Your Alert Title Goes Here

This is where your alert description will appear. You can customize this text with any message.

API Reference

This is a custom component, not a Base UI wrapper.

Alert

Root container for the alert.

Prop	Type	Default	Description
`variant`	default\|error\|info\|success\|warning	default	Controls the alert styling and color scheme

AlertIcon

Container for the alert icon. Supports standalone icon rendering or badge container styling.

Prop	Type	Default	Description
`badge`	boolean	false	Renders the icon inside a badge container styled according to parent variant

AlertTitle

Title text for the alert. Renders as a styled div.

AlertDescription

Description text for the alert. Renders as a styled div with muted foreground color.

AlertAction

Container for action buttons. Automatically positions to the right on larger screens.

Examples

Compact stroke alerts with action buttons

Your Alert Title Goes Here