{"id":48581228,"url":"https://github.com/itonys/7onic","last_synced_at":"2026-04-23T06:12:37.848Z","repository":{"id":343938212,"uuid":"1178733366","full_name":"itonys/7onic","owner":"itonys","description":"Just take a look. Don't say I didn't warn you.       7onic Design System — open-source React design    system where design and code never drift. Single       source of truth from Figma tokens, designer-verified    components on Radix UI. Independently built.","archived":false,"fork":false,"pushed_at":"2026-04-16T06:11:00.000Z","size":1589,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-16T06:45:22.382Z","etag":null,"topics":["ai-optimized","component-library","dark-mode","design-system","design-tokens","figma-sync","figma-to-code","independently-built","open-source","react","single-source-of-truth","tailwindcss","tailwindcss-v3","tailwindcss-v4","token-pipeline","typescript","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://7onic.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itonys.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-11T10:07:48.000Z","updated_at":"2026-04-16T06:07:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/itonys/7onic","commit_stats":null,"previous_names":["itonys/7onic"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/itonys/7onic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itonys%2F7onic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itonys%2F7onic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itonys%2F7onic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itonys%2F7onic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itonys","download_url":"https://codeload.github.com/itonys/7onic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itonys%2F7onic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32166660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-23T02:19:40.750Z","status":"ssl_error","status_checked_at":"2026-04-23T02:17:55.737Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-optimized","component-library","dark-mode","design-system","design-tokens","figma-sync","figma-to-code","independently-built","open-source","react","single-source-of-truth","tailwindcss","tailwindcss-v3","tailwindcss-v4","token-pipeline","typescript","ui-components","ui-library"],"created_at":"2026-04-08T17:00:37.500Z","updated_at":"2026-04-23T06:12:37.841Z","avatar_url":"https://github.com/itonys.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003ca href=\"https://7onic.design\"\u003e7onic Design System\u003c/a\u003e\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eJust take a look. Don't say I didn't warn you.\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@7onic-ui/react\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@7onic-ui/react?color=37D8E6\u0026label=react\" alt=\"npm react\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@7onic-ui/tokens\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@7onic-ui/tokens?color=37D8E6\u0026label=tokens\" alt=\"npm tokens\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/7onic\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/7onic?color=37D8E6\u0026label=cli\" alt=\"npm cli\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/itonys/7onic/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue\" alt=\"MIT License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://7onic.design\"\u003e\u003cimg src=\"https://img.shields.io/badge/docs-7onic.design-black\" alt=\"Documentation\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Open-source React design system where design and code never drift.\u003cbr\u003e\n  Single source of truth from Figma tokens, designer-verified components on Radix UI.\n\u003c/p\u003e\n\n---\n\n## Why 7onic?\n\n| | What | Why it matters |\n|:---:|---|---|\n| **🎯** | **Zero design-code drift** | Design and code from a single vision. No handoff, no drift — every component is pixel-verified against Figma. |\n| **📦** | **One JSON, every format** | `figma-tokens.json` auto-generates CSS, Tailwind v3, Tailwind v4, JS/TS, and JSON — all in sync. |\n| **🧩** | **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. |\n| **⚡** | **npm or CLI — your choice** | `npm install` for packages, `npx 7onic add` for local copy. Same components, two workflows. |\n| **🔀** | **Only Tailwind v3+v4 dual support** | The ecosystem's only design system supporting both Tailwind versions. Same tokens, same DX. |\n| **🪄** | **Zero-config framework compat** | Works with Next.js 15 + Vite defaults out of the box. No Provider wrapper, no `globals.css` replacement, no body class setup. Install → import → done. |\n| **🎮** | **Built-in playground** | Interactive props editor + live code generation in docs. No Storybook setup needed. |\n| **🌗** | **Dark mode, zero config** | Light/dark themes built into tokens. System preference detection out of the box. |\n| **🔓** | **Framework-agnostic tokens** | Tokens ship as pure CSS variables. Use with Vue, Angular, Svelte, or vanilla CSS — no React required. |\n| **🤖** | **AI-ready** | Ships with `llms.txt` — AI builds with design tokens, not hardcoded values. Zero config for Claude, Cursor, Copilot. |\n| **🌏** | **CJK-first typography** | Type scale tuned for Japanese kanji, Korean hangul, and Latin — not an afterthought. |\n| **🔐** | **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. |\n| **🔥** | **Relentlessly updated** | Actively maintained with continuous research, refinement, and new features. Not abandoned — ever. |\n\n---\n\n## Get Started\n\n**Option A — npm package**\n\n```bash\nnpm install @7onic-ui/react @7onic-ui/tokens\n```\n\n**Option B — CLI (local file copy)**\n\n```bash\nnpx 7onic init\nnpx 7onic add button card input\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTailwind v4\u003c/strong\u003e\u003c/summary\u003e\n\n```css\n@import \"tailwindcss\";\n@import '@7onic-ui/tokens/tailwind/v4.css';\n@source \"../node_modules/@7onic-ui/react/dist\";\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTailwind v3\u003c/strong\u003e\u003c/summary\u003e\n\n```css\n@import '@7onic-ui/tokens/css/all.css';\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  presets: [require('@7onic-ui/tokens/tailwind/v3-preset')],\n  content: ['./node_modules/@7onic-ui/react/dist/**/*.{js,mjs}'],\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCSS only (no Tailwind, no React)\u003c/strong\u003e\u003c/summary\u003e\n\n```css\n@import '@7onic-ui/tokens/css/all.css';\n\n.button {\n  background: var(--color-primary);\n  padding: var(--spacing-4);\n  border-radius: var(--radius-md);\n}\n```\n\u003c/details\u003e\n\nUse components:\n\n```tsx\nimport { Button, Card, CardHeader, CardTitle, CardContent } from '@7onic-ui/react'\nimport { Chart, type ChartConfig } from '@7onic-ui/react/chart'  // charts: separate entry\n\n\u003cButton variant=\"solid\" color=\"primary\"\u003eGet Started\u003c/Button\u003e\n\n\u003cCard\u003e\n  \u003cCardHeader\u003e\n    \u003cCardTitle\u003eSettings\u003c/CardTitle\u003e\n  \u003c/CardHeader\u003e\n  \u003cCardContent\u003e...\u003c/CardContent\u003e\n\u003c/Card\u003e\n```\n\n---\n\n## Components\n\n| Category | Components | Count |\n|----------|-----------|:-----:|\n| **Forms** | Button, IconButton, ButtonGroup, Input, Textarea, Select, Dropdown, Checkbox, RadioGroup, Switch, Toggle, ToggleGroup, Segmented, Slider | 14 |\n| **Data Display** | Avatar, Badge, Card, Table | 4 |\n| **Charts** | BarChart, LineChart, AreaChart, PieChart, MetricCard | 5 |\n| **Layout** | Tabs, Accordion, Divider | 3 |\n| **Overlay** | Modal, Drawer, Tooltip, Popover | 4 |\n| **Feedback** | Alert, Toast, Progress, Spinner, Skeleton | 5 |\n| **Navigation** | Breadcrumb, NavigationMenu, Pagination | 3 |\n| **AI** | TypingIndicator, QuickReply, ChatInput, ChatMessage | 4 |\n\n**42 components** — all with CVA variants, controlled + uncontrolled modes, `forwardRef`, and **Named exports** (`CardHeader`, `ModalContent`, `TabsList`, ...). If you prefer dot-notation (`\u003cCard.Header\u003e`), drop in the 5-line [Compound Recipe wrapper](docs/decisions/NAMED-PRIMARY-MIGRATION.md) — opt-in, Client Components only.\n\n---\n\n## Design Tokens — 14 Categories\n\n| Token | Values | Description |\n|-------|--------|-------------|\n| **Colors** | Semantic system | Brand, status, text, background, border |\n| **Typography** | 11 sizes (11–72px) | CJK-optimized: `md`(14px) for UI, `base`(16px) for body |\n| **Spacing** | 19 values (0–96px) | 2px steps (0–14px), 4px steps (16px+) |\n| **Radius** | 9 values | `none` through `full` |\n| **Shadows** | 6 primitives | `xs` through `xl` + `primary-glow` |\n| **Duration** | 8 values | `instant` through `spin` |\n| **Easing** | 5 functions | `linear` through `ease-in-out` |\n| **Z-Index** | 13 layers | `0` through `toast`(3000) |\n| **Icon Sizes** | 6 sizes (12–32px) | `2xs` through `xl` |\n| **Opacity** | 21 values | 5% increments |\n| **Animation** | 54 keyframes | Component enter/exit, spin, skeleton, progress |\n| **Breakpoints** | 5 widths | `sm`(640) through `2xl`(1536) |\n| **Border Width** | 5 values | `0`, `1`, `2`, `4`, `8` |\n| **Scale** | 4 values | `50`, `75`, `95`, `pressed`(0.98) |\n\n---\n\n## Token Pipeline\n\n```\nfigma-tokens.json                    ← SSOT (the only file you edit)\n    │\n    │  npx sync-tokens\n    │\n    ├── css/variables.css            ← CSS variables (all primitives)\n    ├── css/themes/light.css         ← Light theme semantics\n    ├── css/themes/dark.css          ← Dark theme semantics\n    ├── css/reset.css                ← Framework template baseline\n    ├── css/all.css                  ← All-in-one bundle\n    ├── tailwind/v3-preset.js        ← Tailwind v3 preset\n    ├── tailwind/v4-theme.css        ← Tailwind v4 theme\n    ├── tailwind/v4.css              ← Tailwind v4 bundle\n    ├── js/index.js + .mjs           ← JavaScript / ESM\n    ├── types/index.d.ts             ← TypeScript definitions\n    └── json/tokens.json             ← Flat JSON\n```\n\nBreaking changes are auto-detected with diff visualization. Backward-compatible aliases generated automatically.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePackage structure\u003c/strong\u003e\u003c/summary\u003e\n\n### `@7onic-ui/react`\n\n| File | Format | Description |\n|------|--------|-------------|\n| `dist/index.js` | CJS | CommonJS for Node.js / require() |\n| `dist/index.mjs` | ESM | ES Modules for bundlers / import |\n| `dist/index.d.ts` | Types | TypeScript definitions |\n| `dist/chart.js` | CJS | Chart components (separate entry — `@7onic-ui/react/chart`) |\n| `dist/chart.mjs` | ESM | Chart components ESM |\n| `dist/chart.d.ts` | Types | Chart TypeScript definitions |\n| `llms.txt` | Text | AI integration rules (llms.txt standard) |\n\n### `@7onic-ui/tokens`\n\n| File | Description |\n|------|-------------|\n| `css/all.css` | All-in-one bundle (variables + light + dark + reset) |\n| `css/variables.css` | Primitive tokens only |\n| `css/themes/light.css` | Light theme semantics |\n| `css/themes/dark.css` | Dark theme semantics |\n| `css/reset.css` | Framework template baseline (bundled into `all.css` + `v4.css`) |\n| `tailwind/v4.css` | All-in-one Tailwind v4 |\n| `tailwind/v3-preset.js` | Tailwind v3 preset |\n| `tailwind/v4-theme.css` | Tailwind v4 theme definitions |\n| `js/index.js` | CJS export |\n| `js/index.mjs` | ESM export |\n| `types/index.d.ts` | TypeScript definitions |\n| `json/tokens.json` | Flat JSON for custom tooling |\n| `cli/sync.js` | `npx sync-tokens` CLI |\n| `figma-tokens.json` | SSOT — the only file you edit |\n| `llms.txt` | AI integration rules for tokens |\n\n### `7onic` (CLI)\n\n| File | Description |\n|------|-------------|\n| `dist/index.js` | Self-contained CLI bundle |\n| `llms.txt` | AI integration — CLI command reference |\n\n\u003c/details\u003e\n\n---\n\n## AI Integration\n\n7onic ships with `llms.txt` — an open standard that lets AI tools build with design tokens instead of hardcoded values.\n\n```\n# In CLAUDE.md, .cursor/rules, or copilot-instructions.md\nRules: node_modules/@7onic-ui/react/llms.txt\n```\n\nOnce loaded, AI automatically uses `bg-primary` instead of `bg-blue-500`, spacing tokens instead of arbitrary pixels, and skips unnecessary `dark:` prefixes.\n\nWorks with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that reads text files.\n\n**Setup guides**: [Tokens](https://7onic.design/design-tokens/ai) · [Components](https://7onic.design/components/ai)\n\n---\n\n## Tech Stack\n\n| Category | Technology |\n|---|---|\n| **Styling** | Tailwind CSS v3 / v4 + CSS Variables |\n| **Primitives** | Radix UI |\n| **Charts** | Recharts |\n| **Variants** | class-variance-authority (CVA) |\n\n---\n\n## Roadmap\n\n- [x] Design token system (14 categories, 54 animations)\n- [x] Token sync script with breaking change detection\n- [x] Tailwind v3/v4 dual preset + RGB channel opacity support\n- [x] Light/dark theme with OS auto-detection\n- [x] 42 components with Named exports (Compound Recipe available for opt-in dot-notation)\n- [x] Documentation site with interactive playgrounds\n- [x] Chart components included (Bar, Line, Area, Pie, MetricCard)\n- [x] Automated doc verification (8 checks, AST-powered, blocks publish on error)\n- [x] Automated component verification (7 checks — hardcoded colors, tokens, dark mode, dead code)\n- [x] Multilingual documentation — English, Japanese, Korean (powered by next-intl)\n- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.2.7\n- [x] AI integration — `llms.txt` standard, setup guides for Claude Code / Cursor / Copilot / ChatGPT\n- [x] `npx 7onic add` CLI (shadcn-style) — source copy with dependency resolution\n- [x] `npx 7onic init` Vite support — `tsconfig.app.json` detection, `@import \"tailwindcss\"` + `@source` auto-inject, `@/` path alias auto-configure\n- [x] Technical blog — [blog.7onic.design](https://blog.7onic.design) (\"Design to Code\" series)\n- [x] 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)\n- [ ] Theme Customizer — live palette preview + CSS variable export\n- [ ] Figma UI Kit\n- [ ] Dashboard / landing templates\n\n---\n\n## Contributing\n\nContributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) before submitting a PR.\n\n\u003e 7onic is a solo project — your star or kind word genuinely helps. ⭐\n\n---\n\n## License\n\nMIT\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eOne JSON, every format — from Figma to production.\u003c/strong\u003e\u003cbr\u003e\n  Independently built.\u003cbr\u003e\n  \u003csub\u003eLast updated: 2026-04-16 (v0.2.7)\u003c/sub\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitonys%2F7onic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitonys%2F7onic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitonys%2F7onic/lists"}