Components
UI Elements
按钮
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
面包屑s
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
Storage68%
Bandwidth42%
Quota91%
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
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