버튼, 입력 필드, 오버레이, 차트처럼 화면을 이루는 부품 129개를 쓰임새별로 묶었어요. 카드를 누르면 움직이는 데모와 소스를 볼 수 있어요.
눌렀을 때 살짝 눌리고 소리가 나는 기본 버튼이에요.
버튼처럼 보이지만 요소는 링크예요. 어딘가로 가는 자리에 써요.
숫자가 그 자리에서 바뀌는 좋아요·싫어요 알약이에요.
누르면 진행 중, 완료 상태로 바뀌며 결과를 알려 주는 버튼이에요.
관련 버튼을 한 줄로 묶고 더보기 메뉴를 붙일 수 있어요.
주요 동작 버튼과 다른 동작을 모은 메뉴가 하나로 붙은 버튼이에요.
누르면 그 자리에서 확인, 진행, 완료 단계로 모양이 바뀌는 버튼이에요.
버튼을 일정 시간 누르고 있어야 실행되는 확인 버튼이에요.
눌러서 값을 클립보드에 복사하고 복사했다고 알려 줘요.
아이콘 버튼에 포인터를 올리거나 선택하면 글자가 펼쳐지는 버튼 묶음이에요.
화면 위에 떠 있는 도구 모음 형태의 버튼 묶음이에요.
라이트와 다크 모드를 아이콘이 돌며 바뀌는 버튼으로 전환해요.
누른 위치에서 파동이 퍼지는 마이크로 인터랙션 버튼
라벨과 설명, 오류 문구를 함께 보여 주는 기본 텍스트 입력 필드예요.
여러 줄을 입력하고 글자 수와 안내 문구를 함께 보여 주는 입력창이에요.
보기와 숨기기를 전환할 수 있는 비밀번호 입력 필드예요.
입력한 비밀번호의 강도와 충족한 규칙을 보여 주는 표시기예요.
증감 버튼과 드래그로 값을 조절하는 숫자 입력 필드예요.
검색어를 입력하고 지울 수 있는 검색 입력창이에요.
아이콘이 눌리면 입력창으로 넓어지고 결과를 바로 보여 주는 검색이에요.
입력하면 선택지가 걸러지는 검색형 선택 필드예요.
목록에서 하나를 고르고, 고른 값이 위아래로 굴러 바뀌는 선택 상자예요.
선택하면 버튼이 목록 패널로 변하는 검색 가능한 선택 상자예요.
여러 항목을 골라 칩으로 보여 주는 선택 상자예요.
라벨과 설명을 함께 쓰는 체크 상자예요.
고른 항목으로 하이라이트와 점이 부드럽게 움직이는 라디오 그룹이에요.
설명과 가격이 있는 카드 중 하나를 고르고, 선택 고리가 카드 사이를 미끄러지듯 옮겨 가요.
켜고 끄는 값을 바꾸는 스위치로, 누르는 동안 손잡이가 늘어나요.
끌거나 키보드로 값이나 범위를 고르는 슬라이더예요.
끝까지 당기면 고무줄처럼 늘어나는 값 조절 슬라이더예요.
한 번에 하나만 고르는 짧은 선택지를 나란히 보여 주는 컨트롤이에요.
월간과 연간 같은 결제 주기를 바꾸고 할인 배지를 보여 줘요.
칩을 눌러 하나 또는 여러 개를 고르고 넘치면 더보기로 접어 줘요.
태그와 필터에 쓰는 알약이에요. 주소가 있으면 링크, 없으면 라벨이에요.
글자를 입력해 태그를 추가하고 백스페이스로 지울 수 있는 입력창이에요.
@로 사람이나 그룹을 불러 글 속에 넣는 입력창이에요.
텍스트를 눌러 그 자리에서 바로 고치고 저장하는 컴포넌트예요.
적용한 필터를 칩으로 보여 주고 추가하거나 지울 수 있는 도구 모음이에요.
색을 직접 고르거나 값을 입력하고 견본을 저장해 둘 수 있어요.
누른 키 조합을 그대로 기록해 단축키로 보여 줘요.
손이나 펜으로 서명을 그리고 SVG로 내보내는 패드예요.
파일을 끌어다 놓거나 골라서 올리고 진행 상태를 보여 주는 영역이에요.
굵게, 목록, 링크 같은 서식을 쓰고 마크다운이나 HTML로 내보내는 편집기예요.
날짜를 고르는 월간 달력이고 방향키로 움직일 수 있어요.
달력에서 하루를 골라 입력하는 날짜 선택 필드예요.
시작일과 종료일을 달력과 프리셋으로 고르는 선택기예요.
시간을 골라 입력하고, 바뀐 시각이 시계처럼 굴러 바뀌어요.
정해진 시각까지 남은 시간을 실시간으로 보여 줘요.
화면 위에 떠서 확인이나 입력을 받는 모달 대화상자예요.
화면 가장자리에서 밀려 나오는 패널이에요.
화면 아래에서 올라오고 끌어서 높이를 바꾸는 시트예요.
버튼 옆에 작은 패널을 띄워 추가 내용을 보여 주는 팝오버예요.
요소에 포인터를 올리면 미리보기 카드가 떠오르는 컴포넌트예요.
마우스를 올리거나 포커스하면 짧은 설명을 띄우고 연달아 열면 바로 나타나는 툴팁이에요.
잠시 나타났다가 사라지고 밀어서 닫을 수도 있는 알림이에요.
여러 알림을 쌓아 보여 주고 같은 알림을 제자리에서 바꿔 주는 토스트 모음이에요.
쿠키 종류별로 동의를 받고 나중에 다시 바꿀 수 있어요.
버튼을 누르면 항목 목록이 펼쳐지는 메뉴예요.
오른쪽 클릭이나 길게 눌러 여는 메뉴예요.
프로필, 상태, 테마를 고르고 로그아웃까지 할 수 있는 계정 메뉴예요.
로그아웃 상태에서는 로그인 링크, 로그인 상태에서는 이름 칩과 로그아웃이 바로 보여요.
같은 페이지의 다른 언어로 가는 링크예요. 좁은 화면에서는 아이콘만 남아요.
아이콘, 단어, 단축키 칩이 한 버튼에 담긴 검색 입구예요.
키보드 포커스를 받을 때만 떠서 본문으로 바로 건너뛰게 해 주는 칩이에요.
읽는 위치를 따라가는 목차예요. 옆에 고정하거나 접이식으로 둘 수 있어요.
문서 아래에 두는 이전·다음 카드예요. 있는 쪽만 그려요.
한 줄 전체가 링크인 목록이에요. 카드보다 조용해서 길어도 읽기 편해요.
제목 옆에 숨어 있다가 호버하면 나타나는 링크예요. 누르면 주소를 복사해요.
탭을 바꾸면 패널 높이가 부드럽게 이어지며 내용이 바뀌어요.
지금 있는 위치까지의 경로를 링크로 보여 줘요.
페이지 번호를 눌러 이동하는 페이지 넘김 컴포넌트예요.
온보딩이나 결제 같은 단계의 진행 상황을 보여 주는 단계 표시예요.
폴더처럼 접고 펼 수 있고 방향키로 오갈 수 있는 계층 목록이에요.
정보, 성공, 경고, 위험 톤으로 상황을 알리고 닫을 수 있는 배너예요.
화면 상단에서 공지를 돌려 보여 주고 닫을 수 있는 띠예요.
중립, 성공, 정보, 경고, 위험 톤으로 상태를 작게 표시해요.
사진이나 이름 첫 글자로 사람을 나타내고 상태 점을 달 수 있어요.
여러 사람을 겹쳐 보여 주고 넘치는 인원은 숫자로 줄여 알려 줘요.
작업이 얼마나 진행됐는지 막대와 숫자로 보여 줘요.
내용을 불러오는 동안 자리를 채우고, 끝나면 부드럽게 내용으로 바뀌는 자리 표시예요.
보여 줄 내용이 없을 때 안내 문구와 다음 행동을 알려 주는 화면이에요.
되돌릴 수 없는 동작 하나를 담는 빨간 테두리 카드예요.
글 안의 라이브 데모예요. 가까이 스크롤됐을 때만 iframe을 올려요.
한도 대비 사용량을 항목별로 나눠 보여 주고 거의 찼을 때 알려 주는 막대예요.
핵심 수치와 증감을 한눈에 보여 주는 카드예요.
값이 범위 안 어디쯤인지 호 모양으로 보여 주는 계기판이에요.
상태가 바뀔 때 아이콘 모양이 부드럽게 변하는 아이콘 모음이에요.
파일 이름과 함께 코드를 보여 주고 길면 접을 수 있어요.
JSON 데이터를 접고 펼치며 검색하고 복사할 수 있는 트리 뷰어예요.
손잡이를 끌어 전후 이미지를 비교하는 슬라이더예요.
히어로, 섹션 헤더, 카드 커버에 쓰는 도형 일러스트예요. 테마가 직접 그린 그림이 없으면 베이스 그림을 테마 색으로 그려요.
AI 모델이 OpenUI나 json-render로 쓴 화면을 dsui 컴포넌트로 그려 주는 컴포넌트예요.
제목과 설명, 미디어를 담고 눌러 상세 내용을 펼치는 카드예요.
카드 전체가 하나의 링크예요. 호버하면 살짝 들려요.
썸네일이 앞서는 라이브러리 항목 카드예요. 라이트·다크 썸네일과 호버 영상을 받아요.
쌓인 카드를 좌우로 밀어 결정하고 되돌릴 수 있어요.
누르면 넓어지면서 상세 내용이 나타나는 카드예요.
슬라이드를 옆으로 넘기고 자동 재생할 수 있어요.
제목을 눌러 내용을 펼치고 접는 목록이에요.
열 머리를 눌러 정렬하고 행을 골라 볼 수 있는 데이터 표예요.
날짜별로 묶어 활동 기록을 보여 주고 행을 눌러 펼쳐 볼 수 있는 피드예요.
메시지와 첨부, 반응, 전송 상태를 보여 주는 대화 목록이에요.
댓글과 답글, 반응을 보여 주고 해결 처리를 할 수 있어요.
한 개의 코멘트예요. 줄 동작과 신고 폼이 그 줄 안에서 열려요.
목록 행을 옆으로 밀어 보관이나 삭제 같은 동작을 꺼내는 목록이에요.
항목별 값을 막대로 비교하고 평균선을 보여 주는 차트예요.
여러 계열의 추이를 선으로 보여 주고 호버로 값을 확인하는 차트예요.
비율을 고리 모양으로 보여 주고 범례로 구간을 켜고 끌 수 있는 차트예요.
아래 미니 차트에서 구간을 골라 위 차트를 확대해 보는 차트예요.
날짜별 활동량을 주간 격자의 농도로 보여 주는 차트예요.
여러 분포의 모양을 겹쳐 쌓은 능선 형태로 비교하는 차트예요.
두 시점 사이에 항목들이 얼마나, 어떤 순서로 바뀌었는지 선으로 보여 줘요.
작은 크기로 추세를 보여 주고 훑어 보면 값을 알려 주는 선 그래프예요.
시간에 따라 여러 항목의 비중이 어떻게 달라지는지 흐르는 면으로 보여 줘요.
사각형 크기로 계층 데이터의 비중을 보여 주고 눌러서 안으로 들어가는 차트예요.
칸 하나가 전체의 한 조각을 뜻해서 비율을 셀 수 있게 보여 주는 차트예요.
화면에 보이면 숫자가 부드럽게 올라가는 카운터예요.
화면에 보이기 시작하면 글자가 나타나는 제목이에요.
숫자와 글자가 슬롯머신 릴처럼 돌아가며 새 값으로 바뀌어요.
짧은 문구가 바뀔 때 겹치는 글자는 그대로 두고 다른 글자만 바꿔 줘요.
제목이나 문장이 단어 단위로 흐림이 풀리며 한 번 올라와요.
작업 중인 상태 문구 위로 은은한 빛이 지나가요.
중심에서 퍼져 나가는 고리 애니메이션
항목이 순서대로 떠올랐다 사라지는 반복 모션
구분선을 끌어 창 크기를 조절하고 좁히면 접히는 분할 화면이에요.
얇은 스크롤바와 가장자리 페이드가 있는 기본 스크롤 영역이에요.
헤더나 툴바에서 액션 묶음 사이를 나누는 가는 선이에요.
블로그, 약관, 문서처럼 긴 글의 조판이에요. Markdown이 내놓은 그대로를 받아요.
푸터 맨 아래의 피드 링크 줄과 크레딧 줄이에요.
