Installation

Add @officina/ui to a React 19 app, import its two stylesheets in the right order, and render your first component.

1. Install

pnpm add @officina/ui react react-dom

@officina/ui ships ESM with bundled TypeScript types. React 19 is a required peer dependency; a handful of components need optional peers, covered in Peer dependencies.

2. Import the stylesheets

Components carry no hardcoded colors or spacing — they read CSS custom properties. Import both stylesheets once, at your app entry:

import '@officina/ui/tokens.css';
import '@officina/ui/styles.css';

Order matters. tokens.css defines the variables that styles.css reads, so importing it second leaves components unstyled or falling back to browser defaults.

3. Render a component

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

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

Framework notes

Next.js (App Router)

The package is compiled as a single client module — every entry ships a "use client" directive — so you can import it directly from a Server Component without wrapping it yourself.

Add it to transpilePackages so Next compiles the shipped JSX:

// next.config.mjs
export default {
  transpilePackages: ['@officina/ui'],
};

Import the stylesheets in your root layout:

// app/layout.tsx
import '@officina/ui/tokens.css';
import '@officina/ui/styles.css';

Vite

No configuration needed. Import the stylesheets in main.tsx before your own CSS so your overrides win:

import '@officina/ui/tokens.css';
import '@officina/ui/styles.css';
import './index.css';

Tailwind CSS

Officina UI does not require Tailwind. If your app uses it, nothing needs wiring — the library ships its own compiled CSS and does not depend on your Tailwind config.

Next steps

Theming — override tokens to match your brand.
Components — live demos and API tables.

On this page