- Components
- theme
Theming
Customize JK-UI semantic tokens from your main CSS file
JK-UI keeps theming shadcn-friendly: semantic values, dark-mode values, component variables, and Tailwind mappings live directly in the main CSS file declared in
components.json.Installing
@jk-ui/base (via bunx shadcn add @jk-ui/base) adds the default variables to that file. It does not create a second palette or theme file.File responsibilities
| File | Responsibility |
|---|---|
| Main CSS file | :root, .dark, @theme inline, global component variables, imports and references |
styles/jk-ui/button.css | Button visual recipes |
styles/jk-ui/ui.css | Shared UI visual recipes |
styles/jk-ui/intents.css | Supported variant/intent color variables |
styles/jk-ui/base.css, form.css, utils.css | Structural, form, state, and helper utilities |
Semantic values
Customize the values already present in the main CSS:
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.22 0.01 260);
--primary: oklch(0.52 0.14 215);
--primary-foreground: oklch(1 0 0);
--destructive: oklch(0.58 0.22 27);
--border: oklch(0.92 0.01 260);
}
.dark {
--background: oklch(0.14 0.01 260);
--foreground: oklch(0.9 0.01 260);
--primary: oklch(0.62 0.15 215);
}
Use the standard shadcn vocabulary in application components:
<section className="bg-background text-foreground">
<div className="border border-border bg-card" />
</section>
Palette policy
Primary, secondary, accent, and state colors use direct values. JK-UI does not require unused
50–950 scales for every color family. Gray may keep a complete scale because neutral surfaces, borders, and text frequently need several levels.Add another shade only when the product actually consumes it.
Extended roles
JK-UI retains a small set of distinct roles used by its utilities:
fg-title, fg-subtitle, bg-subtle, bg-surface, bg-muted, overlay, border-strong, border-card, and border-input.There are no public
bg-bg, text-fg, or danger aliases. Use bg-background, text-foreground, and destructive.Variant and intent customization
Visual recipes remain palette-agnostic. Color combinations live in
intents.css:@utility btn-solid-primary {
--btn-color: var(--color-primary);
--btn-fg: var(--color-primary-foreground);
}
Components use bare prop values:
<Button variant="solid" intent="primary">Save</Button>
Theme presets are optional. Installing
@jk-ui/theme-{name} updates the semantic values in the same main CSS file.See Colors for the token map.