Overview
Theme
Icons
Installation
Components
Accordion
Alert
Area Chart
Avatar
Badge
Bar Chart
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Card
Checkbox Group
Context Menu
Copy to clipboard button
Dialog
Drawer
Dropdown Menu
Fullscreen Dialog
Icon Button
Icon with background
Line Chart
Link Button
Loader
Pie Chart
Progress
Radio Card Group
Radio Group
Select
Sidebar with sections
Skeleton Circle
Skeleton Text
Slider
Stepper
Switch
Table
Tabs
Text Area
Text Field
Toast
Toggle Group
Tooltip
Tree View
Vertical Stepper
Generate a stunning Tailwind CSS theme.Make your UI stand out with built-in dark mode and design tokens. Customize then copy & paste tailwind.config.js to install.
Customize theme
Copy tailwind.config.js
Theme
Color Tokens
Brand Primary
#2563eb
Default Font
#171717
Subtext Color
#737373
Neutral Border
#e5e5e5
White
#ffffff
Default Background
#ffffff
Brand
Brand 50
#eff6ff
Brand 100
#dbeafe
Brand 200
#bfdbfe
Brand 300
#93c5fd
Brand 400
#60a5fa
Brand 500
#3b82f6
Brand 600
#2563eb
Brand 700
#1d4ed8
Brand 800
#1e40af
Brand 900
#1e3a8a
Neutral
Neutral 0
#ffffff
Neutral 50
#fafafa
Neutral 100
#f5f5f5
Neutral 200
#e5e5e5
Neutral 300
#d4d4d4
Neutral 400
#a3a3a3
Neutral 500
#737373
Neutral 600
#525252
Neutral 700
#404040
Neutral 800
#262626
Neutral 900
#171717
Neutral 950
#0a0a0a
Error
Error 50
#fef2f2
Error 100
#fee2e2
Error 200
#fecaca
Error 300
#fca5a5
Error 400
#f87171
Error 500
#ef4444
Error 600
#dc2626
Error 700
#b91c1c
Error 800
#991b1b
Error 900
#7f1d1d
Warning
Warning 50
#fefce8
Warning 100
#fef9c3
Warning 200
#fef08a
Warning 300
#fde047
Warning 400
#facc15
Warning 500
#eab308
Warning 600
#ca8a04
Warning 700
#a16207
Warning 800
#854d0e
Warning 900
#713f12
Success
Success 50
#f0fdf4
Success 100
#dcfce7
Success 200
#bbf7d0
Success 300
#86efac
Success 400
#4ade80
Success 500
#22c55e
Success 600
#16a34a
Success 700
#15803d
Success 800
#166534
Success 900
#14532d
New color palette
Typography
Abc
Caption
Inter 400 (12/16)
Abc
Caption Bold
Inter 500 (12/16)
Abc
Body
Inter 400 (14/20)
Abc
Body Bold
Inter 500 (14/20)
Abc
Heading 3
Inter 600 (16/20)
Abc
Heading 2
Inter 600 (20/24)
Abc
Heading 1
Inter 500 (30/36)
Abc
Monospace Body
monospace 400 (14/20)
Borders
Primary Border Style
#2563ebff 1 solid
Neutral Border Style
#e5e5e5ff 1 solid
Corners
Rounded Small
2
Rounded Medium
4
Rounded Large
8
Circular
9999
Shadows
Shadow Small
0px 1px 2px 0px rgba(0, 0, 0, 0.05)
Shadow Medium
0px 4px 16px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.08)
Shadow Large
0px 12px 32px -4px rgba(0, 0, 0, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.08)