## Theme

### Components

- [Accordion](/content/library/components/accordion/index.html)
- [Alert](/content/library/components/alert/index.html)
- [Area Chart](/content/library/components/area-chart/index.html)
- [Avatar](/content/library/components/avatar/index.html)
- [Badge](/content/library/components/badge/index.html)
- [Bar Chart](/content/library/components/bar-chart/index.html)
- [Breadcrumbs](/content/library/components/breadcrumbs/index.html)
- [Button](/content/library/components/button/index.html)
- [Calendar](/content/library/components/calendar/index.html)
- [Checkbox](/content/library/components/checkbox/index.html)
- [Checkbox Card](/content/library/components/checkbox-card/index.html)
- [Checkbox Group](/content/library/components/checkbox-group/index.html)
- [Context Menu](/content/library/components/context-menu/index.html)
- [Copy to clipboard button](/content/library/components/copy-to-clipboard-button/index.html)
- [Dialog](/content/library/components/dialog/index.html)
- [Drawer](/content/library/components/drawer/index.html)
- [Dropdown Menu](/content/library/components/dropdown-menu/index.html)
- [Fullscreen Dialog](/content/library/components/fullscreen-dialog/index.html)
- [Icon Button](/content/library/components/icon-button/index.html)
- [Icon with background](/content/library/components/icon-with-background/index.html)
- [Line Chart](/content/library/components/line-chart/index.html)
- [Link Button](/content/library/components/link-button/index.html)
- [Loader](/content/library/components/loader/index.html)
- [Pie Chart](/content/library/components/pie-chart/index.html)
- [Progress](/content/library/components/progress/index.html)
- [Radio Card Group](/content/library/components/radio-card-group/index.html)
- [Radio Group](/content/library/components/radio-group/index.html)
- [Select](/content/library/components/select/index.html)
- [Sidebar with sections](/content/library/components/sidebar-with-sections/index.html)
- [Skeleton Circle](/content/library/components/skeleton-circle/index.html)
- [Skeleton Text](/content/library/components/skeleton-text/index.html)
- [Slider](/content/library/components/slider/index.html)
- [Stepper](/content/library/components/stepper/index.html)
- [Switch](/content/library/components/switch/index.html)
- [Table](/content/library/components/table/index.html)
- [Tabs](/content/library/components/tabs/index.html)
- [Text Area](/content/library/components/text-area/index.html)
- [Text Field](/content/library/components/text-field/index.html)
- [Toast](/content/library/components/toast/index.html)
- [Toggle Group](/content/library/components/toggle-group/index.html)
- [Tooltip](/content/library/components/tooltip/index.html)
- [Tree View](/content/library/components/tree-view/index.html)
- [Vertical Stepper](/content/library/components/vertical-stepper/index.html)

### Customize theme

**Generate a stunning Tailwind CSS theme. Make your UI stand out with built-in dark mode and design tokens.**

#### Colors

- **Brand Primary:**  `#2563EB`
- **Default Font:**  `Neutral 900`
- **Subtext Color:**  `Neutral 500`
- **Neutral Border:**  `Neutral 200`
- **White:**  `Neutral 0`
- **Default Background:**  `Neutral 0`

| Color Name                | Color Code |
|---------------------------|------------|
| Brand 50                 | #EFF6FF    |
| Brand 100                | #DBEAFE    |
| Neutral 0                | #FFFFFF    |
| Warning 500              | #EAB308    |
| Success 500              | #22C55E    |

### Typography

- **Inter - 7 text tokens**
- **monospace** - System - 1 text token

| Style                     | Font    | Size | Line Height |
|---------------------------|---------|------|-------------|
| Heading 1                 | Inter 500 | 30px | 36px       |
| Heading 2                 | Inter 600 | 20px | 24px       |
| Body                      | Inter 400 | 14px | 20px       |
| Caption                   | Inter 400 | 12px | 16px       |

### Borders

- **Primary Border Style:** `1px solid #2563EB`
- **Neutral Border Style:** `1px solid #E5E5E5`

### Shadows

| Shadow Type  | Style                                       |
|--------------|---------------------------------------------|
| Shadow Small | `0px 1px 2px 0px rgb(0 0 0 / 0.05)`      |
| Shadow Medium| `0px 4px 16px -2px rgb(0 0 0 / 0.08)`    |
| Shadow Large | `0px 12px 32px -4px rgb(0 0 0 / 0.08)`   |