ComponentsBlocksDocsExamples

Accordion
Field
Accordion Menu
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Carousel
Checkbox
Collapsible
Command
Combobox
Context Menu
Date Picker
Dialog
Dropdown Menu
Form
Filters
New
Hover Card
Input
Update
Label
Menubar
Navigation Menu
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Sheet
Slider
Sortable
Switch
Table
Tabs
Tooltip
Toggle
Toggle Group
Tree

Components

Field

UI Library:

Displays a callout for user attention, such as a success message, warning, or error.

Installation

pnpm dlx shadcn@latest add @toui/alert

Examples

API Reference

The Alert component is a custom implementation that provides flexible and customizable alert messages. Here's the complete API reference:

Alert

The root Alert component includes the following props:

PropTypeDefault
variant enum default
appearance enum solid
size enum md
className string
close booleantrue
onClose function

AlertTitle

The AlertTitle component includes the following props:

PropTypeDefault
asChild booleanfalse
className string

AlertDescription

The AlertDescription component includes the following props:

PropTypeDefault
asChild booleanfalse
className string

AlertIcon

The AlertIcon component includes the following props:

PropTypeDefault
variant enum
className string

AlertContent

The AlertContent component includes the following props:

PropTypeDefault
className string

AlertToolbar

The AlertToolbar component includes the following props:

PropTypeDefault
variant enum
className string

Credits

  • Built with Radix UI Slot.
PreviouseAccordionNextAccordion Menu

On This Page

  • Installation
  • Examples
  • API Reference
    • Alert
    • AlertTitle
    • AlertDescription
    • AlertIcon
    • AlertContent
    • AlertToolbar
  • Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy