Components

# UI Elements

Jump to ↓
Buttons
Variants, sizes, states, groups, dropdowns
Variants
Sizes
With icon · Icon only · Loading
Button group · Dropdown
Avatars
Sizes
A SK MR EW DR YT
With status
SK MR EW DR
Stack
A SK MR EW +5
Status & chips
Paid Processing Pending Failed
Default Primary Info Success Warning Error Premium
React
TypeScript
Tailwind
Alerts
Heads up. This is an informational alert with extra context.
Saved. Your changes have been applied.
Careful. This action will affect 28 users.
Couldn't save. The server returned a 503 — please retry in a moment.
Spinners & loaders
Circular
Dots
Indeterminate progress
Skeleton loading
Tabs
Pill, underlined, segmented
Pill
Underlined
Segmented (chart-tab)
Pagination
…
Showing 1–10 of 124 results
Breadcrumbs
Stepper
Horizontal step indicator
1
Account
2
Workspace
3
Team
4
Integrations
5
Done
Tooltips
Hover or focus to reveal
Live
Interactive triggers
Toggles
Enabled
Disabled
With description
Smaller helper text below the label.
Progress
Storage 68%
Bandwidth 42%
Quota 91%
List group
Rating
3 of 5 stars
Empty state
No items yet
Create your first project to get started.
Code & keyboard
Run `npm install` to install dependencies, then `npm run dev` to start the local server.

    function greet(name) {
      return `Hello, ${name}!`;
    }

    greet('Gentelella');
    // → "Hello, Gentelella!"

Quick actions: `⌘` + `K` to search, `?` for shortcuts, `Esc` to close.
Blockquote & dividers

> The best way to predict the future is to invent it. Real artists ship.

Or continue with

Banners
Colored callouts with optional actions
New release available. v4.0.0-beta.2 ships fixes for inbox, settings persistence, and 16 chart variants.
API quota at 87%. You'll hit the monthly limit by Friday at the current rate.
Payment failed. Your subscription renewal couldn't be processed. Update your payment method to avoid service interruption.
Maintenance window scheduled for Friday April 30, 02:00–04:00 UTC. Some features may be temporarily unavailable.
Accordion
Native <details> with token styling
What's included
55+ pages, 16 chart variants, fully interactive inbox, kanban, calendar, and settings — all token-driven.
How do I customize the colors?
Every color is a CSS custom property in `_tokens.scss`. Change `--primary` and the entire UI restyles.
Is it really free?
MIT licensed since 2014. Use it for client work, side projects, your own SaaS — no attribution required.
Drawer
Slide-in side panel

Off-canvas panel for filters, settings, or secondary navigation. Click outside or press Escape to close.

Popovers
Hover or focus for rich content
Did you know?
Popovers can hold rich content — links, multiple paragraphs, even small forms. They're keyboard-focusable too.
Pending review
Awaiting approval
2 reviewers needed. Sarah K. has approved. Waiting on Michael R.
Need help?
Press `⌘K` to open the command palette and search every page.
Timeline
Event log with status colors
Just now
Deployment succeeded
v4.0.0-beta.2 deployed to production in 28s.
14 minutes ago
Tests passed
All 142 tests green across 12 suites.
1 hour ago
Pull request #248 merged
feat(inbox): full mail client with reader pane and compose.
3 hours ago
Review requested
Sarah K. requested review on PR #248.
Yesterday
Build failed on staging
Lint errors in product-mockups.js. Auto-fix resolved them.
Activity timeline
User actions over time
2:14 PM · Today
Aigars created project "Q2 redesign"
11:42 AM · Today
Sarah K. uploaded 3 design files
hero-v3.fig, mobile-shell.fig, type-scale.fig
9:30 AM · Today
Michael R. closed 4 issues
Yesterday
Emily W. added 2 team members
2 days ago
Tom H. joined the workspace
Filter results
Plan
Pro Business Starter
Status
Active Pending Suspended
MRR range
$200
Tags
SaaS
Q2
Notes

A drawer is great for secondary content that doesn't deserve a full modal — filters, notes, comments, settings.

v4 launch checklist: - [x] Inbox is fully interactive - [x] Settings persist - [x] 16 chart variants - [ ] Final QA pass