Components
화면을 이루는 기본 단위의 디자인 스펙과 사용법이에요. 모든 컴포넌트는 shadcn registry 로 설치할 수 있어요.
Clay 의 컴포넌트는 SEED Design 의 컴포넌트 스펙을 그대로 따르고, shadcn/ui 관례(radix-ui, cva, Tailwind CSS v4)로 구현돼 있어요. 컴포넌트 코드는 SEED 계열의 모든 브랜드가 함께 쓰고, 색·간격·모서리 같은 시각 값은 브랜드 토큰에서 가져와요.
설치 전에
컴포넌트를 추가하기 전에 설치 문서를 보고 브랜드 테마(clay-theme)를 먼저 설치해 주세요.
전체 컴포넌트
총 54개 컴포넌트
- Accordion여러 개의 관련된 콘텐츠 섹션을 수직으로 나열하고, 각 섹션을 펼치거나 접어 정보를 탐색할 수 있는 컴포넌트예요.
accordion - Action Button명확한 액션을 쉽게 수행할 수 있도록 돕는 기본 인터랙션 컴포넌트예요.
action-button - Alert Dialog사용자의 확인이 반드시 필요한 경우 강력한 표현 및 경고 수단으로 활용하는 컴포넌트예요.
alert-dialog - Attachment Input사진·영상·파일 첨부를 다루는 입력으로, 선택·미리보기·업로드 진행·실패·삭제 상태를 관리해요.
attachment-input - Avatar사용자의 프로필 이미지를 표시하는 컴포넌트예요.
avatar - Badge객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨이에요.
badge - Bottom Navigation앱의 루트 화면 하단에 고정되어 최대 다섯 개의 상위 탭 사이를 이동하게 해주는 네비게이션 바예요.
bottom-navigation - Bottom Sheet화면 하단에서 올라오는 모달 컴포넌트예요. 현재 맥락을 유지하면서 추가 정보나 액션을 보여줄 때 사용해요.
bottom-sheet - Callout사용자에게 중요한 정보나 팁을 시각적으로 강조하여 전달하는 메시지 컴포넌트예요.
callout - Checkbox사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트예요. 여러 항목 선택이나 약관 동의에 사용해요.
checkbox - Chip사용자가 선택하거나 입력하는 값을 표시하는 컴포넌트예요. 버튼, 토글, 단일 선택(라디오) 세 가지 방식으로 사용할 수 있어요.
chip - Chip TabsChip 형태의 탭으로, 카테고리나 필터를 골라 콘텐츠를 전환할 때 써요.
chip-tabs - Content Placeholder이미지나 콘텐츠가 로드되지 않았을 때, 해당 영역의 성격을 전달하는 대체 시각 요소예요.
content-placeholder - Contextual Floating Button화면 위에 떠 있으며 특정 상황에서만 나타나는 보조 액션을 위한 버튼이에요.
contextual-floating-button - Date Picker캘린더에서 하루·기간·여러 날짜를 선택할 때 사용하는 컴포넌트예요.
date-picker - Dialog사용자의 흐름을 잠시 멈추고 중요한 정보를 전달하거나 작업을 완료하도록 하는 모달형 컴포넌트예요.
dialog - Divider시각적 구분자 역할을 하며, 콘텐츠 간의 구획을 명확히 나누는 데 사용하는 컴포넌트예요.
divider - Floating Action Button화면 위에 떠 있으며 화면의 주요 액션을 실행하는 버튼이에요.
floating-action-button - Help Bubble사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 말풍선으로 알려주는 컴포넌트예요.
help-bubble - Identity Placeholder인물이나 사업자를 표현하는 이미지가 없을 때 보여주는 대체 시각 요소예요.
identity-placeholder - Image Frame사용자가 업로드한 이미지를 고정된 비율과 모서리로 표시하는 컴포넌트예요.
image-frame - Input Button입력 필드 형태의 버튼으로, 선택창이나 피커를 열고 선택된 값을 라벨에 보여줘요.
input-button - Link Content텍스트와 화살표 아이콘으로 다른 화면이나 콘텐츠로 이동하는 링크를 표현해요.
link-content - List가로 행으로 구성된 콘텐츠를 연속된 열로 표현하는 컴포넌트예요.
list - Menu사용자가 취할 수 있는 선택지나 액션 목록을 트리거 주변에 띄워 보여주는 컴포넌트예요.
menu - Menu Sheet사용자의 작업과 관련된 선택지를 시트 형태로 제공하는 컴포넌트예요.
menu-sheet - Notification Badge아이콘, 버튼, 메뉴 등에 붙어 새로운 알림이나 읽지 않은 메시지 수를 알려주는 컴포넌트예요.
notification-badge - Page Banner페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트예요.
page-banner - Pagination여러 페이지로 나뉜 목록에서 원하는 페이지로 이동할 때 사용하는 네비게이션 컴포넌트예요.
pagination - Popover트리거에 앵커링되어 화면 위에 떠 있는 컨테이너예요. Header/Body/Footer 구조로 부가 정보나 액션을 보여줘요.
popover - Progress Board항목별·플랫폼별 진행 상태를 표 형태로 한눈에 보여줘요.
progress-board - Progress Circle작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 컴포넌트예요.
progress-circle - Quantity Picker버튼으로 수치 값을 한 단계씩 늘리거나 줄일 수 있는 입력 컴포넌트예요.
quantity-picker - Radio Group여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트예요.
radio-group - Reaction Button사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트예요. 좋아요, 도움돼요 같은 감정적 피드백을 간편하게 남길 때 사용해요.
reaction-button - Result Section데이터 로딩 결과나 액션 완료 여부처럼 사용자 행동의 결과를 알려주고 다음 행동을 안내하는 템플릿이에요.
result-section - Scroll Fog스크롤 가능한 영역의 가장자리를 부드럽게 흐려 추가 콘텐츠가 있다는 힌트를 주는 컴포넌트예요.
scroll-fog - Segmented Control여러 옵션 중 하나를 선택해 관련 콘텐츠를 즉시 필터링하거나 전환할 때 쓰는 컴포넌트예요.
segmented-control - Select옵션 목록에서 값을 골라 Form 에 제출할 때 사용하는 컴포넌트예요.
select - Select Box명확한 테두리를 가진 카드형 컨테이너로 정의된 목록 중 하나 이상의 옵션을 선택하는 컴포넌트예요.
select-box - Side Navigation서비스의 최상위 메뉴 간 이동을 돕고 앱의 전체 구조를 탐색할 수 있게 하는 컴포넌트예요.
side-navigation - Side Panel화면 좌측 또는 우측 가장자리에서 슬라이드되어 나타나, 현재 맥락을 유지한 채 상세 정보나 부수적인 작업을 제공하는 패널이에요.
side-panel - Skeleton콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여줘서 로딩 시간을 짧게 느끼게 하는 컴포넌트예요.
skeleton - Slider지정된 범위 안에서 하나 또는 두 개의 값을 선택해 입력할 수 있는 컴포넌트예요.
slider - Snackbar화면 하단에 일시적으로 나타나 상태나 결과를 안내하는 컴포넌트예요.
snackbar - Switch특정 설정 및 상태를 즉시 켜거나 끌 수 있도록 하는 컴포넌트예요.
switch - Table Pagination데이터 표의 페이지와 페이지당 표시 행 수를 함께 제어하는 컴포넌트예요.
table-pagination - Tabs한 화면 안에서 콘텐츠를 탭 단위로 나눠 전환할 수 있는 컴포넌트예요.
tabs - Tag Group아이콘과 텍스트 태그를 한 줄로 나열해 여러 속성·상태·메타데이터를 한눈에 보여주는 정보 요약 컴포넌트예요.
tag-group - Text Field라벨, 설명, 에러 메시지, 글자 수와 함께 텍스트를 입력받는 컴포넌트예요.
text-field - Time Picker휠을 굴려 오전·오후, 시, 분을 선택하는 12시간제 시간 선택 컴포넌트예요.
time-picker - Toggle Button사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트예요. 필터링이나 뷰 전환처럼 즉각적인 상태 변경에 사용해요.
toggle-button - Top Navigation화면 상단에 위치해 뒤로가기·닫기, 제목, 보조 액션을 제공하는 네비게이션 바예요.
top-navigation - Wheel Picker항목을 세로로 스크롤해 하나 이상의 열에서 값을 선택하는 입력 컴포넌트예요.
wheel-picker