ChoisUI SYSTEM

ThemeDensity

Component library

Build with 135 practical pieces.

Pico의 가벼운 문서 기반 위에 필요한 상호작용만 Web Components로 더합니다. 프레임워크 없이 바로 사용할 수 있습니다.

135 components

Button

semantic HTML

폼 제출과 명령 실행에 사용하는 기본 버튼입니다.

Button Group

semantic HTML

연관된 작업을 하나의 시각적 단위로 묶습니다.

Icon Button

semantic HTML

접근 가능한 이름을 가진 압축된 아이콘 작업입니다.

Copy Button

semantic HTML

텍스트를 클립보드에 복사하고 결과를 안내합니다.

Dropdown

semantic HTML

트리거 주변에 작업 메뉴를 표시합니다.

Menu

semantic HTML

키보드 이동을 지원하는 명령 목록입니다.

Context Menu

semantic HTML

포인터 위치에 문맥 작업을 표시합니다.

Input

semantic HTML

한 줄 텍스트와 구조화된 값을 입력받습니다.

Textarea

semantic HTML

여러 줄 텍스트를 입력받습니다.

Select

semantic HTML

브라우저 기본 목록에서 정해진 값 하나를 선택합니다.

Checkbox

semantic HTML

독립 옵션 또는 복수 항목을 선택합니다.

Checkbox Group

semantic HTML

관련 체크박스를 공통 레이블로 묶습니다.

Radio

semantic HTML

상호 배타적인 선택지 하나를 나타냅니다.

Radio Group

semantic HTML

라디오 선택지의 레이블과 검증을 묶습니다.

Switch

semantic HTML

즉시 적용되는 켜짐과 꺼짐 상태를 전환합니다.

Combobox

semantic HTML

텍스트 입력으로 option 목록을 필터링하고 선택합니다. native select는 SSR fallback으로 유지됩니다.

Autocomplete

semantic HTML

입력 내용에 맞는 후보를 제안합니다.

Number Input

semantic HTML

증감 제어와 범위 검증을 포함한 숫자 입력입니다.

Range Slider

semantic HTML

연속 범위에서 숫자 값을 선택합니다.

Date Input

semantic HTML

날짜 입력과 최소·최대 검증을 제공합니다.

Time Input

semantic HTML

지역 형식에 맞는 시간 값을 입력합니다.

File Input

semantic HTML

파일 선택과 유형·크기 검증을 제공합니다.

Search Box

semantic HTML

검색 입력, 초기화, 제출 작업을 결합합니다.

Form Field

semantic HTML

레이블, 도움말, 오류 메시지를 입력과 연결합니다.

Form Group

semantic HTML

연관된 입력을 fieldset으로 구성합니다.

Color Picker

semantic HTML

색상 값과 미리보기 선택을 제공합니다.

Web Editor

semantic HTML

HTML 콘텐츠를 가볍게 작성하는 contenteditable 기반 웹 에디터입니다.

Code Editor

semantic HTML

라인 번호, Tab 입력, 주석 토글, 언어별 구문 하이라이트를 제공하는 경량 코드 편집기입니다.

SQL Editor

semantic HTML

SQL 키워드, 문자열, 숫자, 주석 하이라이트를 제공하는 경량 쿼리 에디터입니다.

Python Editor

semantic HTML

Python 키워드, 문자열, 숫자, 주석 하이라이트를 제공하는 경량 스크립트 에디터입니다.

JavaScript Editor

semantic HTML

JavaScript 키워드, 문자열, 숫자, 주석 하이라이트를 제공하는 경량 모듈 에디터입니다.

Accordion

semantic HTML

여러 details 영역을 수직으로 구성합니다.

Accordion Item

semantic HTML

제목으로 열고 닫는 단일 콘텐츠 영역입니다.

Card

semantic HTML

관련 콘텐츠와 작업을 하나의 표면에 묶습니다.

Details

semantic HTML

보조 콘텐츠를 점진적으로 공개합니다.

Dialog

semantic HTML

집중이 필요한 작업을 페이지 위에 표시합니다.

Drawer

semantic HTML

화면 가장자리에서 보조 영역을 엽니다.

Divider

semantic HTML

인접한 콘텐츠의 관계와 경계를 구분합니다.

Page Shell

semantic HTML

header, navigation, main, aside, footer를 조합합니다.

Panel

semantic HTML

제목과 작업을 가진 범용 콘텐츠 영역입니다.

Container

semantic HTML

읽기 가능한 최대 너비로 콘텐츠를 정렬합니다.

Stack

semantic HTML

일관된 간격으로 요소를 수직 배치합니다.

Cluster

semantic HTML

요소를 줄바꿈 가능한 가로 그룹으로 배치합니다.

Split View

semantic HTML

두 콘텐츠 영역을 나란히 또는 전환형으로 배치합니다.

Resizable Pane

semantic HTML

키보드와 포인터로 영역 크기를 조절합니다.

