ComponentsBlocksDocsExamples

Alert
Calendar
Card
Chart
Data Grid
Update
Drawer
File Upload
Kanban
Kbd
Pagination
Resizable
Rating
Stepper
Scrollspy
Skeleton
Sortable
Sonner
Table
Textarea

Components

Alert

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

Solid

Mono

Outline

Light

Size

Extended

Actions

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.
Previousellms.txtNextCalendar

On This Page

  • Installation
  • Examples
    • Solid
    • Mono
    • Outline
    • Light
    • Size
    • Extended
    • Actions
  • 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