HyperKit

An application platform with a framework-agnostic core — 130+ components for SolidJS, with a growing React package sharing the same stylesheets and themes. IDE-grade panels, a navigation/action registry, a diagram engine, theming, Effect services, and AI-native tooling.

▶ Live docs & demo apps · Component explorer — every component runs live, editable in the browser.

HyperKit is not another button library. It is a full application layer: accessible primitives (built on @kobalte/core), feature-rich composites (chat, kanban, file explorer, command palette), resizable IDE panels, a keyboard system, 40 theme presets driven entirely by CSS custom properties, typed Effect services, and an MCP server so AI assistants can look up its API like a teammate would.

The architecture is one design system, many renderers: @ybouhjira/hyperkit-styles owns every stylesheet, --sk-* token, and theme preset; the SolidJS package (full catalog) and the React package (@ybouhjira/hyperkit-react, 20 core components and growing) render the identical DOM contract from it — a theme switch repaints both frameworks the same way. Alongside the UI, a full-stack platform layer (services, realtime, persistence, desktop) is taking shape. See the Roadmap.

Why HyperKit

• One design system, many renderers — stylesheets, --sk-* tokens, and 40 themes live in the framework-agnostic @ybouhjira/hyperkit-styles; the SolidJS package ships the full catalog and @ybouhjira/hyperkit-react renders the same sk-* DOM contract in React (20 core components, expanding per the roadmap). diagram-core is fully framework-agnostic too.
• AI-native by design — Ships an MCP server for component-doc lookup, llms.txt/llms-full.txt for machine consumption, and a navigation registry that can expose your UI's actions as MCP tools (generateMCPTools) so agents can drive the interface.
• IDE-grade systems, not just widgets — Resizable panel layouts, a navigable action registry with middleware (permissions, undo/redo, rate limiting), transport adapters (WebSocket, MessagePort, Tauri), and recording/replay.
• Token-first theming — Every visual value flows through --sk-* CSS custom properties. 40 built-in presets (editor, OS, and product-inspired). A custom ESLint plugin enforces the token discipline in this repo's own CI.
• Feature-scaled components — Fewer, larger components that grow with props instead of fragmenting into micro-packages: FileExplorer scales from a file list to a two-pane browser with preview, sort, filter, and picker/save modes.
• Effect-TS services — WebSocket, Session, FileSystem, Clipboard, and Logging services with typed errors — no try/catch soup.
• Tested — 5,000+ unit tests across the monorepo, plus visual regression, publint/attw packaging checks, bundle-size budgets, and dead-export detection (knip) in one quality gate.

Install

npm install @ybouhjira/hyperkit

solid-js and effect are peer dependencies (npm ≥7 and pnpm install them automatically) — they must be single-instance in your app because HyperKit shares Solid's reactivity graph and Effect's service tags with your code.

import '@ybouhjira/hyperkit/dist/index.css';

React

npm install @ybouhjira/hyperkit-react

import { ThemeProvider, Button, fjordTheme } from '@ybouhjira/hyperkit-react';
import '@ybouhjira/hyperkit-styles/styles.css';

export function App() {
  return (
    <ThemeProvider theme={fjordTheme}>
      <Button variant="primary">Same tokens, same themes, React renderer</Button>
    </ThemeProvider>
  );
}

Quick Start

import { Button, ThemeProvider, themePresets } from '@ybouhjira/hyperkit';
import '@ybouhjira/hyperkit/dist/index.css';

function App() {
  return (
    <ThemeProvider theme={themePresets['zed-dark']}>
      <Button variant="primary" size="md">
        Get Started
      </Button>
    </ThemeProvider>
  );
}

SSR (SolidStart) works out of the box — see the SSR Guide and the SolidStart example.

What's Inside

Components (130+)

| Category | Highlights | | ------------------------ | -------------------------------------------------------------------------------------------------------------- | | Layout | Box, Flex, Stack, Grid, ScrollArea, MasonryGrid, DocumentPage | | Input | Button, Input, Select, Slider, RangeSlider, TagInput, DateInput, ColorInput, FileInput, AudioInput, VideoInput | | Display | Text, Badge, Card, MetricCard, CodeBlock, Markdown, Timeline, Sparkline, TerminalOutput, StreamingText | | Feedback | Spinner, ProgressBar, ProgressRing, Skeleton, ErrorBanner, EmptyState | | Overlay & Navigation | Dialog, Popover, Dropdown, Tabs, Accordion, Tooltip, Table | | Chat & AI | ChatWindow, LLMChatBox, MessageList, ToolApproval, SubagentTracker, CostTracker, ModelSelector | | Data & Apps | FileExplorer, FilePicker, KanbanBoard, IssueBoard, DashboardContainer, ActionForm | | Utilities | CommandPalette, ContextMenu, Toast, SettingsPanel, ThemeBuilder, GuidedTour |

