01 / 시스템
디자인 규칙부터 제품 화면까지 이어서 만드세요.
Tinyrack은 시맨틱 토큰과 밝은·어두운 테마, 문서화된 컴포넌트 규약을 하나로 연결해요.
시맨틱 토큰
색상, 글꼴, 간격, 입체감에 공통 역할을 사용해 제품 화면의 기준을 맞춰요.
테마에 맞게 바뀌는 UI
밝은 화면과 어두운 화면을 오가도 컴포넌트의 의미와 상태를 유지해요.
컴포넌트 규약
상태와 동작, 접근성 기준이 문서화된 공개 React API로 화면을 만들어요.
02 / 컴포넌트
모든 컴포넌트 보기익숙한 제품 흐름을 바로 구성하세요.
폼, 선택, 상태, 피드백에 같은 상호작용 패턴을 적용할 수 있어요.
03 / 시작하기
설치 가이드 따라 하기설치 가이드를 따라 시작하세요.
여기서는 패키지와 컴포넌트 API를 먼저 살펴보세요. Vite, 스타일, 테마 설정은 설치 가이드에서 모두 안내해요.
pnpm add @tinyrack/ui react react-domimport { TRButton } from '@tinyrack/ui/components/button';
export function DeployButton() {
return <TRButton intent="primary">변경 사항 배포</TRButton>;
}04 / 더 살펴보기
필요한 깊이의 문서로 이어서 살펴보세요.
다음에 만들 내용에 맞는 문서로 이동하세요.