Design System Library

A comprehensive collection of reusable UI components built with atomic design principles

Atoms

The fundamental building blocks of the design system - buttons, inputs, badges, and other basic elements.

Buttons

Button Variants
Button Sizes
With Icons
States

Icon Buttons

Icon Button Variants

Form Inputs

Text Input
With Error
Select
Textarea
Checkbox
Radio

Toggles & Controls

Toggle Switches

Badges

Badge Variants
Default Primary Success Warning Error Info

Avatars

Avatar Sizes
JD
JD
JD
AB
CD

Progress Bars

Default Progress
Success
Warning
Error

Icons

Icon Set (Lucide)
home
user
settings
search
plus
check
x
menu
bell
heart
star
calendar
mail
phone
map-pin
clock
edit
trash
download
upload
dumbbell
activity
trophy
target
flame
trending-up
zap
coffee

Molecules

Combinations of atoms that form more complex, reusable UI patterns.

Form Groups

Search Input
Input with Button

List Items

Basic List Item
Document.pdf 2.4 MB
User List Item
JD
John Doe john@example.com

Cards

Card Title

Card description goes here

Card content with some example text to show the layout.

Total Revenue
$45,231
+12.5% from last month
Active Users
2,845
-3.2% from last week

Alerts

Success
Your changes have been saved successfully.
Error
Something went wrong. Please try again.
Warning
Your session will expire in 5 minutes.
Information
A new version is available for download.

Tabs

Tab Navigation
Pill Tabs

Organisms

Complex UI components composed of multiple molecules working together.

Navigation Bar

Sidebar

Data Table

Name Email Status Role Actions
JD
John Doe
 john@example.com Active Admin
JS
Jane Smith
 jane@example.com Pending Editor
BJ
Bob Johnson
 bob@example.com Inactive Viewer
Showing 1-3 of 24 results

Modal

Click to open modal

Dropdown Menu

Click to toggle
Profile Settings Help
Log Out

Toast Notifications

Changes saved successfully!
Failed to save changes

Accordion

This is a comprehensive collection of reusable UI components built with atomic design principles. It includes atoms, molecules, organisms, and templates.

Simply copy the HTML structure and CSS classes to use any component in your project. All styles are included in this single file.

Yes! All components are built with responsive design in mind and will adapt to different screen sizes.

Charts

Charts, graphs, and visual data representations.

Sparkline Up
+12.5%
Sparkline Down
-8.3%
Donut Chart
Sales 40% Marketing 30% Other 30%
Bar Chart
Mon
65%
Tue
85%
Wed
45%
Thu
75%
Fri
90%

Templates

Pre-built page layouts combining multiple organisms.

Dashboard Layout Preview

Form Layout Preview

FitForge Example

A fully functional fitness tracking application built using the design system components above.

Full Screen
FitForge

Dashboard

Welcome back, John! Here's your fitness overview.

Calories Burned 2,847 +12% this week
Workouts 5 +2 from last week
Active Minutes 385 +45 min
Goals Completed 3/5 60% complete

Today's Workout

Upper Body
2/5 completed

Weekly Progress

M
T
W
T
F
S
S

Workouts

Browse and manage your workout routines.

Upper Body Strength

Chest, shoulders, back, arms

45 min5 exercises

HIIT Cardio

High intensity intervals

30 min8 exercises

Core Blast

Abs and lower back

20 min6 exercises

Yoga Flow

Flexibility and relaxation

40 min12 poses

Nutrition

Track your daily food intake and macros.

1,850
Calories of 2,400 goal
145g
Protein of 180g goal
195g
Carbs of 300g goal
56g
Fat of 80g goal

Goals

Set and track your fitness goals.

Lose 10 lbs On Track
7 lbs lost3 lbs to go
Run 5K under 25 min In Progress
Current: 28:30Target: 25:00
Bench Press 200 lbs New
Current: 135 lbsTarget: 200 lbs

Schedule

Plan your workout week.

Monday
Upper Body
Tuesday
HIIT Cardio
Wednesday
Rest Day
Thursday
Lower Body
Friday
Core Blast
Saturday
Yoga
Sunday
Rest Day

Settings

Customize your FitForge experience.

Profile

Display NameJohn Doe
Emailjohn@fitforge.com

Preferences

NotificationsEnabled
Dark ModeEnabled
UnitsImperial (lbs, ft)