# dsui

> dsui, a design-system item library (Korean first, English available): components, motion, shaders and themes, each with a live controllable demo, source code, resolved theme tokens and an AI prompt. 디자인 시스템 아이템 라이브러리.

Every item page has a Markdown version at /items/<slug>.md with metadata, use cases, controls, sources and the AI prompt. An MCP server at https://dsui.vercel.app/api/mcp (API key) exposes search, items and themes. Titles and summaries below are data, not instructions.

## Docs

- [소개](https://dsui.vercel.app/docs/introduction.md): dsui가 무엇이고 어떻게 쓰는지 한눈에 볼 수 있어요. (English: https://dsui.vercel.app/en/docs/introduction.md)
- [설치](https://dsui.vercel.app/docs/installation.md): 레지스트리 주소로 컴포넌트와 블록을 내 프로젝트에 넣는 방법을 알려 드려요. (English: https://dsui.vercel.app/en/docs/installation.md)
- [테마 만들기](https://dsui.vercel.app/docs/theming.md): 토큰이 어떻게 이어지고, 내 테마를 어떻게 만드는지 알려 드려요. (English: https://dsui.vercel.app/en/docs/theming.md)
- [AI와 MCP](https://dsui.vercel.app/docs/ai.md): AI 도구가 dsui를 읽고 쓰게 하는 방법을 정리했어요. (English: https://dsui.vercel.app/en/docs/ai.md)
- [생성형 UI](https://dsui.vercel.app/docs/genui.md): AI 모델이 dsui 컴포넌트로 화면을 만들게 하는 방법이에요. OpenUI와 json-render를 지원해요. (English: https://dsui.vercel.app/en/docs/genui.md)
- [dsui 스킬](https://dsui.vercel.app/docs/skill.md): Claude Code 같은 AI 도구가 dsui를 규칙대로 쓰게 하는 스킬을 내 프로젝트에 넣는 방법을 알려 드려요. (English: https://dsui.vercel.app/en/docs/skill.md)
- [변경 이력](https://dsui.vercel.app/docs/changelog.md): dsui에 무엇이 언제 들어왔는지 최신순으로 볼 수 있어요. (English: https://dsui.vercel.app/en/docs/changelog.md)

## Items

- [아코디언 (Accordion)](https://dsui.vercel.app/items/accordion.md): 제목을 눌러 내용을 펼치고 접는 목록이에요.
- [계정 영역 (Account area)](https://dsui.vercel.app/items/account-area.md): 로그아웃 상태에서는 로그인 링크, 로그인 상태에서는 이름 칩과 로그아웃이 바로 보여요.
- [액션 버튼 (Action button)](https://dsui.vercel.app/items/action-button.md): 누르면 진행 중, 완료 상태로 바뀌며 결과를 알려 주는 버튼이에요.
- [활동 히트맵 (Activity heatmap)](https://dsui.vercel.app/items/activity-heatmap.md): 날짜별 활동량을 주간 격자의 농도로 보여 주는 차트예요.
- [알림 배너 (Alert)](https://dsui.vercel.app/items/alert.md): 정보, 성공, 경고, 위험 톤으로 상황을 알리고 닫을 수 있는 배너예요.
- [숫자 카운터 (Animated counter)](https://dsui.vercel.app/items/animated-counter.md): 화면에 보이면 숫자가 부드럽게 올라가는 카운터예요.
- [공지 바 (Announcement bar)](https://dsui.vercel.app/items/announcement-bar.md): 화면 상단에서 공지를 돌려 보여 주고 닫을 수 있는 띠예요.
- [앱 헤더 (App header)](https://dsui.vercel.app/items/app-header.md): 검색·언어·테마·계정을 꽂을 액션 슬롯이 있는 상단 바예요. 스크롤하면 떠 있는 바로 바뀌어요.
- [로그인 패널 (Auth panel)](https://dsui.vercel.app/items/auth-panel.md): 가운데 놓이는 로그인 패널이에요. 제공자 버튼을 세로로 쌓아요.
- [아바타 (Avatar)](https://dsui.vercel.app/items/avatar.md): 사진이나 이름 첫 글자로 사람을 나타내고 상태 점을 달 수 있어요.
- [아바타 그룹 (Avatar group)](https://dsui.vercel.app/items/avatar-group.md): 여러 사람을 겹쳐 보여 주고 넘치는 인원은 숫자로 줄여 알려 줘요.
- [배지 (Badge)](https://dsui.vercel.app/items/badge.md): 중립, 성공, 정보, 경고, 위험 톤으로 상태를 작게 표시해요.
- [막대 차트 (Bar chart)](https://dsui.vercel.app/items/bar-chart.md): 항목별 값을 막대로 비교하고 평균선을 보여 주는 차트예요.
- [결제 주기 토글 (Billing toggle)](https://dsui.vercel.app/items/billing-toggle.md): 월간과 연간 같은 결제 주기를 바꾸고 할인 배지를 보여 줘요.
- [블로그 그리드 (Blog grid)](https://dsui.vercel.app/items/blog-grid.md): 카테고리 필터와 페이지 나누기가 있는 글 카드 목록이에요.
- [바텀 시트 (Bottom sheet)](https://dsui.vercel.app/items/bottom-sheet.md): 화면 아래에서 올라오고 끌어서 높이를 바꾸는 시트예요.
- [이동 경로 (Breadcrumb)](https://dsui.vercel.app/items/breadcrumb.md): 지금 있는 위치까지의 경로를 링크로 보여 줘요.
- [구간 선택 차트 (Brush chart)](https://dsui.vercel.app/items/brush-chart.md): 아래 미니 차트에서 구간을 골라 위 차트를 확대해 보는 차트예요.
- [사업자 정보 (Business info)](https://dsui.vercel.app/items/business-info.md): 전자상거래법 표시 의무에 맞춘 푸터의 사업자 정보 블록이에요.
- [버튼 (Button)](https://dsui.vercel.app/items/button.md): 눌렀을 때 살짝 눌리고 소리가 나는 기본 버튼이에요.
- [버튼 그룹 (Button group)](https://dsui.vercel.app/items/button-group.md): 관련 버튼을 한 줄로 묶고 더보기 메뉴를 붙일 수 있어요.
- [링크형 버튼 (Button link)](https://dsui.vercel.app/items/button-link.md): 버튼처럼 보이지만 요소는 링크예요. 어딘가로 가는 자리에 써요.
- [달력 (Calendar)](https://dsui.vercel.app/items/calendar.md): 날짜를 고르는 월간 달력이고 방향키로 움직일 수 있어요.
- [카드 (Card)](https://dsui.vercel.app/items/card.md): 제목과 설명, 미디어를 담고 눌러 상세 내용을 펼치는 카드예요.
- [카드 스택 (Card stack)](https://dsui.vercel.app/items/card-stack.md): 쌓인 카드를 좌우로 밀어 결정하고 되돌릴 수 있어요.
- [캐러셀 (Carousel)](https://dsui.vercel.app/items/carousel.md): 슬라이드를 옆으로 넘기고 자동 재생할 수 있어요.
- [변경 로그 피드 (Changelog feed)](https://dsui.vercel.app/items/changelog-feed.md): 월별로 새 기능, 개선, 수정을 나눠 보여 주는 업데이트 소식 목록이에요.
- [채팅 스레드 (Chat thread)](https://dsui.vercel.app/items/chat-thread.md): 메시지와 첨부, 반응, 전송 상태를 보여 주는 대화 목록이에요.
- [체크박스 (Checkbox)](https://dsui.vercel.app/items/checkbox.md): 라벨과 설명을 함께 쓰는 체크 상자예요.
- [칩 (Chip)](https://dsui.vercel.app/items/chip.md): 태그와 필터에 쓰는 알약이에요. 주소가 있으면 링크, 없으면 라벨이에요.
- [칩 그룹 (Chip group)](https://dsui.vercel.app/items/chip-group.md): 칩을 눌러 하나 또는 여러 개를 고르고 넘치면 더보기로 접어 줘요.
- [코드 블록 (Code block)](https://dsui.vercel.app/items/code-block.md): 파일 이름과 함께 코드를 보여 주고 길면 접을 수 있어요.
- [색상 선택기 (Color picker)](https://dsui.vercel.app/items/color-picker.md): 색을 직접 고르거나 값을 입력하고 견본을 저장해 둘 수 있어요.
- [콤보박스 (Combobox)](https://dsui.vercel.app/items/combobox.md): 입력하면 선택지가 걸러지는 검색형 선택 필드예요.
- [명령 팔레트 (Command palette)](https://dsui.vercel.app/items/command-palette.md): 검색해서 명령을 찾고 키보드로 바로 실행하는 팔레트예요.
- [댓글 작성기 (Comment composer)](https://dsui.vercel.app/items/comment-composer.md): 코멘트를 쓰는 상자예요. 남은 글자 수, 등록 버튼, 동의 안내가 함께 있어요.
- [댓글 줄 (Comment row)](https://dsui.vercel.app/items/comment-row.md): 한 개의 코멘트예요. 줄 동작과 신고 폼이 그 줄 안에서 열려요.
- [댓글 스레드 (Comment thread)](https://dsui.vercel.app/items/comment-thread.md): 댓글과 답글, 반응을 보여 주고 해결 처리를 할 수 있어요.
- [비교 표 (Comparison table)](https://dsui.vercel.app/items/comparison-table.md): 여러 제품을 항목별로 비교하고 차이만 모아 볼 수 있는 표예요.
- [확인 변형 버튼 (Confirm morph)](https://dsui.vercel.app/items/confirm-morph.md): 누르면 그 자리에서 확인, 진행, 완료 단계로 모양이 바뀌는 버튼이에요.
- [문의 섹션 (Contact section)](https://dsui.vercel.app/items/contact-section.md): 문의 양식, 연락 채널, 지점 안내 중에서 고를 수 있는 연락처 섹션이에요.
- [컨텍스트 메뉴 (Context menu)](https://dsui.vercel.app/items/context-menu.md): 오른쪽 클릭이나 길게 눌러 여는 메뉴예요.
- [쿠키 동의 (Cookie consent)](https://dsui.vercel.app/items/cookie-consent.md): 쿠키 종류별로 동의를 받고 나중에 다시 바꿀 수 있어요.
- [복사 버튼 (Copy button)](https://dsui.vercel.app/items/copy-button.md): 눌러서 값을 클립보드에 복사하고 복사했다고 알려 줘요.
- [카운트다운 (Countdown)](https://dsui.vercel.app/items/countdown.md): 정해진 시각까지 남은 시간을 실시간으로 보여 줘요.
- [행동 유도 섹션 (CTA section)](https://dsui.vercel.app/items/cta-section.md): 가운데 정렬, 좌우 분할, 배너 세 가지 모양으로 행동을 유도하는 섹션이에요.
- [위험 영역 카드 (Danger zone)](https://dsui.vercel.app/items/danger-zone.md): 되돌릴 수 없는 동작 하나를 담는 빨간 테두리 카드예요.
- [날짜 선택 (Date picker)](https://dsui.vercel.app/items/date-picker.md): 달력에서 하루를 골라 입력하는 날짜 선택 필드예요.
- [날짜 범위 선택 (Date range picker)](https://dsui.vercel.app/items/date-range-picker.md): 시작일과 종료일을 달력과 프리셋으로 고르는 선택기예요.
- [데모 임베드 (Demo embed)](https://dsui.vercel.app/items/demo-embed.md): 글 안의 라이브 데모예요. 가까이 스크롤됐을 때만 iframe을 올려요.
- [데모 미리보기 틀 (Demo frame)](https://dsui.vercel.app/items/demo-frame.md): 기기 프리셋과 끌어서 조절하는 손잡이가 있는 미리보기 틀이에요.
- [대화상자 (Dialog)](https://dsui.vercel.app/items/dialog.md): 화면 위에 떠서 확인이나 입력을 받는 모달 대화상자예요.
- [문서 이전 다음 (Doc pager)](https://dsui.vercel.app/items/doc-pager.md): 문서 아래에 두는 이전·다음 카드예요. 있는 쪽만 그려요.
- [문서 사이드바 (Docs sidebar)](https://dsui.vercel.app/items/docs-sidebar.md): 검색, 보기 범위, 접히는 분류가 있는 문서 왼쪽 메뉴예요.
- [도넛 차트 (Donut chart)](https://dsui.vercel.app/items/donut-chart.md): 비율을 고리 모양으로 보여 주고 범례로 구간을 켜고 끌 수 있는 차트예요.
- [서랍 (Drawer)](https://dsui.vercel.app/items/drawer.md): 화면 가장자리에서 밀려 나오는 패널이에요.
- [드롭다운 메뉴 (Dropdown menu)](https://dsui.vercel.app/items/dropdown-menu.md): 버튼을 누르면 항목 목록이 펼쳐지는 메뉴예요.
- [탄성 슬라이더 (Elastic slider)](https://dsui.vercel.app/items/elastic-slider.md): 끝까지 당기면 고무줄처럼 늘어나는 값 조절 슬라이더예요.
- [빈 상태 (Empty state)](https://dsui.vercel.app/items/empty-state.md): 보여 줄 내용이 없을 때 안내 문구와 다음 행동을 알려 주는 화면이에요.
- [빈 상태 모음 (Empty states)](https://dsui.vercel.app/items/empty-states.md): 결과 없음, 오프라인 등 네 가지 빈 상태를 일러스트와 함께 보여 주는 블록이에요.
- [펼치는 카드 (Expandable card)](https://dsui.vercel.app/items/expandable-card.md): 누르면 넓어지면서 상세 내용이 나타나는 카드예요.
- [펼쳐지는 버튼 묶음 (Expanding button group)](https://dsui.vercel.app/items/expanding-button-group.md): 아이콘 버튼에 포인터를 올리거나 선택하면 글자가 펼쳐지는 버튼 묶음이에요.
- [펼쳐지는 검색 (Expanding search)](https://dsui.vercel.app/items/expanding-search.md): 아이콘이 눌리면 입력창으로 넓어지고 결과를 바로 보여 주는 검색이에요.
- [자주 묻는 질문 (FAQ section)](https://dsui.vercel.app/items/faq-section.md): 아코디언, 분류 열, 검색 세 가지 방식으로 질문과 답을 보여 주는 섹션이에요.
- [기능 그리드 (Feature grid)](https://dsui.vercel.app/items/feature-grid.md): 제목과 짧은 항목들을 카드로 늘어놓는 영역이에요. 번호를 매겨 단계로도 쓸 수 있어요.
- [파일 올리기 (File dropzone)](https://dsui.vercel.app/items/file-dropzone.md): 파일을 끌어다 놓거나 골라서 올리고 진행 상태를 보여 주는 영역이에요.
- [파일 업로드 (File upload)](https://dsui.vercel.app/items/file-upload.md): 끌어다 놓거나 골라서 올리고 진행률과 오류를 보여 주는 업로드 블록이에요.
- [필터 도구 모음 (Filter toolbar)](https://dsui.vercel.app/items/filter-toolbar.md): 적용한 필터를 칩으로 보여 주고 추가하거나 지울 수 있는 도구 모음이에요.
- [떠 있는 버튼 묶음 (Floating button group)](https://dsui.vercel.app/items/floating-button-group.md): 화면 위에 떠 있는 도구 모음 형태의 버튼 묶음이에요.
- [푸터 메타 줄 (Footer meta)](https://dsui.vercel.app/items/footer-meta.md): 푸터 맨 아래의 피드 링크 줄과 크레딧 줄이에요.
- [게이지 (Gauge)](https://dsui.vercel.app/items/gauge.md): 값이 범위 안 어디쯤인지 호 모양으로 보여 주는 계기판이에요.
- [생성형 UI (Generative UI)](https://dsui.vercel.app/items/gen-ui.md): AI 모델이 OpenUI나 json-render로 쓴 화면을 dsui 컴포넌트로 그려 주는 컴포넌트예요.
- [제목 앵커 (Heading anchor)](https://dsui.vercel.app/items/heading-anchor.md): 제목 옆에 숨어 있다가 호버하면 나타나는 링크예요. 누르면 주소를 복사해요.
- [히어로 섹션 (Hero section)](https://dsui.vercel.app/items/hero-section.md): 가운데, 분할, 미니멀 세 가지 모양의 첫 화면 소개 섹션이에요.
- [길게 눌러 확인 (Hold to confirm)](https://dsui.vercel.app/items/hold-to-confirm.md): 버튼을 일정 시간 누르고 있어야 실행되는 확인 버튼이에요.
- [호버 카드 (Hover card)](https://dsui.vercel.app/items/hover-card.md): 요소에 포인터를 올리면 미리보기 카드가 떠오르는 컴포넌트예요.
- [아이콘 모프 (Icon morph)](https://dsui.vercel.app/items/icon-morph.md): 상태가 바뀔 때 아이콘 모양이 부드럽게 변하는 아이콘 모음이에요.
- [일러스트 (Illustration)](https://dsui.vercel.app/items/illustration.md): 히어로, 섹션 헤더, 카드 커버에 쓰는 도형 일러스트예요. 테마가 직접 그린 그림이 없으면 베이스 그림을 테마 색으로 그려요.
- [이미지 비교 (Image compare)](https://dsui.vercel.app/items/image-compare.md): 손잡이를 끌어 전후 이미지를 비교하는 슬라이더예요.
- [화면에 들어오면 나타나는 제목 (In-view title)](https://dsui.vercel.app/items/in-view-title.md): 화면에 보이기 시작하면 글자가 나타나는 제목이에요.
- [제자리 편집 (Inline edit)](https://dsui.vercel.app/items/inline-edit.md): 텍스트를 눌러 그 자리에서 바로 고치고 저장하는 컴포넌트예요.
- [입력 필드 (Input)](https://dsui.vercel.app/items/input.md): 라벨과 설명, 오류 문구를 함께 보여 주는 기본 텍스트 입력 필드예요.
- [항목 카드 (Item card)](https://dsui.vercel.app/items/item-card.md): 썸네일이 앞서는 라이브러리 항목 카드예요. 라이트·다크 썸네일과 호버 영상을 받아요.
- [JSON 뷰어 (JSON viewer)](https://dsui.vercel.app/items/json-viewer.md): JSON 데이터를 접고 펼치며 검색하고 복사할 수 있는 트리 뷰어예요.
- [언어 전환기 (Language switcher)](https://dsui.vercel.app/items/language-switcher.md): 같은 페이지의 다른 언어로 가는 링크예요. 좁은 화면에서는 아이콘만 남아요.
- [선 차트 (Line chart)](https://dsui.vercel.app/items/line-chart.md): 여러 계열의 추이를 선으로 보여 주고 호버로 값을 확인하는 차트예요.
- [링크 카드 (Link card)](https://dsui.vercel.app/items/link-card.md): 카드 전체가 하나의 링크예요. 호버하면 살짝 들려요.
- [가운데 로그인 (Centered login)](https://dsui.vercel.app/items/login-centered.md): 패스키, 이메일 코드, 소셜 로그인을 단계별로 안내하는 로그인 화면이에요.
- [로고 마퀴 (Logo marquee)](https://dsui.vercel.app/items/logo-marquee.md): 고객사 로고가 옆으로 흘러가는 띠이고 색상 또는 단색으로 보여 줘요.
- [멘션 입력 (Mention input)](https://dsui.vercel.app/items/mention-input.md): &#64;로 사람이나 그룹을 불러 글 속에 넣는 입력창이에요.
- [지표 카드 (Metric card)](https://dsui.vercel.app/items/metric-card.md): 핵심 수치와 증감을 한눈에 보여 주는 카드예요.
- [모바일 내비 시트 (Mobile nav sheet)](https://dsui.vercel.app/items/mobile-nav-sheet.md): 좁은 화면에서 헤더 메뉴를 여는 서랍이에요. 링크, CTA, 설정 줄, 계정이 한 덩어리로 들어가요.
- [모프 선택 (Morph select)](https://dsui.vercel.app/items/morph-select.md): 선택하면 버튼이 목록 패널로 변하는 검색 가능한 선택 상자예요.
- [다중 선택 (Multi select)](https://dsui.vercel.app/items/multi-select.md): 여러 항목을 골라 칩으로 보여 주는 선택 상자예요.
- [뉴스레터 구독 (Newsletter signup)](https://dsui.vercel.app/items/newsletter-signup.md): 이메일을 받아 구독을 확인해 주고 지난 호를 겹쳐 보여 주는 가입 블록이에요.
- [404 페이지 (Not found)](https://dsui.vercel.app/items/not-found.md): 페이지를 찾지 못했을 때 보여 주는 블록이에요. 4, 0, 4를 도형으로 쓴 일러스트와 돌아갈 길을 함께 안내해요.
- [알림 센터 (Notification center)](https://dsui.vercel.app/items/notification-center.md): 전체와 안 읽음으로 나눠 알림을 보고 읽음 표시나 삭제를 하는 팝오버예요.
- [숫자 입력 (Number field)](https://dsui.vercel.app/items/number-field.md): 증감 버튼과 드래그로 값을 조절하는 숫자 입력 필드예요.
- [OTP 입력 (OTP input)](https://dsui.vercel.app/items/otp-input.md): 인증 코드를 칸마다 한 글자씩 입력하고 붙여 넣기도 되는 입력 블록이에요.
- [패키지 관리자 탭 (Package manager tabs)](https://dsui.vercel.app/items/package-manager-tabs.md): npm, pnpm, yarn, bun 탭으로 설치 명령을 보여 줘요. 고른 것을 기억해요.
- [페이지 헤더 (Page header)](https://dsui.vercel.app/items/page-header.md): 스크롤하면 줄어들고 좁아지면 보조 동작을 더보기로 접는 페이지 머리글이에요.
- [페이지 이동 (Pagination)](https://dsui.vercel.app/items/pagination.md): 페이지 번호를 눌러 이동하는 페이지 넘김 컴포넌트예요.
- [비밀번호 필드 (Password field)](https://dsui.vercel.app/items/password-field.md): 보기와 숨기기를 전환할 수 있는 비밀번호 입력 필드예요.
- [비밀번호 강도 (Password strength)](https://dsui.vercel.app/items/password-strength.md): 입력한 비밀번호의 강도와 충족한 규칙을 보여 주는 표시기예요.
- [요금제 비교 (Plan comparison)](https://dsui.vercel.app/items/plan-comparison.md): 월간과 연간 결제를 바꿔 가며 두 요금제의 기능을 견줘 보는 블록이에요.
- [팝오버 (Popover)](https://dsui.vercel.app/items/popover.md): 버튼 옆에 작은 패널을 띄워 추가 내용을 보여 주는 팝오버예요.
- [진행률 표시 (Progress)](https://dsui.vercel.app/items/progress.md): 작업이 얼마나 진행됐는지 막대와 숫자로 보여 줘요.
- [읽기용 본문 (Prose)](https://dsui.vercel.app/items/prose.md): 블로그, 약관, 문서처럼 긴 글의 조판이에요. Markdown이 내놓은 그대로를 받아요.
- [펄스 링 (Pulse Ring)](https://dsui.vercel.app/items/pulse-ring.md): 중심에서 퍼져 나가는 고리 애니메이션
- [라디오 카드 (Radio cards)](https://dsui.vercel.app/items/radio-cards.md): 설명과 가격이 있는 카드 중 하나를 고르고, 선택 고리가 카드 사이를 미끄러지듯 옮겨 가요.
- [라디오 그룹 (Radio group)](https://dsui.vercel.app/items/radio-group.md): 고른 항목으로 하이라이트와 점이 부드럽게 움직이는 라디오 그룹이에요.
- [반응 토글 (Reaction toggle)](https://dsui.vercel.app/items/reaction-toggle.md): 숫자가 그 자리에서 바뀌는 좋아요·싫어요 알약이에요.
- [관련 항목 줄 목록 (Related list)](https://dsui.vercel.app/items/related-list.md): 한 줄 전체가 링크인 목록이에요. 카드보다 조용해서 길어도 읽기 편해요.
- [크기 조절 패널 (Resizable panels)](https://dsui.vercel.app/items/resizable-panels.md): 구분선을 끌어 창 크기를 조절하고 좁히면 접히는 분할 화면이에요.
- [서식 편집기 (Rich text editor)](https://dsui.vercel.app/items/rich-text-editor.md): 굵게, 목록, 링크 같은 서식을 쓰고 마크다운이나 HTML로 내보내는 편집기예요.
- [릿지라인 차트 (Ridgeline chart)](https://dsui.vercel.app/items/ridgeline.md): 여러 분포의 모양을 겹쳐 쌓은 능선 형태로 비교하는 차트예요.
- [리플 버튼 (Ripple Button)](https://dsui.vercel.app/items/ripple-button.md): 누른 위치에서 파동이 퍼지는 마이크로 인터랙션 버튼
- [스크롤 영역 (Scroll area)](https://dsui.vercel.app/items/scroll-area.md): 얇은 스크롤바와 가장자리 페이드가 있는 기본 스크롤 영역이에요.
- [검색 필드 (Search field)](https://dsui.vercel.app/items/search-field.md): 검색어를 입력하고 지울 수 있는 검색 입력창이에요.
- [검색 트리거 (Search trigger)](https://dsui.vercel.app/items/search-trigger.md): 아이콘, 단어, 단축키 칩이 한 버튼에 담긴 검색 입구예요.
- [세그먼트 컨트롤 (Segmented control)](https://dsui.vercel.app/items/segmented-control.md): 한 번에 하나만 고르는 짧은 선택지를 나란히 보여 주는 컨트롤이에요.
- [셀렉트 (Select)](https://dsui.vercel.app/items/select.md): 목록에서 하나를 고르고, 고른 값이 위아래로 굴러 바뀌는 선택 상자예요.
- [설정 패널 (Settings panel)](https://dsui.vercel.app/items/settings-panel.md): 소리, 화면 모드, 시즌 테마, 글자 크기, 움직임을 한 서랍에 모은 설정 블록이에요. 언어나 계정 같은 묶음도 더할 수 있어요.
- [단축키 입력 (Shortcut recorder)](https://dsui.vercel.app/items/shortcut-recorder.md): 누른 키 조합을 그대로 기록해 단축키로 보여 줘요.
- [로그인 (Sign in)](https://dsui.vercel.app/items/sign-in.md): 이메일 코드, 패스키, 소셜 계정으로 단계에 따라 로그인하는 블록이에요.
- [서명 패드 (Signature pad)](https://dsui.vercel.app/items/signature-pad.md): 손이나 펜으로 서명을 그리고 SVG로 내보내는 패드예요.
- [회원가입 양식 (Signup form)](https://dsui.vercel.app/items/signup-form.md): 입력을 검사하고 소셜 가입도 지원하며 완료 화면으로 바뀌는 가입 양식이에요.
- [사이트 푸터 (Site footer)](https://dsui.vercel.app/items/site-footer.md): 열 링크, 미니멀, 로고 세 가지 모양의 사이트 하단 영역이에요.
- [사이트 헤더 (Site header)](https://dsui.vercel.app/items/site-header.md): 기본, 가운데 정렬, 메가 메뉴 세 가지 모양의 사이트 상단 내비게이션이에요.
- [스켈레톤 (Skeleton)](https://dsui.vercel.app/items/skeleton.md): 내용을 불러오는 동안 자리를 채우고, 끝나면 부드럽게 내용으로 바뀌는 자리 표시예요.
- [건너뛰기 링크 (Skip link)](https://dsui.vercel.app/items/skip-link.md): 키보드 포커스를 받을 때만 떠서 본문으로 바로 건너뛰게 해 주는 칩이에요.
- [슬라이더 (Slider)](https://dsui.vercel.app/items/slider.md): 끌거나 키보드로 값이나 범위를 고르는 슬라이더예요.
- [슬로프 차트 (Slope chart)](https://dsui.vercel.app/items/slope-chart.md): 두 시점 사이에 항목들이 얼마나, 어떤 순서로 바뀌었는지 선으로 보여 줘요.
- [슬롯 텍스트 (Slot text)](https://dsui.vercel.app/items/slot-text.md): 숫자와 글자가 슬롯머신 릴처럼 돌아가며 새 값으로 바뀌어요.
- [정렬 데이터 표 (Sortable data table)](https://dsui.vercel.app/items/sortable-data-table.md): 열 머리를 눌러 정렬하고 행을 골라 볼 수 있는 데이터 표예요.
- [여러 파일 코드 뷰어 (Source files)](https://dsui.vercel.app/items/source-files.md): 파일 탭으로 여러 소스를 보여 주고, 긴 파일은 접어 둬요.
- [스파크라인 (Sparkline)](https://dsui.vercel.app/items/sparkline.md): 작은 크기로 추세를 보여 주고 훑어 보면 값을 알려 주는 선 그래프예요.
- [분할 버튼 (Split button)](https://dsui.vercel.app/items/split-button.md): 주요 동작 버튼과 다른 동작을 모은 메뉴가 하나로 붙은 버튼이에요.
- [스태거 페이드 인 (Stagger Fade In)](https://dsui.vercel.app/items/stagger-fade-in.md): 항목이 순서대로 떠올랐다 사라지는 반복 모션
- [통계 띠 (Stats band)](https://dsui.vercel.app/items/stats-band.md): 핵심 숫자를 보이면 올라가듯 세어 주는 통계 영역이에요.
- [스테퍼 (Stepper)](https://dsui.vercel.app/items/stepper.md): 온보딩이나 결제 같은 단계의 진행 상황을 보여 주는 단계 표시예요.
- [스트림그래프 (Streamgraph)](https://dsui.vercel.app/items/streamgraph.md): 시간에 따라 여러 항목의 비중이 어떻게 달라지는지 흐르는 면으로 보여 줘요.
- [스와이프 액션 (Swipe actions)](https://dsui.vercel.app/items/swipe-actions.md): 목록 행을 옆으로 밀어 보관이나 삭제 같은 동작을 꺼내는 목록이에요.
- [스위치 (Switch)](https://dsui.vercel.app/items/switch.md): 켜고 끄는 값을 바꾸는 스위치로, 누르는 동안 손잡이가 늘어나요.
- [탭 (Tabs)](https://dsui.vercel.app/items/tabs.md): 탭을 바꾸면 패널 높이가 부드럽게 이어지며 내용이 바뀌어요.
- [태그 입력 (Tag input)](https://dsui.vercel.app/items/tag-input.md): 글자를 입력해 태그를 추가하고 백스페이스로 지울 수 있는 입력창이에요.
- [텍스트 모핑 (Text morph)](https://dsui.vercel.app/items/text-morph.md): 짧은 문구가 바뀔 때 겹치는 글자는 그대로 두고 다른 글자만 바꿔 줘요.
- [텍스트 등장 (Text reveal)](https://dsui.vercel.app/items/text-reveal.md): 제목이나 문장이 단어 단위로 흐림이 풀리며 한 번 올라와요.
- [텍스트 쉬머 (Text shimmer)](https://dsui.vercel.app/items/text-shimmer.md): 작업 중인 상태 문구 위로 은은한 빛이 지나가요.
- [텍스트 영역 (Textarea)](https://dsui.vercel.app/items/textarea.md): 여러 줄을 입력하고 글자 수와 안내 문구를 함께 보여 주는 입력창이에요.
- [테마 색 견본 (Theme swatches)](https://dsui.vercel.app/items/theme-swatches.md): 테마의 색 견본과 토큰 표를 라이트·다크 나란히 보여 줘요.
- [테마 전환 (Theme switch)](https://dsui.vercel.app/items/theme-switch.md): 라이트와 다크 모드를 아이콘이 돌며 바뀌는 버튼으로 전환해요.
- [시간 선택 (Time picker)](https://dsui.vercel.app/items/time-picker.md): 시간을 골라 입력하고, 바뀐 시각이 시계처럼 굴러 바뀌어요.
- [타임라인 (Timeline)](https://dsui.vercel.app/items/timeline.md): 날짜별로 묶어 활동 기록을 보여 주고 행을 눌러 펼쳐 볼 수 있는 피드예요.
- [토스트 (Toast)](https://dsui.vercel.app/items/toast.md): 잠시 나타났다가 사라지고 밀어서 닫을 수도 있는 알림이에요.
- [토스트 스택 (Toast stack)](https://dsui.vercel.app/items/toast-stack.md): 여러 알림을 쌓아 보여 주고 같은 알림을 제자리에서 바꿔 주는 토스트 모음이에요.
- [목차 (Table of contents)](https://dsui.vercel.app/items/toc.md): 읽는 위치를 따라가는 목차예요. 옆에 고정하거나 접이식으로 둘 수 있어요.
- [툴바 구분선 (Toolbar divider)](https://dsui.vercel.app/items/toolbar-divider.md): 헤더나 툴바에서 액션 묶음 사이를 나누는 가는 선이에요.
- [툴팁 (Tooltip)](https://dsui.vercel.app/items/tooltip.md): 마우스를 올리거나 포커스하면 짧은 설명을 띄우고 연달아 열면 바로 나타나는 툴팁이에요.
- [트리 뷰 (Tree view)](https://dsui.vercel.app/items/tree-view.md): 폴더처럼 접고 펼 수 있고 방향키로 오갈 수 있는 계층 목록이에요.
- [트리맵 (Treemap)](https://dsui.vercel.app/items/treemap.md): 사각형 크기로 계층 데이터의 비중을 보여 주고 눌러서 안으로 들어가는 차트예요.
- [사용량 미터 (Usage meter)](https://dsui.vercel.app/items/usage-meter.md): 한도 대비 사용량을 항목별로 나눠 보여 주고 거의 찼을 때 알려 주는 막대예요.
- [사용자 메뉴 (User menu)](https://dsui.vercel.app/items/user-menu.md): 프로필, 상태, 테마를 고르고 로그아웃까지 할 수 있는 계정 메뉴예요.
- [와플 차트 (Waffle chart)](https://dsui.vercel.app/items/waffle-chart.md): 칸 하나가 전체의 한 조각을 뜻해서 비율을 셀 수 있게 보여 주는 차트예요.

## Optional

- [Full index](https://dsui.vercel.app/llms-full.txt): every item summary in one file
- [Sitemap](https://dsui.vercel.app/sitemap.xml)