twenty × oappsDesign system for Twenty CRM extensions

One look, one feel for every app you ship inside Twenty.

63 React components + 7 in-panel recipes + a bridge to twenty-sdk/ui — all paired one-to-one with Twenty's --t-*CSS variables. Drop a component into an OAPPS Twenty extension and it inherits the host theme; drop it into a standalone Next.js app and it carries Twenty's identity with it. Light and Dark, AGPL-3.0, built to be agent-friendly.

at a glance

63componentsprimitives + 7 recipes

twenty-sdk/uibridgefor front-component imports

1 000+tokensexposed as --t-* CSS vars

Light · Darkthemestoggle .light / .dark on <html>

Quick install

Full guide →

Three packages publish to GitHub Packages under the @8maverik8 scope. Once your .npmrc is configured to point at npm.pkg.github.com, install in one line:

bash
pnpm add @8maverik8/twenty-tokens \
        @8maverik8/twenty-design \
        @8maverik8/twenty-icons

Start here

All components →

Three recipes (the panel-content building blocks) + three Normal-DOM primitives most consumer apps reach for in the first hour.

PanelHeaderlayout

Top-of-section row — title on the left, action buttons on the right.

LineItemCarddata

One row of a priced line — header / body / footer slots + optional delete.

TotalsBlockdata

Subtotal + discount controls + total — the panel footer recap.

Fieldform

Label + control + hint / error composition. Owns the id and aria-invalid wiring.

Modal · ConfirmDialogoverlay

Centred full-attention surface with backdrop. ConfirmDialog is a thin Modal preset for destructive confirms.

DataTabledata

Higher-level Table — built-in search, client-side sort, page size selector, selection counter, toolbar slot.

Foundations

Every visual decision in the library resolves to a token. Pick the right token instead of inventing a hex.

Colors30 Radix scales × 12 steps, all driven by --t-color-*. Light + dark switch automatically.

Spacing4 px multiplier ladder from --t-spacing-0 to --t-spacing-32, including 0.5 and 1.5.

TypographyOne sans family, 7 sizes × 3 weights × 7 colors — never hard-code a font size.

Radius & bordersxs → xxl + pill + rounded. Consistent corners across the system.

Why this exists

OAPPS apps inside Twenty kept reinventing the same chrome.Buttons with mismatched heights, dropdowns with random shadows, dialogs that re-paint the modal layer. Every extension owned its own micro-design system.

One contract — Twenty's --t-* tokens — pinned by the system.Every component here paints from those tokens. The same Button rendered in a front-component Web Worker and in a standalone Next.js app reads identical, because both surfaces sit on the same theme.

AI-agent first.Each component has a structured spec — variant axes, anatomy, do / don't with rationale — that an LLM can scan in seconds. See the agent guide for the recommended way to consume this library from an assistant.