HyperUI

Enterprise-ready component library with 50+ accessible, responsive components.

Features

• 50+ Components — Buttons, forms, modals, tables, data grids, and more
• WCAG 2.1 AAA — Full accessibility compliance
• Responsive Design — Mobile-first, works on all screen sizes
• Theme-aware — Support for light, dark, and custom themes
• Type-safe — Full TypeScript support
• Enterprise Features — Data tables, bulk actions, role-based UI, notifications
• Zero Configuration — Works out of the box with sensible defaults

Installation

npm i @hyperpackai/hyperui

Usage

import { Button, Card, Input } from "@hyperpackai/hyperui";

export function App() {
  return (
    <Card>
      <h1>Hello World</h1>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  );
}

Component Categories

• Buttons & Actions — Button, ButtonGroup, FAB, ToggleButton
• Form Controls — Input, Select, Checkbox, Radio, Textarea, Slider
• Data Display — Card, Table, DataGrid, List, Avatar, Badge
• Feedback — Alert, Dialog, Toast, Snackbar, Progress
• Navigation — Navbar, Sidebar, Breadcrumb, Pagination, Tabs
• Overlay — Modal, Drawer, Popover, Dropdown, Menu
• Layout — Stack, Grid, Container, Box, Paper
• AI Components — AI chat, suggestions, completions

Theming

import { ThemeProvider, useTheme } from "@hyperpackai/hyperui";

export function App() {
  return (
    <ThemeProvider theme="dark">
      <MyApp />
    </ThemeProvider>
  );
}

Customization

All components support customization through CSS variables and theme config.

Documentation

• Component Library
• Theming Guide
• Component Gallery

Release Readiness

HyperUI owns its benchmark baselines and release gate. Before publishing HyperUI-facing changes, run:

npm run release:gate:hyperui

The gate builds HyperUI, runs API/accessibility/keyboard/theme tests, enforces Node and Chromium benchmark budgets, checks the HyperDocs bundle size, and captures HyperDocs visual smoke screenshots.

License

MIT