Navigationstable

Breadcrumb Item

semantic HTML

breadcrumb 안의 개별 탐색 단계입니다.

Navigationstable

Tabs

semantic HTML

관련 패널을 하나씩 전환해 보여줍니다.

Navigationstable

Tab

semantic HTML

tabs 안에서 패널을 선택하는 레이블입니다.

Navigationstable

Tab Panel

semantic HTML

선택한 tab에 연결된 콘텐츠 영역입니다.

Navigationstable

Sidebar

semantic HTML

주요 콘텐츠 옆에 보조 탐색을 배치합니다.

Navigationstable

Topbar

semantic HTML

브랜드와 전역 작업을 상단에 배치합니다.

Navigationstable

Pagination

semantic HTML

SSR 링크를 유지하며 데이터 페이지를 이동합니다.

Navigationstable

Stepper

semantic HTML

여러 단계 작업의 현재 위치와 완료 상태를 표시합니다.

Navigationstable

Tree

semantic HTML

계층 데이터를 펼치고 선택할 수 있게 표시합니다.

Navigationstable

Tree Item

semantic HTML

tree 안의 개별 계층 노드입니다.

Navigationstable

Mega Menu

semantic HTML

여러 탐색 그룹을 넓은 패널에 구성합니다.

Alert

semantic HTML

작업 결과와 중요한 상태를 인라인으로 알립니다.

Callout

semantic HTML

문서 흐름 안에서 팁과 경고를 강조합니다.

Toast

semantic HTML

비차단 알림을 순서대로 표시합니다.

Toast Item

semantic HTML

toast stack 안의 개별 알림입니다.

Tooltip

semantic HTML

hover와 focus에 짧은 보조 정보를 표시합니다.

Popover

semantic HTML

트리거 주변에 상호작용 가능한 콘텐츠를 표시합니다.

Confirm

semantic HTML

위험하거나 되돌리기 어려운 작업을 확인합니다.

Spinner

semantic HTML

종료 시점을 모르는 작업 진행을 표시합니다.

Skeleton

semantic HTML

로딩 중 콘텐츠 자리와 크기를 유지합니다.

Progress

semantic HTML

측정 가능한 작업 진행률을 표시합니다.

Progress Ring

semantic HTML

작은 영역에 원형 진행률을 표시합니다.

Empty State

semantic HTML

데이터가 없을 때 이유와 다음 작업을 안내합니다.

Avatar

semantic HTML

사람이나 대상을 이미지, 글자, 아이콘으로 나타냅니다.

Icon

semantic HTML

작업과 상태를 보조하는 SVG 아이콘 패턴입니다.

Carousel

semantic HTML

여러 콘텐츠 슬라이드를 순서대로 탐색합니다.

Carousel Item

semantic HTML

carousel 안의 개별 슬라이드입니다.

Comparison

semantic HTML

두 시각 자료의 차이를 드래그로 비교합니다.

QR Code

semantic HTML

짧은 텍스트를 스캔 가능한 코드로 표시합니다.

Video

semantic HTML

자막과 poster를 포함한 반응형 영상을 표시합니다.

Zoomable Frame

semantic HTML

iframe 또는 이미지를 확대하고 이동합니다.

Table

semantic HTML

행과 열의 정형 데이터를 표시합니다.

Data Grid

semantic HTML

정렬, 필터, 페이징, 선택을 지원하는 데이터 표입니다.

List

semantic HTML

순서가 있거나 없는 항목 집합을 표시합니다.

Badge

semantic HTML

상태, 수량, 분류를 짧게 강조합니다.

Chip

semantic HTML

필터와 선택값을 압축된 레이블로 표시합니다.

Meter

semantic HTML

알려진 범위 안의 측정값을 표시합니다.

Filter Bar

semantic HTML

검색과 여러 데이터 필터를 URL 상태로 관리합니다.

Sort Control

semantic HTML

정렬 기준과 방향을 선택합니다.

Bulk Action Bar

semantic HTML

선택된 여러 항목에 적용할 작업을 표시합니다.

Query Builder

semantic HTML

중첩된 데이터 검색 조건을 시각적으로 구성합니다.

Infinite List

semantic HTML

스크롤 위치에 따라 다음 데이터를 요청합니다.

Virtual List

semantic HTML

보이는 항목만 렌더링해 대량 목록을 처리합니다.

Inline Edit

semantic HTML

읽기 상태를 현재 위치에서 편집 상태로 전환합니다.

Row Actions

semantic HTML

데이터 행에 직접 관련된 작업을 제공합니다.

Visually Hidden

semantic HTML

시각적으로 숨기되 보조 기술에는 콘텐츠를 제공합니다.

Focus Ring

semantic HTML

키보드 포커스를 일관된 토큰으로 표시합니다.

Responsive Hide

semantic HTML

지정한 viewport에서 보조 콘텐츠를 숨깁니다.

Text Truncate

semantic HTML

