7onic Design System

Just take a look. Don't say I didn't warn you.

Open-source React design system where design and code never drift.
Single source of truth from Figma tokens, designer-verified components on Radix UI.

---

Why 7onic?

	What	Why it matters
🎯	Zero design-code drift	Design and code from a single vision. No handoff, no drift — every component is pixel-verified against Figma.
📦	One JSON, every format	figma-tokens.json auto-generates CSS, Tailwind v3, Tailwind v4, JS/TS, and JSON — all in sync.
🧩	shadcn freedom + MUI convenience	shadcn's customization with none of its missing features. MUI's built-in power with none of its styling constraints. Both, by design.
⚡	npm or CLI — your choice	npm install for packages, npx 7onic add for local copy. Same components, two workflows.
🔀	Only Tailwind v3+v4 dual support	The ecosystem's only design system supporting both Tailwind versions. Same tokens, same DX.
🪄	Framework-aware setup	Detects Next.js / Vite, TypeScript, and Tailwind — exits with a clear error if anything's missing. Auto-cleans Vite boilerplate (.bak backup), auto-wraps * reset in @layer base for Next.js + Tailwind v4. No Provider wrapper, no globals.css replacement.
🎮	Built-in playground	Interactive props editor + live code generation in docs. No Storybook setup needed.
🌗	Dark mode, zero config	Light/dark themes built into tokens. System preference detection out of the box.
🔓	Framework-agnostic tokens	Tokens ship as pure CSS variables. Use with Vue, Angular, Svelte, or vanilla CSS — no React required.
🤖	AI-ready	Ships with llms.txt — AI builds with design tokens, not hardcoded values. Zero config for Claude, Cursor, Copilot.
🌏	CJK-first typography	Type scale tuned for Japanese kanji, Korean hangul, and Latin — not an afterthought.
🔐	Supply chain verified	Cryptographically signed releases (npm provenance), automated vulnerability scanning in CI, reproducible builds. You can verify every package came from this exact GitHub commit — not a hijacked account.
🔥	Relentlessly updated	Actively maintained with continuous research, refinement, and new features. Not abandoned — ever.

---

Get Started

Option A — npm package

npm install @7onic-ui/react @7onic-ui/tokens

Then add tokens to your CSS:

Tailwind v4

/* app/globals.css — Next.js */
@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";

/* src/index.css — Vite */
@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";

Tailwind v3

@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js — Next.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
}

// tailwind.config.js — Vite
/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
}

CSS only (no Tailwind, no React)

@import '@7onic-ui/tokens/css/all.css';

.button {
  background: var(--color-primary);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
}

Option B — CLI (local file copy)

npx 7onic init   # detects framework, installs deps, configures CSS automatically
npx 7onic add button card input

Use components:

import { Button, Card, CardHeader, CardTitle, CardContent } from '@7onic-ui/react'
import { Chart, type ChartConfig } from '@7onic-ui/react/chart'  // charts: separate entry

<Button variant="solid" color="primary">Get Started</Button>

<Card>
  <CardHeader>
    <CardTitle>Settings</CardTitle>
  </CardHeader>
  <CardContent>...</CardContent>
</Card>

---

Components

Category	Components	Count
Forms	Button, IconButton, ButtonGroup, Input, Textarea, Select, Dropdown, Checkbox, RadioGroup, Switch, Toggle, ToggleGroup, Segmented, Slider	14
Data Display	Avatar, Badge, Card, Table	4
Charts	BarChart, LineChart, AreaChart, PieChart, MetricCard	5
Layout	Tabs, Accordion, Divider	3
Overlay	Modal, Drawer, Tooltip, Popover	4
Feedback	Alert, Toast, Progress, Spinner, Skeleton	5
Navigation	Breadcrumb, NavigationMenu, Pagination	3
AI	TypingIndicator, QuickReply, ChatInput, ChatMessage	4

42 components — all with CVA variants, controlled + uncontrolled modes, forwardRef, and Named exports (CardHeader, ModalContent, TabsList, ...). If you prefer dot-notation (<Card.Header>), drop in a Compound Recipe wrapper — opt-in, Client Components only.

---

Design Tokens — 14 Categories

Token	Values	Description
Colors	Semantic system	Brand, status, text, background, border
Typography	11 sizes (11–72px)	CJK-optimized: md(14px) for UI, base(16px) for body
Spacing	19 values (0–96px)	2px steps (0–14px), 4px steps (16px+)
Radius	9 values	none through full
Shadows	6 primitives	xs through xl + primary-glow
Duration	8 values	instant through spin
Easing	5 functions	linear through ease-in-out
Z-Index	13 layers	0 through toast(3000)
Icon Sizes	6 sizes (12–32px)	2xs through xl
Opacity	21 values	5% increments
Animation	54 keyframes	Component enter/exit, spin, skeleton, progress
Breakpoints	5 widths	sm(640) through 2xl(1536)
Border Width	5 values	0, 1, 2, 4, 8
Scale	4 values	50, 75, 95, pressed(0.98)

