HyperUI

A React component library built for real customization. 60+ open-source primitives you copy into your project, own the source, and tune to match your product — no sealed packages, no black boxes.

Why HyperUI

Most component libraries ship you a sealed package. You get what they give you.

HyperUI works differently: every primitive is yours to copy, edit, and reshape. The token system lets you go from neutral defaults to a fully branded design system without rewriting each component from scratch.

• 60+ primitives — buttons, forms, overlays, navigation, data display, and more
• Token-driven theming — radius, spacing, color, contrast, shadow, and typography all via CSS variables
• 6 style presets — Stone, Mist, Sand, Carbon, Bloom, Edge — each a different visual direction
• Dark mode — built-in, token-driven
• Copy and own — no black box. The source is yours once installed.

Installation

npm install @hyzrui/core

Add the styles once in your app root:

import "@hyzrui/core/styles.css";

Wrap your app in the theme provider:

import { HyperThemeProvider } from "@hyzrui/core";

export default function App({ children }) {
  return <HyperThemeProvider>{children}</HyperThemeProvider>;
}

Usage

import { Button, Card, CardContent, CardHeader, CardTitle, Field, Input } from "@hyzrui/core";

export function LoginForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Sign in</CardTitle>
      </CardHeader>
      <CardContent>
        <Field label="Email">
          <Input placeholder="[email protected]" />
        </Field>
        <Button fluid>Continue</Button>
      </CardContent>
    </Card>
  );
}

Adding components via CLI

# pnpm
pnpm dlx hyperui add button

# npm
npx hyperui add button

# yarn
yarn dlx hyperui add button

# bun
bunx hyperui add button

This copies the component source into your project so you can edit it directly.

Theming

Use defineHyperTheme to create a custom theme:

import { defineHyperTheme, HyperThemeProvider } from "@hyzrui/core";

const theme = defineHyperTheme({
  id: "brand",
  radius: 10,
  density: "comfortable",
  colors: {
    background: "#f9fafb",
    foreground: "#111827",
    surface: "#ffffff",
    border: "#e5e7eb",
    primary: "#111827",
    primaryForeground: "#ffffff",
    accent: "#2563eb",
    accentForeground: "#ffffff",
  },
  typography: {
    controlSize: 14,
    headingWeight: 700,
  },
  sizing: {
    controlHeight: 38,
    buttonHeight: 34,
    cardPadding: 20,
  },
});

export default function App({ children }) {
  return <HyperThemeProvider theme={theme}>{children}</HyperThemeProvider>;
}

See the customization docs for the full token surface.

Local Development

npm install
npm run dev        # start the workbench at localhost:3000
npm run typecheck  # run TypeScript checks
npm run build:lib  # build the library for publishing

Contributing

Issues and pull requests are welcome at github.com/hyzr1/hyperUI.