Components
Toast
A brief message that appears at the bottom of the screen to provide feedback about an operation. Built with Base UI Toast component with customizable variants and animations.
Loading
Installation
pnpm dlx shadcn@latest add @toui/toast/base
Examples
Positions
Loading
Close Button
Loading
Type
Loading
Custom
Loading
Promise
Loading
Pattern
Tokens
7 CSS variables in 7 categories.
padding
| CSS Variable | Value | Description |
|---|---|---|
--toast-padding | 1rem | Inner padding |
gap
| CSS Variable | Value | Description |
|---|---|---|
--toast-gap | 0.625rem | Gap between icon and text |
radius
| CSS Variable | Value | Description |
|---|---|---|
--toast-radius | var(--component-radius-md) | — |
width-sm
| CSS Variable | Value | Description |
|---|---|---|
--toast-width-sm | 24rem | sm:w-sm |
text-title
| CSS Variable | Value | Description |
|---|---|---|
--toast-text-title | var(--component-text-sm) | — |
text-desc
| CSS Variable | Value | Description |
|---|---|---|
--toast-text-desc | var(--component-text-xs) | — |
close-size
| CSS Variable | Value | Description |
|---|---|---|
--toast-close-size | 0.875rem | Close icon size |
API Reference
This component is built using Base UI Toast primitives. For detailed information, please visit the full API reference.