Full catalog with props and examples: llms.txt (index) / llms-full.txt (complete API).

Systems

| System | What it provides | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Panel system | IDE-style resizable/dockable panel layouts with drag-and-drop rearranging | | Navigation framework | Navigable registry + action dispatch, 5 middleware (permissions, undo/redo, logging, analytics, rate limiting), transports, persistence, recording/replay, health checks | | Theme system | ThemeProvider, 40 presets, theme sounds (Web-Audio), visual effect toggles | | Keyboard system | Scoped shortcuts, conflict handling, searchable ShortcutsHelp dialog | | Animation | Transition presets, scroll reveal, prefers-reduced-motion respected | | Effect services | Logging (transports/redaction/sampling), WebSocket, Session, FileSystem, Clipboard |

Packages

| Package | Description | | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | diagram-core | Framework-agnostic graph engine — branded IDs, dagre/ELK/force layouts, A* edge routing, serialization | | diagram-svg | Vanilla SVG renderer — pan/zoom, themes, grid, markers | | diagram-solid | SolidJS diagram bindings — 7 components, 13 hooks | | devtools | In-app CSS inspector — component tree, token tracing, theme audit | | explorer | A self-built Storybook alternative (this repo dogfoods it) | | views | Schema-driven view generation from Effect Schema | | editor | WYSIWYG component-tree editor | | mcp | Effect-TS MCP server framework | | ai-renderer | Intent → validated UI schema via LLM | | llm-pipeline | Multi-LLM orchestration with typed steps and cost tracing | | eslint-plugin-hyperkit | 6 rules enforcing the design-token system | | gantt / timeline / sequence-diagram | Token-styled visualization components |

Theme System

40 presets, all driven by --sk-* CSS custom properties:

import { ThemeProvider, themePresets } from '@ybouhjira/hyperkit';

// Editor-inspired: 'zed-dark', 'cursor-dark', 'sublime', 'github-dark', 'linear', 'warp', …
// OS-native: 'macos-dark', 'windows-light', 'ubuntu-dark', 'material-dark', …
<ThemeProvider theme={themePresets['zed-dark']}>
  <App />
</ThemeProvider>

// Or define your own ThemeConfig
<ThemeProvider theme={{
  colors: { bg: '#1a1a2e', fg: '#eaeaea', accent: '#e94560' /* … */ },
  fonts: { body: 'Inter', mono: 'JetBrains Mono' },
  radius: { sm: '4px', md: '8px', lg: '12px' },
}}>
  <App />
</ThemeProvider>

Themes can also define sound presets (Web-Audio synthesized, no assets shipped) and effect toggles (hover glow, press ripple, selection lift) — both opt-in.

AI Integration

HyperKit treats AI assistants as first-class consumers of its documentation:

• MCP server — mcp-server.js (configured via .mcp.json, stdio transport) exposes search_components and get_component tools. Claude Code, Cursor, and other MCP-compatible editors pick it up automatically.
• llms.txt / llms-full.txt — component API index and full reference in the emerging llms.txt convention.
• UI-as-tools — generateMCPTools turns any registered navigable component into MCP tool definitions, and routeMCPToolCall dispatches incoming calls back into the UI. Your app's interface becomes drivable by an agent.
• ai-renderer — feed it data + intent, get back schema-validated HyperKit UI.

Effect Services

import { makeLoggingLayer, ConsoleTransport, HttpTransport } from '@ybouhjira/hyperkit';

const LoggingLayer = makeLoggingLayer({
  maxHistory: 500,
  context: { app: 'my-app', env: 'production' },
  redact: ['token', 'password'], // masked as [REDACTED]
  sampling: { rate: 0.1 }, // 10% sent to external transports
  transports: [
    ConsoleTransport({ format: 'pretty' }),
    HttpTransport({ url: 'https://logs.example.com/ingest' }),
  ],
});

All services export typed errors (WebSocketConnectionError, SessionNotFoundError, ClipboardError, …) — failures are values, not surprises.

CLI

npx hyperkit init            # scaffold a theme.ts
npx hyperkit theme generate  # type-safe declarations for custom theme properties
npx hyperkit tokens          # list all design token types and values

See cli/README.md.

Development

pnpm install
pnpm build            # TypeScript + Vite build
pnpm test             # Vitest unit tests (5,000+)
cd packages/explorer && pnpm dev   # component explorer on port 6007

Quality gate

Every change must pass:

npm run quality
# format:check → lint → lint:css → audit:css-vars → test → build → publint → attw → size → knip

Bundle budgets are enforced: dist/index.js ≤ 340 kB, dist/index.css ≤ 36 kB.

Documentation

• Docs site — getting started, guides, all 131 component pages
• Live Explorer — every component, interactive
• Roadmap — multi-renderer vision and the full-stack platform plan
• Design principles — the feature-scale philosophy
• Patterns / Cookbook
• CSS variables reference
• Migration guide

License

MIT