Namespace UI Kit

Namespace UI Kit is the Namespace design-system package built on HeroUI v3. It preserves HeroUI's accessible React component APIs while applying Namespace theme colors and providing shared hooks, utilities, and icons.

Documentation · Storybook

Repository

This pnpm and Turborepo monorepo contains:

• packages/uikit — the publishable @thenamespace/uikit package.
• apps/docs — the documentation site and component demos.
• apps/storybook — the component catalogue and visual development environment.

See the package README for installation, imports, theming, component subpaths, and API usage.

Development

Requirements:

• Node.js 24 or newer
• pnpm 11

Install dependencies:

pnpm install

Start Storybook:

pnpm dev

Run the complete validation suite:

pnpm check

Build all workspace projects:

pnpm build

Package usage

Install the package:

pnpm add @thenamespace/uikit

Import Tailwind CSS followed by the Namespace stylesheet in the application's main CSS entry:

@import "tailwindcss";
@import "@thenamespace/uikit/styles.css";

Import components from the root package or individual component subpaths:

import { Button, Card } from "@thenamespace/uikit";
import { Input } from "@thenamespace/uikit/input";

Explore every component, example, and API in the Namespace UI Kit documentation or browse the complete Storybook catalogue.

Theme development

Namespace theme variables live in packages/uikit/src/styles/globals.css.

Releases

User-facing package changes require a Changesets entry:

pnpm changeset

The release workflow versions and publishes @thenamespace/uikit to npm. The Storybook application is private and excluded from releases.

License

Apache-2.0