Brands813
↑ ↓ to browse
View full design.md ↗
DaisyUI· Design Systemdaisyui.com
Semantic Tailwind components · 36 themes

Tailwind without the cognitive load.

Every theme is a consistent palette — primary, secondary, accent, neutral, base — generated as CSS variables. Swap theme and every component updates, from buttons to badges to charts.

Color Palette24 tokens
primary#661ae6
on-primary#ffffff
secondary#d926a9
accent#1fb2a6
neutral#1d232a
background#ffffff
surface#f2f2f2
surface-alt#e5e6e6
ink#1f2937
info#3abff8
success#36d399
warning#fbbd23
error#f87272
cupcake-primary#65c3c8
cupcake-accent#eeaf3a
cupcake-bg#faf7f5
cupcake-content#291e00
dracula-primary#ff79c6
dracula-bg#282a36
synthwave-primary#e779c1
synthwave-bg#2d1b69
retro-primary#ef9995
retro-bg#e4d8b4
shadow-soft#f0f0f0
Buttons
TypographyGoogle Font
Outfit
display-hero

Cupcake. Bumblebee. Synthwave.

72px · 900 · -1.5px
display-large

36 themes out of the box

64px · 900 · -1.2px
h1

Every theme is a consistent palette — primary, secondary, accent, neutral, base — generated as CSS variables. Swap theme and every component updates, from buttons to badges to charts.

48px · 700 · 0px
h2

Click

36px · 700 · 0px
h3

Every theme is a consistent palette — primary, secondary, accent, neutral, base — generated as CSS variables. Swap theme and every component updates, from buttons to badges to charts.

24px · 700 · 0px
IconsLucide
Set: Lucide · brand-matched
Formfocus ring
Email
you@company.com
Password
••••••••
Card · Shapes

36 themes out of the box

Every theme is a consistent palette — primary, secondary, accent, neutral, base — generated as CSS variables. Swap theme…

Design System
none
sm
md
pill
Elevation
RING
CARD
ELEVATED
Controls
On
Off
✓Checked
Unchecked
Selected
Option
Alerts
Heads up — a new version of the design system is available.
Saved. Your changes are live across all surfaces.
Some tokens are missing a contrast-safe pairing.
Couldn’t reach the server. Retry in a moment.
Badges
SolidSoftOutlineNewv2.0
FAQ
36 themes out of the box
Every theme is a consistent palette — primary, secondary, accent, neutral, base — generated as CSS variables. Swap theme and every component updates, from buttons to badg…
How does it integrate with my stack?
Is there a free tier?
Tabs
OverviewActivitySettings
DayWeekMonth
Stats
48.2k
Active users
+12.4%
$12.8k
MRR
+3.1%
99.9%
Uptime
−0.02%
Table
MemberPlanStatus
AQAvery QuinnPro Active
JLJordan LeeTeam Pending
SRSam RiveraFree Active
Avatars
AQJLSR+5
AQ
Avery Quinn
Online · Owner
Slider · Progress
Volume62%
Storage used78%
Tooltip · Popover
Brand-styled tooltipHover target

Keyboard shortcuts

Press ⌘K to open the command menu, ? for help.

Navigation bar
Banner
NewDaisyUI just shipped a refreshed design system.Read more →
Pricing
Pro
$24 /mo
  • Unlimited projects
  • Priority support
  • Custom domains
Stepper
CartDetails3Payment4Review
Breadcrumb
HomeDesign SystemDaisyUI
Menu
Profile
Settings
Billing
Sign out
Toast
Changes savedUndo
You have 3 new updates
Activity
Avery created a new project
2h ago
Jordan left a comment
5h ago
Sam shipped v2.0
1d ago
Notifications
AQAvery Quinn invited you to DaisyUI.
2 minutes ago
JLJordan Lee approved your design tokens.
1 hour ago
SRSam Rivera mentioned you in a thread.
Yesterday
Code
theme.ts
// DaisyUI tokens
export const theme = {
  primary: "#661ae6",
  radius: "16px",
}
Calendar
March 2026
SMTWTFS28291234567891011121314151617181920212223242526272829303112
No resultsTry adjusting your filters or search for something else.
Loading
Pagination
‹123…12›
Brand moment

DaisyUI makes Tailwind feel like Bootstrap again — in the best possible way.

DaisyUI · Design System

Similar systems

Generated from shared tags, visual DNA, category, color, type, and radius.

Filter by this ↗
Material Design 380%

shared styles: Colorful, Light · same category: Design System

HeroUI79%

shared styles: Colorful, Light · same category: Design System

Tremor77%

shared styles: Colorful, Light · same category: Design System

Untitled UI68%

shared styles: Light · same category: Design System

AlignUI68%

shared styles: Light · same category: Design System

Atlassian Design System68%

shared styles: Light · same category: Design System