Components Library

Over 100+ reusable UI elements and variants for building rich interfaces.

Design Tokens

Brand Colors

Primary #6366f1
Secondary #ec4899

Status Colors

Success #10b981
Error #ef4444
Warning #f59e0b
Info #3b82f6

Neutrals

Text Main #1e293b
Text Muted #64748b
Border #e2e8f0
Background #f8fafc

Buttons & Actions

Variants

Sizes

With Icons

States

Forms & Inputs

Text Inputs

Select & Controls

Feedback & Overlays

Alerts

Info: System update available.
Success: Changes saved!
Warning: Check your inputs.
Error: Failed to connect.

Badges & Tags

New Completed Beta 9+
Design Development Marketing

Spinners

Modals & Toasts

Data Display

Avatars

Mouse Pig Dragon
+1

Accordion

What is PixelDraw?
PixelDraw is a fun tool for creating 8-bit art and converting it into 3D models!
Is it free?
Yes, PixelDraw is completely free and open source for educational use.

Cards

Project Alpha

Last updated 2 hours ago

Active
Create New Project

Education & Gamification

Flashcards (Click to Flip)

🍎 Apple
A red fruit

Quiz Options

Paris
London (Correct)
Berlin (Wrong)

New Components Expansion

Outline Buttons

Social Buttons

Floating Labels

Range Slider

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Timeline

Today

New Feature Launch

Released the new dashboard component.

Yesterday

Design Review

Team meeting to discuss the new design system.

Stepper

Account
2
Personal
3
Payment
4
Confirm

Profile & Stats Cards

Avatar

Sarah Connor

UX Designer

1,234
Total Users
$12.5k
Revenue

Tooltips

Hover me I am a tooltip! Another one More info here

Dropdowns

Menu Header Action Another action
Something else here
Profile Settings
Logout

List Groups

Active item Second item Third item
Flush Item 1
Flush Item 2
Flush Item 3

Pricing Cards

Basic
$9/mo
  • 5 Projects
  • 10GB Storage
  • Custom Domain
Pro
$29/mo
  • Unlimited Projects
  • 100GB Storage
  • Custom Domain

Image Gallery

Gallery 1
Gallery 2
Gallery 3
Gallery 4

Loading Skeletons

Dividers

OR
Content Section

Video Container

Breadcrumbs

Pagination

Progress Bars

25%
50%
75%

Form Switch

Input Groups

@
@example.com

Chat Bubbles

Hello! How can I help you today?
10:00 AM
Hi, I need help with the Design System.
10:01 AM

File Upload

Choose a file...

Carousel (Scroll Snap)

Slide 1
First Slide Label
Slide 2
Second Slide Label
Slide 3
Third Slide Label

Mega Menu (Hover to View)

Category 1

Item 1 Item 2 Item 3

Category 2

Item 4 Item 5 Item 6

Category 3

Item 7 Item 8 Item 9

Category 4

Promo

Status Indicators

Online Busy Away
Pulse

Vertical Stepper

Order Placed
We have received your order.
2
Processing
We are preparing your items.
3
Shipped
Waiting for carrier pickup.

Notification Items

New Message received from Alice.

5 mins ago

Project Created successfully.

1 hour ago

Date Picker (Static)

October 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12

Rating Stars

4.0/5

Color Swatches

Empty State

No Projects Yet

Get started by creating your first project in the dashboard.

Floating Action Button (FAB)

Scroll to Top

Advanced Forms & Data Display

Tag / Chip Input

React Vue.js

Rich Text Toolbar

Click here to start editing...

File Upload

Click or drag files here

Supports JPG, PNG, PDF up to 10MB

  • documentation.pdf 45%

Circular Progress

Horizontal Timeline

Step 1
Draft
Step 2
Review
Step 3
Publish

Stats Grid

10.5k
Unique Visitors
+24%
Growth Rate
85
Active Projects

Definition List

Component
A reusable building block for UI.
Token
Atomic design values like color and spacing.
Pattern
A combination of components to solve a problem.

Code Block

