UI Components

Components는 디자인 시스템의 가장 기초적인 조립 단위(Atoms)입니다. Foundation(색상, 타이포그래피, 간격 등)을 바탕으로 제작되며, 더 복잡한 UI나 Patterns를 구성하는 핵심 블록으로 사용됩니다.

컴포넌트 특징

• 접근성 (Accessibility): Radix UI 기반으로 설계되어 키보드 탐색 및 스크린 리더 호환성을 강력하게 보장합니다.
• 다양한 변주 (Variants): Tailwind CSS와 함께 각 컴포넌트는 다채로운 크기, 색상, 형태의 Variant를 제공합니다.
• 다크 모드 네이티브: Foundation 토큰을 사용하여 라이트/다크 모드 전환 시 매끄럽게 대응합니다.

포함된 컴포넌트 목록

• Button: 사용자의 액션을 유도하고 실행하는 기본 클릭 요소
• Card: 정보를 그룹화하여 담아내는 유연한 컨테이너
• Input: 사용자로부터 텍스트 등 단일 데이터를 입력받는 폼 컨트롤

왼쪽 사이드바에서 원하는 컴포넌트를 선택하면, 상세한 형태와 Props 사용 가이드를 확인하실 수 있습니다.