Design System 
Feedback
Alerts, progress bars, tooltips, chips, and skeletons.
Alert
Callouts to draw attention with variants, icons, actions, and closable behavior.
Variants & Colors
Your changes have been saved
All modifications were applied successfully.
New update available
Version 2.4.0 includes performance improvements and bug fixes.
Storage almost full
You have used 90% of your available storage. Consider upgrading your plan.
Unable to process request
An unexpected error occurred. Please try again later.
With Actions
Confirm your email address
We sent a verification link to your inbox. Click it to activate your account.
Closable
This alert can be dismissed
Click the close button to hide this alert, then use the Reset button to show it again.
Progress
Indicators showing task completion with colors, sizes, and animation modes.
Colors
Primary65%
Success100%
Warning45%
Error20%
Sizes
2xs
xs
sm
md
lg
xl
Determinate with Status
75%
Indeterminate
Steps
Waiting...
Cloning...
Migrating...
Deploying...
Done!
Tooltip
Popup hints that appear on hover with text, keyboard shortcuts, and positioning.
Basic
With Keyboard Shortcuts
With Arrow
Positions
Chip
Small indicator dots displayed on wrapped elements to show status or counts.
Colors
Sizes
Positions
top-right
top-left
bottom-right
bottom-left
Inset
With Text
3
12
99+
Skeleton
Loading placeholders that mimic content shapes while data is being fetched.
Text Lines
Avatar
Card
Button