import { Button } from '@7onic-ui/react'
38+ ComponentsFigma SyncedTS
Single Source of Truth
변경은 한 번, 반영은 자동
Figma 토큰이 바뀌면 코드에 자동 반영됩니다.
명확한 토큰 설계로 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
필요한 전부, 지금 바로
디자인 토큰만, 또는 컴포넌트 전체를
명령어 하나면 충분합니다.
디자인과 코드, 경계 없이
npm install @7onic-ui/reactnpm install @7onic-ui/tokens