Components
Chat
Chat InputColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPInput PhoneNumber FieldRadio GroupSearch FieldSelection BoxTag FieldText FieldTextareaTypography
TypographyUtilities
Visually HiddenColors
The Intelligence-UI color system is designed to provide a consistent and accessible color palette across your application. It includes a range of colors, including primary, secondary, accent, and muted colors.
Colors
The Intelligence-UI color system is crafted to ensure a consistent and accessible color palette throughout your application. It features a diverse range of colors, including primary, secondary, accent, and muted shades.
This is the default theme in Intelligence-UI. You can personalize it by customizing settings on the themes page.
Color Usage
The table below shows the color classes used in the Intelligence-UI components and their corresponding components.
| Background Class | Used in Components |
|---|---|
| primary | pagination, slider, radio, date-field, tag-group, drop-zone, switch, calendar, grid-list, range-calendar, progress-bar, badge, number-field, sidebar, table, toggle, command-menu, checkbox |
| accent | list-box, dropdown, command-menu |
| overlay | popover, chart, sheet, drawer, tooltip, modal, command-menu |
| secondary | note, list-box, pagination, choicebox, calendar, range-calendar, dialog, progress-bar, badge, number-field, sidebar, table, button, toggle, command-menu, toast |
| muted | navbar, card, slider, radio, meter, color-slider, switch, dropdown, badge, color-wheel, checkbox, color-area |
| warning | tag-group |
| success | note, tag-group |
Change Gray
When you install Intelligence-UI using the CLI, you'll be prompted to select your preferred gray scale. Options include Tailwind's default grays such as gray, slate, zinc, stone, and neutral. If needed, you can always visit the themes page to change your selection.
Or by running the following command:
Learn more about the CLI in the CLI documentation.