@uix-design/react

@uix-design/react

UIX Design is a React component system for operational products: forms, data-heavy workspaces, navigation, overlays, feedback, and runtime theming.

Install

pnpm add @uix-design/react @uix-design/tokens

Import the package styles once at the application entrypoint:

import "@uix-design/react/styles";

Match mobile browser surfaces

Enable edge-to-edge layout in the host document and provide an initial solid color so Safari and Chrome do not flash an unrelated surface before React starts:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="#ffffff" />

Then opt into runtime synchronization. The provider follows manual light/dark changes, keeps the document root fallback in sync, and restores any pre-existing browser surface configuration when it unmounts.

<DesignSystemProvider browserThemeColor theme="light">
  <App />
</DesignSystemProvider>

Pass { light: "...", dark: "..." } to browserThemeColor when the product header uses custom solid fallback colors. AppShell keeps controls inside device safe areas when viewport-fit=cover is present. Set edgeToEdge only on the viewport-level shell so Safari can compose its top edge from the attached header while embedded shell previews remain contained. Browser chrome transparency remains platform-controlled; use a solid fallback color that visually matches the composed header surface.

On small-screen Android devices, Chrome 135 and later use viewport-fit=cover as the native edge-to-edge opt-in: the page can reach the gesture-navigation area from first paint without Chrome's temporary bottom chin. UIX keeps fixed actions and feedback, plus drawer footers, above the dynamic safe area while allowing the page surface to remain visible underneath system chrome. In a normal browser tab, Chrome still owns the address bar's shape, placement, material, and opacity; a website can coordinate its color and surrounding surface, but cannot force Safari's floating-toolbar appearance.

Each shell can also choose independent in-page safe-area surfaces without adding styles to the host documentation. The top keeps the header surface by default; a transparent bottom lets the native Safari toolbar or Chrome gesture-navigation area compose over the page:

<AppShell edgeToEdge safeAreaSurfaces={{ bottom: "transparent" }}>
  <Workspace />
</AppShell>

Start with a themed operational form

DesignSystemProvider sets the theme, density, runtime accent, and sidebar surface for its children. Field wires labels, hints, required state, and validation feedback to compatible controls.

import {
  Button,
  Card,
  DesignSystemProvider,
  Field,
  Form,
  Input,
  Textarea
} from "@uix-design/react";

export function CreateProjectForm() {
  return (
    <DesignSystemProvider accentColor="#2563eb" density="compact" theme="light">
      <Card>
        <Form>
          <Field hint="Shown to teammates in the workspace." label="Project name" required>
            <Input name="projectName" placeholder="Q3 collections" required />
          </Field>

          <Field label="Context">
            <Textarea name="context" placeholder="What should this project accomplish?" />
          </Field>

          <Form.Footer>
            <Button type="submit">Create project</Button>
          </Form.Footer>
        </Form>
      </Card>
    </DesignSystemProvider>
  );
}

Handle focused operational decisions

Compose Dialog with its semantic parts for short, blocking workflows. The component manages keyboard dismissal, focus handling, and the dialog relationship for you.

import { useState } from "react";
import { Button, ButtonCluster, Dialog } from "@uix-design/react";

export function PublishReportAction() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Publish report</Button>

      <Dialog open={open} onOpenChange={setOpen}>
        <Dialog.Content size="sm">
          <Dialog.Header>
            <Dialog.Title>Publish the collections report?</Dialog.Title>
            <Dialog.Description>
              The report will become visible to Finance and Operations.
            </Dialog.Description>
          </Dialog.Header>

          <Dialog.Footer>
            <ButtonCluster align="end">
              <Dialog.Close asChild>
                <Button variant="ghost">Cancel</Button>
              </Dialog.Close>
              <Button onClick={() => setOpen(false)}>Publish</Button>
            </ButtonCluster>
          </Dialog.Footer>
        </Dialog.Content>
      </Dialog>
    </>
  );
}

Build feedback and local navigation

Use Alert for persistent context, Toast for transient feedback, and Tabs for accessible local navigation. All three support theme, density, and runtime accent settings from the provider.

import { Alert, Button, Tabs, Toast } from "@uix-design/react";

const reviewTabs = [
  {
    content: <p>128 invoices are waiting for review.</p>,
    label: "Queue",
    value: "queue"
  },
  {
    content: <p>12 invoices were escalated today.</p>,
    label: "Escalations",
    value: "escalations"
  }
];

export function CollectionsWorkspace() {
  return (
    <>
      <Alert title="Sync delay" tone="warning">
        The warehouse feed is 12 minutes behind. Review the latest successful import before
        approving invoices.
      </Alert>

      <Tabs ariaLabel="Collections workspace" items={reviewTabs} responsive="menu" />

      <Toast
        action={<Button size="sm">Review</Button>}
        description="7 invoices require approval before 16:00."
        title="Collections digest"
        tone="success"
      />
    </>
  );
}

Included building blocks

• Actions: buttons, icon buttons, button groups, and menus.
• Forms: fields, inputs, selects, choices, sliders, switches, and validation helpers.
• Data display: tables, data-table shells, trees, timelines, collections, and spreadsheet tools.
• Navigation: tabs, pagination, navbar, scrollspy, tooltips, and workspace sidebar.
• Overlays and feedback: dialogs, drawers, popovers, dropdowns, alerts, and toasts.
• Theming: light/dark mode, compact density, runtime accent colors, and sidebar surfaces.

License

MIT. Copyright (c) 2026 José L. Alvarado Santamaría.