@orbitlabsui/ui

Shared UI components, design tokens, and theme system for internal Orbit projects.

Install

pnpm add @orbitlabsui/ui
# peers (if not already present):
pnpm add react react-dom

Requires Tailwind CSS 3.4.x in the consuming app.

Setup

1. Add the preset and scan the package in tailwind.config.js:

import orbitPreset from '@orbitlabsui/ui/tailwind-preset';

export default {
  presets: [orbitPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // REQUIRED — without this, Tailwind purges @orbitlabsui/ui's classes and
    // components render unstyled:
    './node_modules/@orbitlabsui/ui/dist/**/*.js',
  ],
};

2. Import the tokens CSS once, at your app entry, before your own CSS:

import '@orbitlabsui/ui/styles.css';
import './index.css'; // your Tailwind entry (@import 'tailwindcss/...')

3. Wrap your app in the theme provider (enables light/dark):

import { ThemeProvider } from '@orbitlabsui/ui';

<ThemeProvider>
  <App />
</ThemeProvider>

Usage

import { Button, ThemeToggle } from '@orbitlabsui/ui';

<Button variant="primary" icon="plus" iconPosition="leading">New</Button>
<ThemeToggle />

DataTable

import { DataTable, type ColumnDef } from '@orbitlabsui/ui';

interface Row { id: string; name: string; status: string }
const columns: ColumnDef<Row>[] = [
  { key: 'name', title: 'Name', sortable: true },
  { key: 'status', title: 'Status' },
];

<DataTable<Row>
  data={rows}
  columns={columns}
  searchValue={q}
  onSearchChange={setQ}
  emptyMessage="No rows yet."
/>

Breadcrumbs (router-agnostic)

import { Breadcrumbs } from '@orbitlabsui/ui';

// Plain links (default <a href>):
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Current' }]} />

// With a router (e.g. react-router) — inject via renderLink:
<Breadcrumbs
  items={crumbs}
  renderLink={(item, children) => <Link to={item.href!}>{children}</Link>}
/>

Theming

Dark mode is class-based (<html class="dark">), driven by ThemeProvider / ThemeToggle. Tokens are CSS variables defined in @orbitlabsui/ui/styles.css; override them in your own CSS to rebrand.