CodeCora UI

One frame, many faces

Design tokens, eleven mixable themes and accessible Svelte 5 components. Pick a theme, accent and density; everything follows.

Components Install

Pick a theme, watch the components follow

Read and write

What each theme changes Every component in every state

Eleven themes, one set of components

Each tile shows only what its theme changes: surfaces, display face, corners, label shape, the filled action, the focus ring and the floating shadow. The accent and density you pick in the toolbar apply to all of them; Access themes show their proof. Open a title for its full page.

Product

Neutral

The Plain Workbench

Current theme

Uteke

The Field Notebook

Corin

The Night Console

Corin light

The Paper Console

Gaira

The Volt Console

Tagfold

The Light Table

Dark

Neutral dark

The Plain Workbench after dark

Uteke dark

The Field Notebook by lamplight

Access

High contrast

High Beam

For low vision and bright rooms: 7:1 text, heavier rings.

Text 19.7:1, muted text 12.7:1 on the page

Neutral (colour-blind safe)

The Plain Workbench, colour-blind safe

For red/green colour blindness: status in blue and vermillion.

Success is blue Danger is vermillion

Dimmed

Low Light

For light sensitivity and long evenings: low glare.

Page at 27% lightness, text 10.5:1: no white on black

Character

Sepia

The Reading Room

Slab

The Proof Sheet

Soft

The Pebble

Themes nest per element

A dark panel inside a light page needs no second stylesheet, only an attribute.

data-theme="uteke"

Field notes, week 43

The document reads on green paper with ink text. Its toolbar switches the accent to blue without leaving the theme.

data-accent="blue"

39 components on bits-ui

Plain CSS on semantic tokens, with or without Tailwind. Every one works with the keyboard alone and at 375 px.

Install

Until the npm scope is live, install from the release tarballs; the import names stay the same. See the README on GitHub, opens in a new tab for every package.

bash 
bun add https://github.com/codecoradev/codecora-ui/releases/download/v0.7.0/codecora-tokens-0.7.0.tgz
bun add https://github.com/codecoradev/codecora-ui/releases/download/v0.7.0/codecora-ui-0.6.0.tgz

Explore

Components
Every component in every state, with a state matrix and props.
Samples
Sign in, settings, list and detail, a data table and a first run.
Dashboard
An admin screen built with AppShell and Sidebar.
Tokens
Colour roles, type, radius, spacing and contrast pairs per theme.
Motion
Durations and easings, with enter and exit replayed.
Icons
Lucide and Phosphor, sized by the theme.
Brand
Product marks and favicon sets.