Skip to main content
dotUI
Customize
Preview
Customize
Colors
Base color
#808080
Accent
#438cd6
Algorithm
OKLCH Perceptual
Chart colors
Categorical palette
Typography
Heading
Geist
Ag
Body
Geist
Ag
Icon Library
Lucide icons
Radius
Factor
1.00x
Density
Mode
compact
Cursor
Interactive
default
Disabled
not-allowed
Components
Accordion
1 param
Alert
2 params
Avatar
1 param
Badge
1 param
Card
1 param
Checkbox
1 param
Color Area
1 param
Color Swatch
1 param
Color Swatch Picker
1 param
Command
1 param
Input
1 param
List Box
1 param
Loader
1 param
Menu
1 param
Modal
5 params
Progress Bar
3 params
Radio Group
1 param
Skeleton
1 param
Slider
9 params
Switch
2 params
Tag Group
1 param
Tooltip
2 params
Code style
npx shadcn init https://dotui.org/r/init
Open in
Cards
Cards
Accordion
Alert
Area Chart
Avatar
Badge
Bar Chart
Breadcrumbs
Button
Calendar
Card
Checkbox
CheckboxGroup
ColorArea
ColorField
ColorPicker
ColorSlider
ColorSwatchPicker
Combobox
Command
DateField
DatePicker
Drawer
Empty
Field
FileTrigger
Group
Input
InputGroup
Kbd
Line Chart
Link
ListBox
Loader
Menu
Modal
NumberField
OTPField
Pagination
Pie Chart
Popover
ProgressBar
Radar Chart
Radial Chart
RadioGroup
SearchField
Select
Separator
Sidebar
Skeleton
Slider
Switch
Table
Tabs
TagGroup
TextArea
TextField
TimeField
Toast
ToggleButton
ToggleButtonGroup
Tooltip
Tree
100%