import { Button } from '@7onic-ui/react'
38+ ComponentsFigma SyncedTS
Single Source of Truth
デザインとコードは、常に同期
Figma Tokensの変更がコードに自動反映。
明確なトークン設計で、AI共同開発にも最適化。
Figma Tokens
トークンを変更
Design Tokens
自動で生成・更新
Components
スタイルが自動反映
常に100%同期
What we offer
すべてをひとつの言語で
トークン、コンポーネント、ドキュメント。
すべてが同期し、チームが加速する。
Design TokensColors, Typography,
Colors, Typography,
Spacing & More
Figmaからコードまで同期された、 Single Source of Truthとしてのトークンシステム。
View tokens38+ UI Components
Production-ready & accessible
Button
Input
Chat & AI Components
LLM対応アプリのためのUI
Streaming ready
Dark Mode Built-in
ワンクリックでシームレスに切り替え
Developer Experience
100% TypeScript
Full type safety & IntelliSense
type Props = { variant: "primary" | "secondary" }
Workflow
Figma Sync
デザインとコードを常に同期
shadow/elevation
radius/component
Accessibility First
WCAG 2.2 AA準拠
✓キーボード
✓スクリーンリーダー
Responsive Design
モバイルファーストで構築
Foundation
Radix Primitives
堅牢なHeadless UIベース
◆キーボードナビゲーション
◆ARIA属性の自動付与
◆Controlled / Uncontrolled
Design Tokens
ひとつのJSONから、
すべてが生まれる
colors
type
AaAaAaAaAaAa
spacing
4
8
12
16
24
32
48
radius
0
2
4
8
12
16
∞
figma-tokens.json→ CSS · JS · TS · TW0+
Components
Ready to use
0%
TypeScript
Type safe
A11y
Accessible
WCAG 2.2
<0KB
Bundle (gzip)
Tree-shakable
Quick Start
数行で、すぐに使える
1
インストール
npm install @7onic-ui/react @7onic-ui/tokens2
インポート
import { Button } from '@7onic-ui/react'3
つくる
42以上のコンポーネントを自由に組み合わせて、
すぐにプロダクトを構築できます。
TypeScriptRadix UITailwind CSS
localhost:3000
New Taskv1.0
Enter task name...
Low
Mid
High
Notify
Create
Primary
Outline
Ghost
localhost:3000
New Taskv1.0
Enter task name...
Low
Mid
High
Notify
Create
Primary
Outline
Ghost
localhost:3000
New Taskv1.0
Enter task name...
Low
Mid
High
Notify
Create
Primary
Outline
Ghost
localhost:3000
New Taskv1.0
Enter task name...
Low
Mid
High
Notify
Create
Primary
Outline
Ghost
Auto Dark Mode
Get Started
すべてが、手に入る
デザイントークン単体でも、UIコンポーネント一式でも。
必要なものを、ワンコマンドで。
デザインと実装のズレを、ゼロにする。
npm install @7onic-ui/reactnpm install @7onic-ui/tokens