Every corner
is a parallelogram.
Tokamak is a web component library built on two structural rules. No framework required. Drop one script tag and use custom elements anywhere.
The entire visual language collapses to a pair of geometric constraints. Everything else follows.
are parallelograms.
Buttons, inputs, cards, badges, nav items, tabs, progress bars. No exceptions. skewX(-14deg) on the shell. Content counter-skewed to stay upright.
one circular leading edge.
Panels, drawers, dialogs. A circle of radius 80vh forms the left boundary. Overflow clipped to viewport — the hard cut is the design.
10 components. Native custom elements. No build step, no dependencies, no framework lock-in.
| Element | Description | Status |
|---|
Installation
One script tag. Works in any HTML page, React app, Vue project, or static site.
The fastest way to get started. Paste this before your closing </body> tag.
Add data-theme="dark" to your root element to switch all components to dark mode simultaneously.
Tokamak uses JetBrains Mono exclusively. The CDN bundle injects it automatically. For npm installs, add this to your <head>.
Design Tokens
All values exposed as CSS custom properties on :root. Override any token to theme your instance.
| Token | Light | Dark | Role |
|---|---|---|---|
| --tok-bg | #ffffff | #080808 | Page / canvas |
| --tok-bg-2 | #f2f2f2 | #111111 | Surface / card |
| --tok-bg-3 | #e4e4e4 | #1c1c1c | Elevated / hover |
| --tok-fg | #080808 | #f2f2f2 | Primary text |
| --tok-fg-2 | #555555 | #888888 | Secondary / muted |
| --tok-fg-3 | #999999 | #3a3a3a | Placeholder / subtle |
| --tok-border | #c8c8c8 | #242424 | Default border |
| --tok-border-hi | #080808 | #f2f2f2 | Active / focus |
| Token | Value | Usage |
|---|---|---|
| --tok-skew | -14deg | Parallelogram angle — all shells |
| --tok-panel-radius | 80vh | Panel circular edge radius |
| Token | Value |
|---|---|
| --tok-ease-spring | cubic-bezier(0.16, 1, 0.3, 1) |
| --tok-ease-out | cubic-bezier(0, 0, 0.2, 1) |
| --tok-duration-fast | 120ms |
| --tok-duration-base | 220ms |
| --tok-duration-slow | 420ms |
| --tok-duration-panel | 420ms |
tok-button
A parallelogram button. Four variants, three sizes, disabled state. Emits a tok-click custom event.
| Attribute | Type | Default | Options |
|---|---|---|---|
| variant | string | "primary" | primary secondary ghost danger |
| size | string | "md" | sm md lg |
| disabled | boolean | — | Presence disables |
| Event | Detail |
|---|---|
| tok-click | Fired on click when not disabled. Bubbles. |
tok-badge
Inline status indicator. Three variants. Always a parallelogram, content auto-counter-skewed.
| Attribute | Type | Default | Options |
|---|---|---|---|
| variant | string | "solid" | solid outline muted |
tok-input
Text input and select wrapped in a parallelogram shell. Focus triggers a border highlight. Use with tok-field for labelled form groups.
| Attribute | Type | Notes |
|---|---|---|
| placeholder | string | Forwarded to the inner <input> |
| value | string | Settable via JS property |
| Event | Detail |
|---|---|
| tok-input | { value: string } — fires on every keystroke. Bubbles. |
| tok-change | { value: string } — fires on blur / select change. Bubbles. |
tok-toggle
A parallelogram toggle switch with an optional label. Spring-animated thumb. Controlled or uncontrolled.
| Attribute | Type | Default |
|---|---|---|
| label | string | — |
| checked | boolean | — |
| Event | Detail |
|---|---|
| tok-change | { checked: boolean }. Bubbles. |
tok-checkbox
Parallelogram checkbox and radio group. Check mark is counter-skewed to appear upright.
tok-card
Surface container with parallelogram border shell. Hover darkens the border. Supports an optional badge.
| Attribute | Type | Notes |
|---|---|---|
| title | string | Bold heading |
| body | string | Muted description text |
| badge | string | Optional solid badge label above title |
tok-tabs
Parallelogram tab strip. Active tab has a full-bleed bottom border. Emits tok-change with the selected tab label.
| Attribute | Type | Notes |
|---|---|---|
| tabs | string | Comma-separated list of tab labels |
| active | string | Initially selected tab (defaults to first) |
tok-progress
Parallelogram progress bar. Animated fill. Label and percentage shown below.
| Attribute | Type | Notes |
|---|---|---|
| value | number (0–100) | Fill percentage |
| label | string | Description shown below-left |
tok-panel
Drawer panel with a circular leading edge. A 160vh circle forms the left boundary, clipped at viewport edges — the sharp cut is intentional.
| Method | Description |
|---|---|
| .open() | Opens the panel with spring animation |
| .close() | Closes the panel |
| .toggle() | Toggles open/closed state |
| Slot | Description |
|---|---|
| (default) | Panel body content |
| title | Panel heading text |
| subtitle | Panel description text |
- 10 custom elements: tok-button, tok-badge, tok-input, tok-select, tok-field, tok-toggle, tok-checkbox, tok-card, tok-tabs, tok-progress
- Full Shadow DOM encapsulation per component
- Dark mode via
data-theme="dark"on root - Spring-eased animations on all interactive elements
- Design tokens exported as
tokamak.cssandtokens.json - Zero runtime dependencies
- tok-panel web component (currently CSS-only)
- tok-accordion, tok-toast, tok-pagination
- tok-navbar and tok-breadcrumb
- tok-table with sortable columns
- Headless mode (logic-only, no styles) for custom theming
- React wrapper package (
@tokamak-ui/react) - Figma token sync via Style Dictionary
- Docs hosted at
tokamak-ui.ereneksi.com