---

Token Pipeline

figma-tokens.json                    ← SSOT (the only file you edit)
    │
    │  npx sync-tokens
    │
    ├── css/variables.css            ← CSS variables + framework baseline (html body reset)
    ├── css/themes/light.css         ← Light theme semantics
    ├── css/themes/dark.css          ← Dark theme semantics
    ├── css/all.css                  ← All-in-one bundle
    ├── tailwind/v3-preset.js        ← Tailwind v3 preset
    ├── tailwind/v4-theme.css        ← Tailwind v4 theme
    ├── tailwind/v4.css              ← Tailwind v4 bundle
    ├── js/index.js + .mjs           ← JavaScript / ESM
    ├── types/index.d.ts             ← TypeScript definitions
    └── json/tokens.json             ← Flat JSON

Breaking changes are auto-detected with diff visualization. Backward-compatible aliases generated automatically.

Package structure

@7onic-ui/react

File	Format	Description
dist/index.js	CJS	CommonJS for Node.js / require()
dist/index.mjs	ESM	ES Modules for bundlers / import
dist/index.d.ts	Types	TypeScript definitions
dist/chart.js	CJS	Chart components (separate entry — @7onic-ui/react/chart)
dist/chart.mjs	ESM	Chart components ESM
dist/chart.d.ts	Types	Chart TypeScript definitions
llms.txt	Text	AI integration rules (llms.txt standard)

@7onic-ui/tokens

File	Description
css/all.css	All-in-one bundle (variables + light + dark)
css/variables.css	Primitive tokens + framework baseline (html body reset)
css/themes/light.css	Light theme semantics
css/themes/dark.css	Dark theme semantics
tailwind/v4.css	All-in-one Tailwind v4
tailwind/v3-preset.js	Tailwind v3 preset
tailwind/v4-theme.css	Tailwind v4 theme definitions
js/index.js	CJS export
js/index.mjs	ESM export
types/index.d.ts	TypeScript definitions
json/tokens.json	Flat JSON for custom tooling
cli/sync.js	npx sync-tokens CLI
figma-tokens.json	SSOT — the only file you edit
llms.txt	AI integration rules for tokens

7onic (CLI)

File	Description
dist/index.js	Self-contained CLI bundle
llms.txt	AI integration — CLI command reference

---

AI Integration

7onic ships with llms.txt — an open standard that lets AI tools build with design tokens instead of hardcoded values.

# In CLAUDE.md, .cursor/rules, or copilot-instructions.md
Rules: node_modules/@7onic-ui/react/llms.txt

Once loaded, AI automatically uses bg-primary instead of bg-blue-500, spacing tokens instead of arbitrary pixels, and skips unnecessary dark: prefixes.

Works with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that reads text files.

Setup guides: Tokens · Components

---

Tech Stack

Category	Technology
Styling	Tailwind CSS v3 / v4 + CSS Variables
Primitives	Radix UI
Charts	Recharts
Variants	class-variance-authority (CVA)

---

Roadmap

• Design token system (14 categories, 54 animations)
• Token sync script with breaking change detection
• Tailwind v3/v4 dual preset + RGB channel opacity support
• Light/dark theme with OS auto-detection
• 42 components with Named exports (Compound Recipe available for opt-in dot-notation)
• Documentation site with interactive playgrounds
• Chart components included (Bar, Line, Area, Pie, MetricCard)
• Automated doc verification (8 checks, AST-powered, blocks publish on error)
• Automated component verification (7 checks — hardcoded colors, tokens, dark mode, dead code)
• Multilingual documentation — English, Japanese, Korean (powered by next-intl)
• npm package distribution — @7onic-ui/react + @7onic-ui/tokens v0.3.6
• AI integration — llms.txt standard, setup guides for Claude Code / Cursor / Copilot / ChatGPT
• npx 7onic add CLI (shadcn-style) — source copy with dependency resolution
• npx 7onic init full workflow — framework/TS/Tailwind detection (abort if missing), Vite @/ alias auto-configure, base deps install, CSS token import, Vite boilerplate cleanup (.bak backup), Next.js+v4 * reset auto-wrap, cn() + 7onic.json generation
• Technical blog — blog.7onic.design ("Design to Code" series)
• Enterprise-grade supply chain security — cryptographically signed releases (npm provenance), automated vulnerability scanning on every build, reproducible installs. Protection against npm package hijacking attacks (like the 2026 axios incident)
• Theme Customizer — live palette preview + CSS variable export
• Figma UI Kit
• Dashboard / landing templates

---

Contributing

Contributions are welcome! Please read CONTRIBUTING.md before submitting a PR.

7onic is a solo project — your star or kind word genuinely helps. ⭐

---

License

MIT

---

One JSON, every format — from Figma to production.
Independently built.
_{Last updated: 2026-04-29 (v0.3.6)}