saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Alert

Alert

Displays a callout for important messages.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/alert

Usage

import {
  Alert,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert"
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Examples

Destructive

Loading...
Destructive alert variant.

With List

Loading...
Alert with bulleted list.

With Avatar

Loading...
Alert with avatar.

API Reference

PropTypeDefaultDescription
variant"default" | "destructive""default"The visual variant.

On This Page

  • Installation
  • Usage
  • Examples
  • Destructive
  • With List
  • With Avatar
  • API Reference
Weather Warning
Exterior shoot scheduled for 2PM may be affected by incoming rain. Consider moving to Stage B or adjusting call time.
Session Expired
Your session has expired. Please log in again to continue.
Payment Failed

Your payment could not be processed. Please:

  • Check your card details are correct
  • Ensure sufficient funds are available
  • Verify your billing address
SC
New Notification
shadcn commented on your recent pull request. Review the changes and respond when you have a moment.