doksam-ui
홈ProfilesTokensIconsComponentsPatternsRules
Components

shadcn/ui 컴포넌트 쇼케이스

components/ui/ 컴포넌트와 커스텀 패턴을 합쳐 전체(66종)를 카테고리별로 모았습니다. 현재 66종은 라이브 데모와 코드 스니펫이 준비되어 있고, 나머지는 순차 추가 예정입니다.

Form

완료
Button
클릭 가능한 기본 액션 트리거. variant·size 조합을 제공합니다.
완료
Button Group
버튼을 시각적으로 묶어 하나의 액션 세트로 보여줍니다.
완료
Calendar
단일/범위 날짜 선택을 지원하는 달력 위젯입니다.
완료
Checkbox
다중 선택이 가능한 체크박스 입력입니다.
완료
Combobox
검색 가능한 목록에서 값을 선택하는 콤보박스입니다.
완료
Field
레이블·설명·에러 메시지를 갖춘 폼 필드 레이아웃 프리미티브입니다.
완료
Input
한 줄 텍스트를 입력받는 기본 텍스트 필드입니다.
완료
Input Group
아이콘·버튼·텍스트 애드온을 입력 필드에 붙일 때 사용합니다.
완료
Input OTP
일회용 인증 코드처럼 자릿수가 고정된 입력에 사용합니다.
완료
Label
폼 컨트롤에 접근성 있게 연결되는 레이블입니다.
완료
Native Select
브라우저 기본 select 엘리먼트를 스타일링한 셀렉트입니다.
완료
Radio Group
여러 옵션 중 하나만 선택하는 라디오 버튼 그룹입니다.
완료
Select
커스텀 드롭다운으로 하나의 값을 선택합니다.
완료
Slider
범위 내 숫자 값을 드래그로 조절하는 슬라이더입니다.
완료
Switch
켜짐/꺼짐 상태를 전환하는 토글 스위치입니다.
완료
Textarea
여러 줄 텍스트를 입력받는 필드입니다.
완료
Toggle
눌림/눌리지 않음 두 상태를 갖는 단일 토글 버튼입니다.
완료
Toggle Group
여러 토글 버튼을 묶어 단일/다중 선택을 지원합니다.
완료
Tooltip Icon Button
아이콘 전용 버튼에 Tooltip과 aria-label을 강제로 붙여주는 규칙강제 컴포넌트입니다(#21).

Overlay

완료
Dialog
화면을 덮는 모달 대화상자입니다.
완료
Alert Dialog
확인이 필요한 파괴적 액션 전에 띄우는 모달입니다.
완료
Sheet
화면 가장자리에서 슬라이드로 열리는 패널입니다.
완료
Drawer
모바일 친화적인 하단 슬라이드 시트입니다.
완료
Popover
트리거 요소 주변에 뜨는 자유 형식 콘텐츠 오버레이입니다.
완료
Tooltip
호버·포커스 시 짧은 설명을 보여줍니다.
완료
Hover Card
호버 시 미리보기 카드를 보여줍니다.
완료
Context Menu
우클릭으로 여는 컨텍스트 메뉴입니다.
완료
Dropdown Menu
트리거 클릭으로 여는 드롭다운 메뉴입니다.
완료
Menubar
데스크톱 앱 스타일의 상단 메뉴 바입니다.
완료
Command
검색 가능한 커맨드 팔레트입니다.
완료
Sonner (Toast)
일시적으로 뜨는 토스트 알림입니다.

Layout

완료
Card
콘텐츠를 묶는 기본 카드 컨테이너입니다.
완료
Separator
콘텐츠 사이를 구분하는 선입니다.
완료
Aspect Ratio
자식 요소의 가로세로 비율을 고정합니다.
완료
Resizable
드래그로 크기를 조절하는 패널 레이아웃입니다.
완료
Scroll Area
커스텀 스크롤바를 가진 스크롤 영역입니다.
완료
Sidebar
접고 펼 수 있는 앱 사이드바 프리미티브입니다.
완료
Tabs
탭으로 전환되는 콘텐츠 패널입니다.
완료
Accordion
펼치고 접을 수 있는 콘텐츠 섹션입니다.
완료
Collapsible
단일 콘텐츠 블록을 펼치고 접습니다.

Data

완료
Table
행/열 구조의 데이터를 표시하는 테이블입니다.
완료
Badge
상태·카운트를 나타내는 작은 라벨입니다.
완료
Badge Extended
shadcn Badge에 success/warning/danger 시맨틱 상태 variant를 추가한 규칙강제 컴포넌트입니다(#21).
완료
Avatar
사용자 프로필 이미지 또는 이니셜을 보여줍니다.
완료
Skeleton
로딩 중임을 나타내는 플레이스홀더 블록입니다.
완료
Progress
작업 진행률을 보여주는 바입니다.
완료
Chart
recharts 기반 차트 래퍼 컴포넌트입니다.
완료
Empty
데이터가 없을 때 보여주는 빈 상태 화면입니다.
완료
Item
아이콘·텍스트·액션을 갖춘 리스트 항목 레이아웃입니다.
완료
Kbd
키보드 단축키를 표시하는 인라인 요소입니다.
완료
Marker
타임라인·리스트에서 항목을 표시하는 마커입니다.
완료
Spinner
비동기 작업 중임을 나타내는 회전 인디케이터입니다.
완료
Alert
정보·경고·오류 메시지를 강조해서 보여줍니다.
완료
Carousel
여러 항목을 슬라이드로 넘겨보는 캐러셀입니다.
완료
Pagination
페이지 단위로 나뉜 콘텐츠를 탐색합니다.
완료
Breadcrumb
현재 위치까지의 경로를 보여주는 내비게이션입니다.
완료
Navigation Menu
드롭다운을 포함한 상단 내비게이션 메뉴입니다.

Chat

완료
Message
채팅 메시지 한 건을 표현하는 컴포넌트입니다.
완료
Message Scroller
새 메시지에 자동으로 스크롤을 따라가는 컨테이너입니다.
완료
Bubble
발신자에 따라 스타일이 달라지는 채팅 말풍선입니다.
완료
Attachment
채팅에 첨부된 파일을 미리 보여줍니다.
완료
Direction
발신 방향(내가 보냄/상대가 보냄)에 따라 정렬을 바꿉니다.

Bizinfo — 프로젝트 확장

완료
Screen Help Dialog
화면 제목 옆 (?) 버튼으로 여는 화면 매뉴얼 다이얼로그입니다(bizinfo 이식, #8).
완료
formatBizNo
사업자등록번호를 000-00-00000 형태로 포맷하는 화면 표시용 유틸입니다(bizinfo 이식, #8).

Finance — 금융 도메인 확장

완료
rateColor / rateText
한국식 등락 색(이익=빨강/손실=파랑) 클래스와 부호 포함 등락률 텍스트를 만드는 유틸입니다(tossinvest 이식, #18).
완료
formatWon
원화 금액을 억/조 단위로 축약해 표시하는 유틸입니다(news FlowPanel eok() 이식, #18).