Registry · CodeCora UI playground

Items

Blocks are copied into your app ($lib/components) and are yours to change. They are built from @codecora/ui, which stays a package, and each one installs the theme bridge first.

CodeCora theme bridge

theme

Installs @codecora/tokens and points the shadcn-svelte variables at --cc-* tokens, so shadcn components follow data-theme, data-accent and data-density.

npx shadcn-svelte@latest add https://<this-site>./r/cc-theme.json

Login form

block

Sign-in card with email, password, remember me, progress and error states.

npx shadcn-svelte@latest add https://<this-site>./r/cc-login.json

Settings page

block

Profile, notifications and danger-zone tabs with one save button and a confirm dialog.

npx shadcn-svelte@latest add https://<this-site>./r/cc-settings.json

Dashboard shell

block

AppShell with sidebar, mobile drawer and bottom bar, and a page header with actions.

npx shadcn-svelte@latest add https://<this-site>./r/cc-dashboard-shell.json

Console overview

block

Developer console frame: sidebar with a user menu, a breadcrumb and search header, a title row, tabs and a page body.

npx shadcn-svelte@latest add https://<this-site>./r/cc-console-overview.json

Resource detail

block

Detail page: back link, header with a split primary button, a grouped list with row menus, and a segmented tool list with search and a callout.

npx shadcn-svelte@latest add https://<this-site>./r/cc-resource-detail.json

Status panel

block

Status card with a tinted icon, an action, a strip of labelled stats and a why / what-to-do panel; the tone sets the icon and tint.

npx shadcn-svelte@latest add https://<this-site>./r/cc-status-panel.json

Data table

block

Searchable, filterable, sortable and paged table with row selection and a bulk action.

npx shadcn-svelte@latest add https://<this-site>./r/cc-data-table.json

What the theme bridge does

cc-theme adds @codecora/tokens, imports its CSS and rewrites the shadcn variables in your :root and .dark blocks to read CodeCora tokens. Your shadcn components then follow data-theme, data-accent and data-density on any element, nested regions included.

css

@import '@codecora/tokens/tokens.css';
@import '@codecora/tokens/shadcn.css';

:root,
.dark {
  --background: var(--cc-surface);
  --primary: var(--cc-accent);
  --ring: var(--cc-focus);
  /* ... every shadcn variable, mapped onto a --cc-* token */
}

Dark themes (for example corin) set their own colours, but shadcn's dark: utilities still follow the .dark class: add it next to a dark data-theme. See the token catalogue for every theme.