Getting Started

Colors

The UIhub 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 UIhub 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 UIhub. You can personalize it by customizing settings on the themes page.

--bg
--fg
--primary
--primary-fg
--secondary
--secondary-fg
--accent
--accent-fg
--muted
--muted-fg
--overlay
--overlay-fg
--success
--success-fg
--warning
--warning-fg
--danger
--danger-fg
--border
--input
--ring
--chart-1
--chart-2
--chart-3
--chart-4
--chart-5
--navbar
--navbar-fg
--sidebar
--sidebar-fg

Color Usage

The table below shows the color classes used in the UIhub components and their corresponding components.

Background ClassUsed in Components
primarypagination, 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
accentlist-box, dropdown, command-menu
overlaypopover, chart, sheet, drawer, tooltip, modal, command-menu
secondarynote, list-box, pagination, choicebox, calendar, range-calendar, dialog, progress-bar, badge, number-field, sidebar, table, button, toggle, command-menu, toast
mutednavbar, card, slider, radio, meter, color-slider, switch, dropdown, badge, color-wheel, checkbox, color-area
warningtag-group
successnote, tag-group

Change Gray

When you install UIhub 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.