UI Library
UI Component Library
180+ UI components. Colors, tokens, typography, motion, grid. All in one place.
180+ Elements
21 Categories
Dark Native
Production Ready
Primary Button
Secondary Button
Ghost Button
Icon Button
Floating Action Button (FAB)
Button Group
Split Button
Loading Button
Toggle Button
Form Elements
8Input components with validation states, helpers, and interactive features.
Text Input
Enter your full legal name
✓ Username is available
✕ Please enter a valid email address
Email Input with Validation
Password Input
Strong password
Textarea with Counter
Keep it brief
0/200
Select / Dropdown
Checkbox & Radio
Notifications
Billing Cycle
Toggle / Switch
Range Slider
60%
0%100%
Cards
7Versatile card components for content display across all page types.
Product Card
📦SALE
Wireless Headphones
$129$159
📦
Smart Watch Pro
$299
📦SALE
Leather Backpack
$89$119
Blog Post Card
Design
The Future of Design Systems
AI
Why AI Won't Replace Designers
Feature Card
Lightning Fast
Deploy in seconds, not days.
Secure by Default
Enterprise-grade security built in.
Scalable
From startup to enterprise.
Testimonial Card
"
Completely transformed how our team works.
"
Finally a tool that bridges design and development.
Pricing Card
Free
$0
per month
- ✓5 projects
- ✓Basic analytics
- ✓Email support
Popular
Pro
$19
per month
- ✓Unlimited projects
- ✓Advanced analytics
- ✓Priority support
- ✓API access
Enterprise
$49
per month
- ✓Everything in Pro
- ✓SSO & SAML
- ✓Dedicated support
- ✓Custom SLA
Team Member Card
SC
Sarah Chen
CEO
MR
Marcus Rivera
CTO
AT
Aiko Tanaka
Design Lead
JP
James Park
Engineering
Stat / KPI Card
Revenue
$48,295
↑ +12.5% vs last month
Users
12,847
↑ +8.2% vs last month
Conversion
3.2%
↓ -2.4% vs last month
Feedback & Notifications
6Toast messages, alerts, modals, tooltips, progress indicators, and loading states.
Toast Notifications
Changes saved successfully
Failed to upload file
Your plan expires in 3 days
New feature: Dark mode is here
Alert Banners
System Update
Scheduled maintenance on Sunday, 2am-4am UTC.
Payment Failed
Please update your billing information to continue.
Modal / Dialog
Tooltip & Badge
This is a tooltip
NewActivePendingClosed399+
Progress Bar & Spinner
Upload Progress73%
Storage Used89%
Loading data...
Skeleton Loader
Navbar with Search + Avatar + Notification
Dashboard
JD
Announcement Bar
🎉 New: Dark mode is here! Learn more →
Mobile Hamburger Menu
App
Dark/Light Toggle + Language Selector
Breadcrumb
Pagination
Page 2 of 12
Tabs Navigation
Mega Menu Preview
Sticky Header + Avatar Dropdown
⟡ Pulse
JK
Julia▾Hero Sections
8Above-the-fold hero layouts for different page types.
Hero with CTA
Join 47,832+ users
Transform Your Entire Workflow
The all-in-one platform that helps teams ship 10x faster.
Hero Split-Screen
I design products people love
Product designer with 8+ years of experience.
◎
Hero with Product Screenshot
Automate Your Workflow
The platform that replaces 5 tools.
Dashboard UI Preview
Hero with Waitlist Form
🚀 Launching Spring 2026
Email is Broken. We're Fixing It.
AI-powered inbox that works for you.
🔥 2,847 already on the waitlist
Hero with Stats
Building the Future of Technology
$12.4B
Revenue
45,000
Employees
80
Countries
1985
Founded
Hero with Logo Bar
Trusted by 10,000+ Teams
The platform modern teams choose.
VercelLinearStripeNotionFigma
Hero Minimal (Blog)
Design
The Future of Design Systems in 2026
Hero with Food Photo (Restaurant)
Est. 2008
A Culinary Journey
Page Sections
12Reusable content blocks: features, testimonials, pricing, FAQ, CTA, and more.
Logo / Trust Strip
Trusted by industry leaders
GoogleNikeSpotifyAirbnbSlackNetflix
Features Grid
Fast
Deploy in seconds
Secure
Enterprise-grade
Scalable
Grows with you
Beautiful
Pixel-perfect UI
How It Works (3-Step)
1
Choose
Pick your style and page type
2
Preview
See a live pixel-perfect preview
3
Build
Copy the code and ship it
Testimonials Grid
"Transformed how our team works."
"Bridges design and development."
FAQ Accordion
Is it free?
How does it work?
Can I customize?
CTA Section
Ready to get started?
Join thousands of teams shipping faster.
Newsletter Signup
Stats / Numbers Section
$2.4B
Revenue Generated
200+
Clients
15
Awards
98%
Retention
Contact Section
Get in Touch
We'd love to hear from you.
Gallery Grid
🍝
🥘
🍷
🫒
🍰
🍽️
Team Section
SC
Sarah
CEO
MR
Marcus
CTO
AT
Aiko
Design
JP
James
Eng
Comparison Table
| Feature | Free | Pro | Enterprise |
|---|---|---|---|
| Projects | 5 | Unlimited | Unlimited |
| API Access | — | ✓ | ✓ |
| SSO | — | — | ✓ |
| Support | Priority | Dedicated |
Dashboard Elements
10Admin panel components: KPIs, charts, tables, sidebar, activity feeds.
Sidebar Navigation
KPI Cards with Sparkline
Revenue
$48,295
↑ +12.5%
Users
12,847
↑ +8.2%
Orders
1,284
↑ +23.1%
Bounce
42.1%
↓ -2.4%
Bar Chart
Data Table
| Customer | Status | Amount | Date |
|---|---|---|---|
| Emma Wilson | Completed | $2,340 | Mar 28 |
| James Park | Processing | $1,890 | Mar 27 |
| Sofia Garcia | Pending | $890 | Mar 26 |
Activity Feed
New user signed up
2 min ago
Order #1284 completed
15 min ago
Payment received $2,340
1 hour ago
New review ★★★★★
3 hours ago
Donut Chart
$48K
Total
Products45%
Services25%
Subscriptions15%
Other15%
Date Range Picker
Mar 1 — Mar 31, 2026▾
Export Controls
Kanban Board
To Do
Design homepage
Fix login bug
In Progress
API integration
Done
Setup CI/CD
Write tests
User Management Table Row
JD
AdminActive
E-commerce Elements
12Shopping components: product displays, cart, checkout, reviews, and payment.
Product Image Gallery
📦
🎧
📱
🖼️
📦
Size / Color Selector
Color
Size
Quantity Selector + Add to Cart + Wishlist
1
Price Display + Stock Indicator
$129.99$159.99-19%
In Stock— Ships in 1-2 days
Only 3 left
Out of Stock
Review Component
4.8/5
★★★★★ (248 reviews)
Cart Item / Order Summary
📦
Wireless Headphones
Qty: 1
📦
Smart Watch
Qty: 1
Total$429.98
Checkout Stepper
✓
Cart✓
Shipping3
Payment4
ConfirmPayment Method Selector
Visa
Mastercard
Amex
PayPal
Apple Pay
Google Pay
Coupon / Promo Input
Trust Badges
Free Shipping
Easy Returns
Secure Payment
24/7 Support
Recently Viewed Products
📦
Headphones
📦
Watch
📦
Speaker
📦
Backpack
📦
Lamp
Blog Elements
8Content components: article layouts, reading progress, author cards, code blocks.
Reading Progress Bar
Author Card
Code Block
JavaScript
const config = {
style: 'minimal-clean',
pageType: 'landing',
palette: 'ocean',
}
generateDesign(config)Blockquote
"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs
Tag Cloud
Share Buttons
Table of Contents
Prev / Next Article Navigation
Utility Elements
10Layout helpers, dividers, cookie banners, empty states, error pages.
Dividers
OR
Empty State
No projects yet
Create your first design to get started.
404 Error Page
404
Page not found
The page you're looking for doesn't exist.
Cookie Banner
Chat Widget
Back to Top Button
Loading Screen
Loading...
Scroll Indicator
Scroll down
Overlay / Backdrop
Grid System Preview
1
2
3
4
5
6
7
8
9
10
11
12
4 col
4 col
4 col
Footer with Link Columns
Social Media Icons
Footer Newsletter
Payment Method Icons
Trust Badges / Certifications
Bottom Bar (Legal Links)
Color Palette
1010 neutrals + 9 vibrant colors with 11 shades each.
Neutral Colors
950
#0E121B
900
#181B25
800
#222530
700
#2B303B
600
#525866
500
#717784
400
#99A0AE
300
#CACFD8
200
#E1E4EA
100
#F2F5F8
50
#F5F7FA
0
#FFFFFF
Blue Palette
950
#122368
800
#1F3BAD
500
#335CFF
200
#C0D5FF
50
#EBF1FF
Green Palette
950
#0B4627
800
#1A7544
500
#1FC16B
200
#C2F5DA
50
#E0FAEC
Red Palette
950
#681219
800
#AD1F2B
500
#FB3748
200
#FFC0C5
50
#FFEBEC
Orange Palette
950
#683412
800
#AD581F
500
#FF9147
200
#FFD9C0
50
#FFF3EB
Yellow Palette
950
#624C18
800
#A78025
500
#F6B51E
200
#FFECC0
50
#FFF4D6
Purple Palette
950
#351A75
800
#4C25A7
500
#7D52F4
200
#CAC0FF
50
#EFEBFF
Pink Palette
950
#68123D
800
#AD1F66
500
#FB4BA3
200
#FFC0DF
50
#FFEBF4
Teal Palette
950
#0B463E
800
#1A7569
500
#22D3BB
200
#C2F5EE
50
#E4FBF8
Sky Palette
950
#124B68
800
#1F7EAD
500
#47C2FF
200
#C0EAFF
50
#EBF8FF
Token System
8Semantic color tokens for backgrounds, text, strokes, icons, and states.
Background Tokens
bg-strong-950#0E121Bbg-surface-800#222530bg-sub-300#CACFD8bg-soft-200#E1E4EAbg-weak-50#F5F7FAbg-white-0#FFFFFFText Tokens
text-strong-950#0E121Btext-sub-600#525866text-soft-400#99A0AEtext-disabled-300#CACFD8text-white-0#FFFFFFStroke Tokens
stroke-strong-950#0E121Bstroke-sub-300#CACFD8stroke-soft-200#E1E4EAstroke-white-0#FFFFFFIcon Tokens
icon-strong-950#0E121Bicon-sub-600#525866icon-soft-400#99A0AEicon-disabled-300#CACFD8icon-white-0#FFFFFFState Tokens
Success
darkbaselight
Error
darkbaselight
Warning
darkbaselight
Information
darkbaselight
Away
darkbaselight
Feature
darkbaselight
Verified
darkbaselight
Highlighted
darkbaselight
Typography
6Inter & Inter Display font system — titles, labels, paragraphs, subheadings.
Title / Heading Scale (Inter Display)
H1The quick brown fox
H2The quick brown fox
H3The quick brown fox
H4The quick brown fox
H5The quick brown fox
H6The quick brown fox
Label Scale (Inter Medium)
X-LargeThe quick brown fox jumps over the lazy dog
LargeThe quick brown fox jumps over the lazy dog
MediumThe quick brown fox jumps over the lazy dog
SmallThe quick brown fox jumps over the lazy dog
X-SmallThe quick brown fox jumps over the lazy dog
Paragraph Scale (Inter Regular)
X-LargeThe quick brown fox jumps over the lazy dog
LargeThe quick brown fox jumps over the lazy dog
MediumThe quick brown fox jumps over the lazy dog
SmallThe quick brown fox jumps over the lazy dog
X-SmallThe quick brown fox jumps over the lazy dog
Subheading Scale (Inter Medium, Uppercase)
MediumSubheading text
SmallSubheading text
X-SmallSubheading text
2X-SmallSubheading text
Font Weight Reference
AaRegular (400)
AaMedium (500)
AaSemi Bold (600)
AaBold (700)
Motion & Animation
55 speed options with ease-out easing.
Speed Options
100ms
Extra Fast
Hover states, toggles
200ms
Fast
Button clicks, dropdowns
300ms
Normal
Modal opens, page transitions
400ms
Slow
Complex reveals, charts
500ms
Extra Slow
Full-page animations
Easing Functions
Ease Out
cubic-bezier(0, 0, 0.2, 1)Default for most
Ease In-Out
cubic-bezier(0.4, 0, 0.2, 1)Page transitions
Ease In
cubic-bezier(0.4, 0, 1, 1)Exit animations
Linear
linearProgress bars, spinners
Animation Types
Dissolve / FadeSlide UpSlide DownScaleSmart Animate
Corner Radius
99 radius values from sharp to fully rounded.
Radius Scale
none
0px
2xs
2px
xs
4px
sm
6px
md
8px
DEFAULT
10px
lg
12px
xl
16px
2xl
20px
full
9999px
Radius in Context
Button
10px
Card
16px
Modal
20px
Badge
9999px
Input
8px
Avatar
9999px
Grid System
412-column grid with 24px gap, 1440px base width, 4 layout variants.
12-Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
6 columns
6 columns
4 col
4 col
4 col
3
3
3
3
Dashboard Layouts
Sidebar Expanded
Sidebar Collapsed
Top Navigation
Full Width
Spacing & Gap
4px
Base unit
8px
Small gap
12px
Compact
16px
Default
24px
Grid gap
32px
Section
48px
Large
64px
XL
Brand Logos
2020+ major brand logos via Remix Icon — lightweight, consistent.
All Brand Logos
Google
Search & Cloud
Apple
Technology
Microsoft
Software
Amazon
E-commerce
Netflix
Streaming
Spotify
Music
Stripe
Payments
Slack
Communication
Figma
Design
GitHub
Development
Discord
Community
Vercel
Hosting
Notion
Productivity
Linear
Project Mgmt
Twitter/X
Social
Instagram
Social
LinkedIn
Professional
YouTube
Video
PayPal
Payments
Airbnb
Travel
Logo Strip Preview (Trusted By)
Trusted by industry leaders
GoogleAppleStripeFigmaSlackNotionLinear
Brand Cards (Major Brands Style)
Google
Search & Cloud
OriginalBlackWhite
Apple
Technology
OriginalBlackWhite
Stripe
Payments
OriginalBlackWhite
GitHub
Development
OriginalBlackWhite
Country Flags
5050 country flags — circular, integrated with inputs and dropdowns.
All Flags (Circular)
🇺🇸
🇬🇧
🇩🇪
🇫🇷
🇹🇷
🇯🇵
🇰🇷
🇨🇳
🇮🇳
🇧🇷
🇦🇺
🇨🇦
🇮🇹
🇪🇸
🇳🇱
🇸🇪
🇳🇴
🇩🇰
🇫🇮
🇵🇱
🇵🇹
🇷🇺
🇸🇦
🇦🇪
🇸🇬
🇲🇽
🇦🇷
🇿🇦
🇳🇬
🇪🇬
🇮🇱
🇹🇭
🇻🇳
🇮🇩
🇲🇾
🇵🇭
🇳🇿
🇮🇪
🇨🇭
🇦🇹
🇧🇪
🇬🇷
🇨🇿
🇷🇴
🇭🇺
🇺🇦
🇨🇱
🇨🇴
🇵🇪
🇵🇰
Flag + Country Name + Dial Code
🇺🇸US+1
🇬🇧GB+44
🇩🇪DE+49
🇫🇷FR+33
🇹🇷TR+90
🇯🇵JP+81
🇰🇷KR+82
🇨🇳CN+86
🇮🇳IN+91
🇧🇷BR+55
🇦🇺AU+61
🇨🇦CA+1
Phone Input with Flag
🇹🇷+90▾
Language Selector with Flags
Emojis
30600+ emojis synced with Emojipedia — high-res, consistent style.
Smileys & People
😀
😃
😄
😁
😆
😅
🤣
😂
🙂
🙃
😉
😊
😇
🥰
😍
🤩
😘
😗
😚
😙
🥲
😋
😛
😜
🤪
😝
🤑
🤗
🤭
🤫
Gestures
👋
🤚
🖐️
✋
🖖
👌
🤌
🤏
✌️
🤞
🤟
🤘
🤙
👈
👉
👆
👇
☝️
👍
👎
✊
👊
🤛
🤜
👏
🙌
👐
🤲
🤝
🙏
Objects
💻
📱
⌨️
🖥️
🖨️
📷
📹
🎥
📞
📺
📻
⏰
🔋
💡
🔦
📦
📫
📬
✏️
📝
📊
📈
📉
🗂️
📁
📂
🔒
🔑
🛠️
⚙️
Nature
🌸
🌺
🌻
🌹
🌷
🌱
🌿
☘️
🍀
🌳
🌲
🌴
🌵
🍁
🍂
🍃
🌍
🌎
🌏
⭐
🌙
☀️
⛅
🌈
🔥
💧
❄️
💨
🌊
⚡
Food & Drink
🍎
🍐
🍊
🍋
🍌
🍉
🍇
🍓
🫐
🍑
🥝
🍅
🥑
🌽
🥕
🧅
🍕
🍔
🍟
🌭
🥪
🌮
🍜
🍣
🍰
🍩
☕
🍵
🥤
🍷
Travel
🚗
🚕
🚌
🚎
🏎️
🚓
🚑
🚒
✈️
🚀
🛸
🚁
⛵
🚢
🏠
🏢
🏥
🏨
🏪
🏫
⛪
🕌
🗼
🗽
🌉
🎢
🎡
⛲
🏖️
🏔️