baseui.sh

A restrained, accessible component library and design language for React product interfaces.

baseui.sh is maintained as an independent open-source repository. Product applications consume it as a normal package rather than copying dashboard-specific CSS or importing source from another monorepo.

Install

npm install @wundercorp/baseui

pnpm add @wundercorp/baseui
yarn add @wundercorp/baseui
bun add @wundercorp/baseui

import { BaseUIProvider, Button, Card } from "@wundercorp/baseui";
import "@wundercorp/baseui/styles.css";

export function Application() {
  return (
    <BaseUIProvider theme="system">
      <Card>
        <Button>Continue</Button>
      </Card>
    </BaseUIProvider>
  );
}

Repository structure

apps/docs                 Living component catalogue
examples/vite-react       Consumer integration example
packages/react             Published @wundercorp/baseui package
docs                       Design, architecture, accessibility, and release guidance
.github                    CI, release, issue, and contribution automation
.changeset                 Versioning and changelog metadata

Development

npm install
npm run dev
npm run check
npm run test
npm run build
npm run verify:package

Public package entry points

The root package exposes the complete API. Category subpaths make ownership and discovery clearer:

import { Button } from "@wundercorp/baseui/actions";
import { Field, Input } from "@wundercorp/baseui/forms";
import { Dialog } from "@wundercorp/baseui/overlays";
import "@wundercorp/baseui/styles.css";

Tokens and icons are independently consumable:

import { baseUITokens } from "@wundercorp/baseui/tokens";
import { Icon, PhosphorIcon } from "@wundercorp/baseui/icons";
import { RocketLaunchIcon } from "@wundercorp/baseui/phosphor";
import "@wundercorp/baseui/tokens.css";

<Icon name="settings" />
<PhosphorIcon icon={RocketLaunchIcon} label="Launch" />

Design invariants

• Every interface surface uses the shared 4 px radius token; intrinsically circular indicators use the dedicated circle token.
• Semantic tokens are the public styling contract.
• Red is reserved for primary action, focus, current navigation, and selected state.
• Monospace is reserved for code, identifiers, commands, measurements, and machine-readable values.
• Borders establish structure before shadow is introduced.
• Every interactive component must have keyboard, focus-visible, disabled, and reduced-motion behavior.

Releasing

Changesets drive versions and changelogs. The first package version is published interactively, then GitHub Actions publishes future versions through npm trusted publishing with OIDC and provenance. See RELEASING.md and docs/publishing.md.

Open source

Licensed under Apache-2.0. See CONTRIBUTING.md, CODE_OF_CONDUCT.md, SECURITY.md, and GOVERNANCE.md.

Naming

baseui.sh is a distinct styled design system. It is not affiliated with the existing Base UI or Base Web projects. See docs/naming.md before public launch.