Reito UI

Original Graphite desktop React components: compact controls, neutral surfaces, dark/light themes, and basic, complex and AI layers. Built with Base UI and shared design tokens.

Install

npm install @reito/ui @reito/tokens react react-dom

React 19 is required. Import the prebuilt styles once; a Tailwind build is not required just to render the components.

import '@reito/tokens/css';
import '@reito/ui/styles.css';
import { Button, Input } from '@reito/ui/basic';

export function Search() {
  return <div className="reito-root">
    <Input aria-label="Search" />
    <Button>Search</Button>
  </div>;
}

Set data-theme="dark" (or light) and data-density="compact" on the document's <html> element so portaled menus share the theme. Compact is the application default.

Public entries: @reito/ui, @reito/ui/basic, @reito/ui/complex, @reito/ui/ai, and the explicit native compatibility entry @reito/ui/native. Prefer SelectInput or Select for themed application selection controls.

ReitoThemeProvider supports runtime colors and typed tokens overrides. Shared semantic roles feed component defaults for Button, Input, Menu, Card and ScrollArea; nested scopes and overlays inherit the nearest configuration. See the component token guide for keys and scope boundaries.

• Live examples and Storybook
• Installation and migration guide
• Source and issues

MIT. Third-party notices are included in the package. AI examples demonstrate local UI state; the library does not provide a model backend.