DESIGNMD.fun

26 Component Patterns

Component Library
with Design Tokens

Production-ready UI patterns built on shadcn/ui & Radix UI. Every component ships with tokens, states, spacing rules, and copy-ready code.

component patterns

26 of 26 components

All Components

Click any component to view its live preview, copyable code, and the design tokens it uses.

View Code & Tokens →

Buttons

Primitives

shadcn
Total Revenue

$48,295

+12% from last month

Active Users

8,492

+6% this week

View Code & Tokens →

Cards

Layout

shadcn
View Code & Tokens →

Forms

Inputs

shadcn

Starter

$9

/month

  • 5 projects
  • 10 GB
Popular

Pro

$29

/month

  • Unlimited
  • 100 GB
  • Priority

Enterprise

Custom

/month

  • All features
  • SLA
View Code & Tokens →

Pricing

Marketing

shadcn
New Release v2.0

Build faster with
great components

Production-ready UI patterns with design tokens, accessibility, and motion baked in.

View Code & Tokens →

Hero

Marketing

shadcn

"Incredible components. Saved us weeks of development."

JD

Jane Doe

CTO at Acme

"The accessibility and motion design is top-notch."

MS

Mike S.

Lead Designer

View Code & Tokens →

Testimonials

Marketing

shadcn
NameRoleStatusRevenue
Alice ChenEngineerActive$4,200
Bob SmithDesignerActive$3,800
Carol WuPMAway$5,100
Dave KimDevOpsOffline$4,600
View Code & Tokens →

Table

Data

shadcn
August 2026
Su
Mo
Tu
We
Th
Fr
Sa
View Code & Tokens →

Calendar

Data

shadcn

Revenue Trend

Last 6 months

+18%
View Code & Tokens →

Charts

Data

shadcn
View Code & Tokens →

Dialog

Overlay

shadcn
A collection of re-usable components built on Radix UI primitives. Copy and paste into your project, fully customizable.
View Code & Tokens →

Accordion

Layout

shadcn
AC
BS
CW
DK
+12
JD
JD
JD
View Code & Tokens →

Avatar

Primitives

shadcn
9:00 AM

Kickoff Meeting

Align on Q3 goals

11:00 AM

Design Review

Prototype feedback

2:00 PM

Dev Sprint

Implementation begins

4:00 PM

QA Testing

Automated test suite

View Code & Tokens →

Timeline

Data

shadcn

Revenue

$124K

+18%

Users

8,492

+6%

Churn

2.3%

-0.4%

Avg Session

4m 32s

+12%

View Code & Tokens →

Stats

Data

shadcn
DefaultSecondaryOutlineDestructive
ActivePendingDraftArchived
View Code & Tokens →

Badges

Primitives

shadcn
Key metrics and summaries at a glance. Track progress toward quarterly goals.
View Code & Tokens →

Tabs

Navigation

shadcn
Storage68%
CPU Usage42%
Memory85%
Network23%
View Code & Tokens →

Progress

Feedback

shadcn
ESC

Quick Actions

View Code & Tokens →

Command Palette

Overlay

shadcn
View Code & Tokens →

Toast

Feedback

shadcn
Notifications
3

Deployment successful

2m ago

Build failed on main

15m ago

New comment on PR #42

1h ago

View Code & Tokens →

Notification

Feedback

shadcn

how to use

setup guide

Using These Components

All components are built on shadcn/ui. Follow these steps to add them to your project.

Step 01

Install shadcn/ui

npx shadcn@latest init

Initialize shadcn/ui in your project with your preferred theme and configuration.

Step 02

Add Components

npx shadcn@latest add button

Add individual components. Each ships with the Radix primitive and CVA styles.

Step 03

Copy & Customize

// Paste from the code tab

Copy the pattern code from the Code tab above and adapt it to your design.

Build Faster with 26 Ready Patterns

Copy, customize, and ship. Every component ships with tokens, states, and spacing rules.

Design Tokens