A callout that asks for attention without taking over the page. Card, Inline and Banner in six tones.
FreeWeb and Mobile3 variantsMotion
Preview
npx shadcn add @fetaui/alertPlayground
Your plan expires in 3 days
Renew now to avoid any interruption.
Tones, Card
Dark mode is now available
Turn it on in your profile settings.
New sign in from Toronto
If this was you, there’s nothing to do.
Account updated
Your profile information has been saved.
Your plan expires in 3 days
Renew now to avoid any interruption.
Payment failed
Check your payment method and try again.
Meet the new assistant
Draft replies faster with suggestions.
Tones, Inline
Dark mode is now available
Turn it on in your profile settings.
New sign in from Toronto
If this was you, there’s nothing to do.
Account updated
Your profile information has been saved.
Your plan expires in 3 days
Renew now to avoid any interruption.
Payment failed
Check your payment method and try again.
Meet the new assistant
Draft replies faster with suggestions.
Tones, Banner
Dark mode is now available · Turn it on in your profile settings.
New sign in from Toronto · If this was you, there’s nothing to do.
Account updated · Your profile information has been saved.
Your plan expires in 3 days · Renew now to avoid any interruption.
Payment failed · Check your payment method and try again.
Meet the new assistant · Draft replies faster with suggestions.
Timer
Account updated
Hover or focus to pause.
Description off
New sign in from Toronto
Action off
Payment failed
Check your payment method and try again.
Dismiss off
Dark mode is now available
Turn it on in your profile settings.
Action loading
Your plan expires in 3 days
Renew now to avoid any interruption.
Action disabled
Your plan expires in 3 days
Alert Badge
Variant
Tone
Icons animation
Description
Action
Dismiss
Timer
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/alert
Accessibility
- Danger and Warning use role alert, the rest role status.
- Each tone has its own glyph, so colour is never alone.
- Timers pause on hover and focus, and never apply to Danger or Warning.
Motion
- Cards drop 8 px into place over 220 ms and the badge pops 60 ms later.
- Banners slide down from the top edge in 260 ms.
- Exit fades in 120 ms.
- The timer bar counts down linearly, and it is the only thing that keeps moving with reduced motion.
- On touch, a card follows the finger and flies out past 30%.
Responsive behavior
- Card fills up to 560 px. On Mobile the action moves under the text.
- Banner is one line on Web and two on Mobile.
Performance
- The timer bar is a CSS scale, and the countdown is one timeout that keeps its remaining time when paused.
- Enter and exit animate opacity, y and scale. Nothing renders once it is dismissed.
- Swipe to dismiss only attaches on coarse pointers, and only on Card.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Alert and AlertBadge. Props: variant (card, inline, banner), tone, title, description, action, dismissible, onDismiss, timer.
- action is { label, onClick, loading, disabled } and is ignored on Inline. It composes Button and Icon Button.
- timer never applies to Danger or Warning. Those tones render role="alert", the rest role="status".
- Open state lives inside the component. Remount with a new key to show it again. The demo actions are simulated.
Related
ToastComponentA short message that melts from a pill into a card. Eight kinds, with stacking and swipe.Alert DialogComponentA modal that interrupts with something important and waits for an answer.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.EmptyComponentSays what is missing and offers the one next step. Eight kinds, from a drop area to a 404.