Overview
Theme
Icons
Installation
Quickstart
Components
Accordion
Alert
Area Chart
Avatar
Badge
Bar Chart
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Card
Checkbox Group
Context Menu
Copy to clipboard button
Dialog
Dialog Layout
Drawer
Drawer Layout
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 semantic colors. 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
Fonts
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
#2563eb 1 solid
Neutral Border Style
#e5e5e5 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)