Get Started

Introduction

View as markdown
InstallSee a demo

@oscarkalid/ui is a set of React components and the design tokens they are built on. Buttons, tables, dialogs, charts and the smaller things that go around them.

Install it as a package or copy a component file into your project and change it from there. Both work. Each component is one file.

Install

Install the package, then import the stylesheet once at the root of your app. The stylesheet carries the tokens. Components have no colours without it.

bun add @oscarkalid/ui

You can also just take a file. A component needs itself, the token sheet and the cn helper.

Files

packages/ui/src/components/Button.tsx    # the component
packages/ui/src/styles/tokens.css        # colour, type, motion
packages/ui/src/lib/cn.ts                # class merging

Use a component

Import from the package root. Anything under src is internal and may change between versions.

TypeScript

import "@oscarkalid/ui/styles.css";
import { Button } from "@oscarkalid/ui";
 
export function Example() {
  return <Button variant="primary">Save</Button>;
}

Design tokens

Everything visual comes from CSS variables. Primitives hold the raw values, semantic tokens give them a role. A theme is a different set of values on the semantic layer.

CSS

/* primitives: the raw palette */
--primitive-slate-950: #101317;
 
/* semantic: what components use */
--color-bg: var(--primitive-slate-950);
--color-ink: #f2f2f3;

Next

Read the source

Every component and the tokens they read from.

Open

Last updated: 12 August 2026