Alert

A flexible alert component for displaying important messages with multiple variants and dark mode support

Installation

Install the Alert component using the nocta-ui CLI:

npx nocta-ui add alert

Then import the components you need:

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

This is a default alert with an information message.

A simple alert without title or icon.

The Alert component supports four variants: default, destructive, warning, and success.

This is the default variant for general information.

Something went wrong. Please try again later.

Please review your settings before proceeding.

Your changes have been saved successfully.

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive' \| 'warning' \| 'success'`	`'default'`	Alert style variant and icon
`showIcon`	`boolean`	`true`	Whether to display the variant icon
`className`	`string`	`''`	Additional CSS classes
`children`	`React.ReactNode`	—	Alert content

Prop	Type	Default	Description
`as`	`React.ElementType`	`'h5'`	HTML element to render
`className`	`string`	`''`	Additional CSS classes
`children`	`React.ReactNode`	—	Title content

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`children`	`React.ReactNode`	—	Description content

All components also accept their respective HTML element attributes.