한 줄 텍스트를 말줄임표로 제한합니다.

Text Clamp

semantic HTML

여러 줄 텍스트를 지정한 줄 수로 제한합니다.

Format Bytes

semantic HTML

바이트 수를 읽기 쉬운 단위로 표시합니다.

Format Date

semantic HTML

Intl 형식으로 날짜와 시간을 표시합니다.

Format Number

semantic HTML

숫자, 통화, 백분율을 지역 형식으로 표시합니다.

Relative Time

semantic HTML

날짜를 현재 기준 상대 시간으로 표시합니다.

Intersection Observer

semantic HTML

자식의 viewport 진입과 이탈을 이벤트로 제공합니다.

Mutation Observer

semantic HTML

DOM 변경을 선언적 이벤트로 제공합니다.

Resize Observer

semantic HTML

요소 크기 변경을 선언적 이벤트로 제공합니다.

Include

semantic HTML

외부 HTML partial을 현재 문서에 포함합니다.

Navigationstable

Breadcrumb

semantic HTML

현재 위치와 상위 문서 경로를 의미론적 탐색 링크로 표시합니다.

Dashboard Pattern

semantic HTML

지표, 필터, 데이터 표를 조합한 대시보드 화면입니다.

Admin Pattern

semantic HTML

탐색, 필터, grid, 일괄 작업을 조합한 관리 화면입니다.

Ecommerce Pattern

semantic HTML

상품 탐색과 주문 입력을 조합한 상거래 화면입니다.

Authentication Pattern

semantic HTML

로그인, 복구, 다단계 인증 폼을 구성합니다.

Settings Pattern

semantic HTML

분류된 설정 입력과 저장 상태를 구성합니다.

Chips Input

semantic HTML

여러 입력값을 칩 목록으로 관리합니다.

Diff View

semantic HTML

두 텍스트 상태의 변경 내용을 의미론적 추가·삭제 행으로 표시합니다.

Navigationstable

Command Palette

semantic HTML

검색과 키보드 탐색으로 명령을 빠르게 실행하는 범용 팔레트입니다.

Navigationstable

Menu Bar

semantic HTML

JSON 기반의 다단 상단 탐색과 반응형 메뉴를 렌더링합니다.

freeSince 0.1.5

Navigationstable

Application Navigation

semantic HTML

브랜드, 탐색 링크와 모바일 메뉴 토글을 조합하는 범용 애플리케이션 탐색입니다.

Slug Input

semantic HTML

제목이나 식별자를 URL 안전한 소문자 slug로 입력합니다.

Upload Queue

semantic HTML

파일 선택 결과를 업로드 전 대기 목록으로 관리합니다. 저장과 검증은 애플리케이션이 담당합니다.

Timeline

semantic HTML

시간 순서의 사건이나 변경 이력을 의미론적 목록으로 표시합니다.

AI Suggestion

semantic HTML

제공자 중립적인 생성 제안과 검토·수락·거절 상태를 표시합니다.

Chat

semantic HTML

대화 제목, 메시지 영역과 입력 영역을 조합하는 범용 채팅 컨테이너입니다.

Chat Thread

semantic HTML

시간 순서의 메시지와 이전 메시지 로딩 상태를 표시합니다.

Chat Message

semantic HTML

작성자, 본문, 시간과 전송 상태를 표시하는 단일 메시지입니다.

Chat Composer

semantic HTML

메시지 입력과 제출·busy 상태를 제공하며 전송 정책은 애플리케이션에 위임합니다.

Chat Status

semantic HTML

입력 중, 스트리밍, 연결 및 오류 상태를 짧게 알립니다.

Line Chart

semantic HTML

Trend visualization for values changing over time.

freeSince 0.1.5

Bar Chart

semantic HTML

Category comparison using horizontal or vertical bars.

freeSince 0.1.5

Stacked Bar Chart

semantic HTML

Part-to-whole comparison across categories or periods.

freeSince 0.1.5

Area Chart

semantic HTML

Trend visualization emphasizing cumulative magnitude.

freeSince 0.1.5

Donut Chart

semantic HTML

Compact part-to-whole visualization for a small number of categories.

freeSince 0.1.5

Sparkline

semantic HTML

Small trend visualization for KPI cards and dense dashboards.

freeSince 0.1.5

KPI Card

semantic HTML

A primary metric with a compact change indicator.

freeSince 0.1.5

Scatter Chart

semantic HTML

Relationship and distribution visualization for two numeric values.

freeSince 0.1.5

Heatmap

semantic HTML

Intensity visualization across two categorical dimensions.

freeSince 0.1.5

Funnel Chart

semantic HTML

Stage-by-stage conversion and publishing workflow visualization.

freeSince 0.1.5

Gauge

semantic HTML

Progress toward a bounded target or capacity.

freeSince 0.1.5

Radar Chart

semantic HTML

Multi-dimensional score comparison across shared indicators.

freeSince 0.1.5