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