Getting Started

Theming

Every component in the library is powered by a shared theme system.
You can use the global theme, update it at runtime, create your own theme instances, or provide a different theme to a single component.

Bundled styles

Use the Style selector in the Settings popup in the header to change the global preset throughout the site. Light and dark mode work independently. Explicit classes and local themes still take precedence.

Classic is the renamed original theme. The former default export remains a compatibility alias. All five presets include every library component and the same reusable variants.

Loading...

Styles change geometry, spacing, and surface treatment without selecting a color. Use the Color selector in Settings to choose any of Tailwind's 26 color families independently. These previews use the currently selected primary palette for accents. Status variants keep their semantic colors: success is green, error and danger are red, warning is amber, and info is blue.

Available palettes: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, taupe, mauve, mist, olive. Violet is the default.

Import the palette stylesheet to register the primary and secondary Tailwind colors. Set data-color on the root element to apply a palette. Changing data-color updates components using either palette's utilities without replacing the style theme.

Secondary shades shift each primary shade's OKLCH hue by 60 degrees while retaining its lightness. Chroma is reduced where needed to fit sRGB; neutral palettes retain their low chroma. Use secondary utilities such as bg-secondary-500 or a component's secondary variant. Both palettes provide shades 50 through 950, and secondary CSS variables can be overridden independently. Secondary backgrounds use the same shades as their primary counterparts in both modes. Text is gray-50 or gray-950, selected for contrast through the secondary foreground variables.

Loading...

Loading...

Reusable variants

Combine variant names to change appearance, size, and shape. Component classes are merged last. You can also reuse styles with references such as button.base and button.variant.soft.

Loading...

Buttons support primary, secondary, ghost, outline, soft, danger, success, link, pill, square, full, icon, and xs/sm/md/lg. Inputs support filled, error, success, unstyled, and sizes. Cards, dialogs, popovers, and fieldsets support compact, spacious, elevated, flat, outline, and soft.

Layout primitives support row, column, stack, center, and grid. Text supports accent, muted, and uppercase. Tables support compact, striped, and hover; lists support plain and compact.

The Global Theme

The library exposes a shared global theme instance.

Loading...

Theme Structure

A theme is defined as a plain object and wrapped with Theme. Each component can define a base class string and optional variants.

Loading...

Methods

You can read/write to the global theme, or a custom theme with built in methods.

Get

Use this if you want to read from a theme. You can read the entire theme, a component's entire object, the base style or a specific variant.

Loading...

Set

Provide a new theme object, component object, component base classes or component variant classes to replace the existing value.

Loading...

Update

Merging a theme, component, base or variant is done with the Update method. This is useful for adding new styles without replacing the entire value.

Loading...

Create Your Own Theme

Create a new theme by passing a theme object into Theme.

Loading...

Apply a Theme to a Component

Every component accepts a theme prop. This lets you override the global theme for a single component.

Loading...

Composing Styles

You can reuse styles across components using dot notation inside the variants prop.

Loading...

Primary Background Contrast

Primary backgrounds use gray-50 or gray-950, whichever has better contrast with the selected palette and shade. Pair bg-primary-500 with text-primary-contrast, or match another shade with text-primary-contrast-600. Custom palettes should also update the --primary-foreground-* variables. Text and icons inherit the foreground; use an inheritance override for children that supply their own text styles.

Loading...

Overrides

You can always override styles at the component level using the class prop.

Loading...