CSS
.btn {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

Layout & Navigation Patterns

Masonry Grid

Card 1

Short description here.

Card 2

Taller content card.

Card 3

Another card.

Text Only

Just some text without an image.

Split View

Files
  • index.html
  • style.css
No file selected

Sticky Header

Logo

Scroll down to see the header stick...

Content block 1

Content block 2

Content block 3

Content block 4

Content block 5

Tree View

  • Project Root
    • src
      • app.js
    • index.html

Circle Menu

Sidebar Navigation

My App
  • Dashboard
  • Customers
  • Orders 3
  • Settings

Bottom Navigation

Home
Search
Saved
Profile

Content & Media Components

Image Comparison

After
Before

Flip Card

Hover to Flip

Discover more details on the back.

Secret Info

This is the back of the card with additional content!

Pricing Table

Popular

Professional

$29/mo
  • 10 Projects
  • Unlimited Users
  • 50GB Storage
  • 24/7 Support

Testimonial

"This design system has completely transformed how we build products. The speed and consistency are unmatched."
Sarah Jenkins
Sarah Jenkins
Lead Designer at TechCorp

FAQ Accordion

You can install the design system via npm using `npm install @my-design-system/core`.
Yes, we provide full support for React, Vue, and Angular with dedicated wrappers.

Feature Highlight

Lightning Fast

Optimized for performance with zero external dependencies and minimal bundle size.

Theming Engine

Easily customize colors, spacing, and typography using CSS variables or our CLI tool.

Audio Player

Design Podcast - Ep 12 02:45 / 15:00

Advanced Interactive Components

Kanban Board

To Do 3
Design
Create wireframes
Due Tomorrow
Research
Competitor analysis
In Progress 1
Dev
Setup project repo

Chat Interface

Support Team
Hi there! How can I help you today?
I'm having trouble with my account settings.
I can certainly help with that. Could you specify which setting?

Comments Thread

Alex Johnson 2 hours ago
Great article! I really liked the section about design tokens.
Reply Like
Author 1 hour ago
Thanks Alex! Glad you found it useful.
Reply Like

Wizard Form

Account
2
Profile
3
Finish

Profile Details

Enter your personal information below.

Notification & User Menu

Notifications Mark all read
New comment on your post
5 min ago
Task completed: Design System
2 hours ago

Context Menu

Copy ⌘C
Cut ⌘X
Paste ⌘V
Delete ⌫
We use cookies to improve your experience. By using our site, you agree to our cookie policy.

Social & Content Components

Components for social interaction, content presentation, and community features.

Comment Thread

User
James Wilson 2 hours ago

This design system is looking really clean! I love the attention to detail in the micro-interactions.

Reply Like
User
Sarah Chen 1 hour ago

Thanks James! We've been working hard on consistency.

Reply Like

Social Actions

Activity Feed

New file uploaded
Just now
Task completed
2 hours ago
Commented on "Project X"
Yesterday

Article Card Horizontal

Article
Technology
The Future of UI Design

Exploring the upcoming trends in user interface design and how AI is shaping the workflow of designers...

5 min read • Feb 12, 2026

Author & Quotes

"Design is not just what it looks like and feels like. Design is how it works."
Steve Jobs
Co-founder, Apple
Author

Alex Morgan

Senior Product Designer writing about systems and UX.

Tag Cloud

Design System UI/UX CSS JavaScript Accessibility Responsive Web Development Frontend

E-commerce & Dashboard Patterns

Product Card

Product
Accessories Minimalist Watch
$129 $159

Shopping Cart Item

Headphones
Premium Headphones
Black / Wireless
1
$249.00

Checkout Summary

Order Summary

Subtotal $378.00
Shipping $12.00
Tax $30.24
Total $420.24

Credit Card Input

4242 4242 4242 4242
John Doe 12/25

Dashboard Graph

MonTueWedThuFriSat

Order History

Order ID
Product
Status
Total
#45890
Minimalist Watch
Delivered
$129.00
#45891
Premium Headphones
Processing
$249.00

Filter Chips

All Products
Electronics
Clothing
Home & Garden
Filters

User Table

User Role Status Actions
Alice Smith
Editor Active
Bob Jones
Admin Away

Utility & Misc Components

Helper components for documentation, data visualization, and micro-interactions.

Keyboard Shortcuts (Kbd)

Press Ctrl + C to copy.

Hit ⌘ + Shift + P to open command palette.

Code Snippets

Use npm install to get started.

function helloWorld() { console.log("Hello, Design System!"); return true; }

File Tree

  • project-root
    • src
      • style.css
      • app.js
    • index.html
    • README.md

Countdown Timer

02 Days
14 Hours
35 Mins
18 Secs

Feature List

  • Responsive Design: Works on all devices.
  • Accessible: Follows WCAG 2.1 guidelines.
  • Dark Mode Ready: Built-in support for themes.

Statistic Grid

100+ Components
2.5k Downloads
99% Satisfaction
24/7 Support

Corner Ribbon & Icon Badge

New
Item
3
9+

Image Comparison (Visual)

Comparison

Overlays & Navigation Extras

Additional overlay components and navigation patterns.

User & Notification Menus

User
Notifications Mark all read
New Comment
Alex commented on your post.
Task Completed
Project X is now live.

Context Menu

Edit ⌘E
Duplicate ⌘D
Delete ⌫

Search Results

Getting Started with Design System docs/intro/getting-started

Learn how to integrate the design system into your project...

Design Principles docs/core/principles

Core values that guide our design decisions.

Cookie Consent Banner

We use cookies to improve your experience. By continuing to visit this site you agree to our use of cookies.