Introduction

Officina UI is a React component library. One package, @officina/ui, gives you 250+ primitives — forms, data display, overlays, charts, scheduling, and editor surfaces — all typed, accessible, and styled entirely through CSS custom properties.

pnpm add @officina/ui react react-dom

What you get

• One install, no add-ons. Everything from Button to Scheduler, TreeList, Gauge, and CandlestickChart lives in the same package. There is no pro tier and no separate icon or chart kit to license.
• Token-driven theming. Components read CSS variables rather than hardcoded values, so rebranding is a matter of overriding a handful of tokens. See Theming.
• Types that match the docs. The prop tables on this site are generated from the component source, so they cannot drift from what you install.
• Accessible by default. ARIA roles, keyboard navigation, and focus management ship with the components rather than being left to the consumer.

What it is not

Officina UI is a component library, not an application framework. It has no router, no data layer, and no opinion about how you fetch or authenticate. It renders in any React 19 app — Next.js, Vite, Remix, or your own setup.

Quick taste

import { Button } from '@officina/ui';

export function Example() {
  return <Button variant="primary">Get started</Button>;
}

Where to next

• Installation — add the package and wire up its two stylesheets.
• Theming — override tokens to match your brand.
• Peer dependencies — the optional libraries a few components need.
• Components — live demos and API tables for every primitive.