Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenColors
The Justd 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 Justd 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 Justd. You can personalize it by customizing settings on the themes page.
Color Usage
The table below shows the color classes used in the Justd 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 Justd 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.