COMPONENTS
전체 컴포넌트
용도와 형태로 필요한 컴포넌트를 찾아보세요.
77개 컴포넌트
대표 이미지는 형태를 알아보기 쉽게 확대했습니다. 실제 크기는 상세 예제에서 확인하세요.
이미지는 React 예제입니다. 각 문서에서 선택한 플랫폼의 예제를 직접 조작할 수 있습니다. 플랫폼별 지원 범위
Button
행동의 중요도, 크기와 실행 가능 상태를 표현합니다.
ButtonGroup
서로 연결된 보기나 조건을 버튼 형태로 선택합니다.
Chip
선택된 항목의 라벨과 선택적인 삭제 행동을 표시합니다.
CopyButton
프로젝트가 지정한 값을 복사하고 결과를 알립니다.
Dropdown
트리거를 기준으로 작업 메뉴를 엽니다.
DropdownDivider
메뉴 항목 사이의 구분선을 표시합니다.
Dropdown의 구성 요소
DropdownItem
메뉴의 실행·선택·비활성·위험 액션을 표현합니다.
Dropdown의 구성 요소
FormActions
확인·취소 액션과 로딩 중 중복 실행 방지를 연결합니다.
IconToggle
아이콘으로 선택 상태를 표현합니다. 즐겨찾기·관심도 같은 컨트롤로 구성합니다.
MenuButton
버튼과 메뉴를 연결하며 compact 표현을 지원합니다.
RefreshButton
갱신 요청과 갱신 중 회전 표시를 연결합니다.
Checkbox
단일 여부 또는 배열에 포함되는 선택값을 변경합니다.
Combobox
입력한 조건에 맞는 옵션을 검색하고 선택합니다.
DatePicker
허용 날짜 범위 안에서 날짜 문자열을 선택합니다.
FilterGroup
단일 또는 복수 필터 조건을 선택합니다.
FormGroup
라벨·필수 표시·안내·오류를 입력 컨트롤과 연결합니다.
Input
한 줄 입력, 앞뒤 콘텐츠, 지우기와 오류 상태를 표현합니다.
QuantityStepper
직접 입력과 증감 버튼으로 수량을 조절합니다.
Radio
RadioGroup의 단일 선택 항목을 구성합니다.
RadioGroup
서로 배타적인 선택지를 옵션 또는 자식으로 구성합니다.
RangeSlider
두 손잡이로 값의 시작과 끝을 선택합니다.
SearchInput
검색 지연, 요청 취소, 늦은 응답 무시와 결과 선택을 담당합니다.
Select
단일·복수 선택, 검색과 비활성 항목을 지원합니다.
Slider
한 값을 가로 슬라이더로 조절합니다.
Switch
즉시 적용되는 켜짐·꺼짐 상태를 변경합니다.
Textarea
여러 줄의 텍스트를 입력합니다.
TimePicker
시·분 또는 시·분·초를 선택해 하루 안의 시각을 입력합니다.
BottomNavigation
앱의 주요 목적지와 현재 위치를 표시합니다.
Breadcrumb
현재 위치와 상위 경로를 표시합니다.
ExternalLink
외부 문서나 서비스를 여는 링크를 표시합니다.
Pagination
현재 페이지, 이동 가능한 페이지와 페이지 크기를 표시합니다.
Tabs
동일 영역의 보기를 선택하고 현재 패널을 표시합니다.
TabPane
Tabs의 제목과 연결된 본문을 구성합니다.
Tabs의 구성 요소
TopNavigation
화면 제목과 앞쪽 탐색·보조 행동을 배치합니다.
Accordion
항목별 펼침 상태를 관리하며 단일·복수 펼침을 선택합니다.
AccordionItem
제목을 눌러 설명 영역을 펼치거나 접습니다.
Accordion의 구성 요소
BottomActionBar
화면 하단의 설명과 주요 행동을 묶습니다.
Card
미디어·헤더·본문·푸터를 공통 표면과 여백 규칙으로 묶습니다.
Drawer
화면 가장자리에서 작업 영역을 엽니다.
Modal
현재 흐름에서 확인이나 입력을 수행하고 이전 포커스로 돌아갑니다.
Popover
트리거 가까이에 추가 정보나 작업 영역을 엽니다.
ScrollFade
가로 콘텐츠의 스크롤 영역을 구성합니다.
Alert
상태의 의미와 사용자가 해야 할 행동을 본문으로 설명합니다.
ChartSkeleton
차트 영역의 높이를 유지하며 조회 중인 상태를 표시합니다.
DataState
최초 조회·조건 변경·동일 조건 갱신·실패를 구분하여 표시합니다.
ErrorBoundary
하위 렌더링 오류를 대체 콘텐츠로 표현하고 오류 보고를 프로젝트에 전달합니다.
FormSkeleton
폼 항목과 열 구성을 유지하면서 조회를 기다립니다.
ListSkeleton
목록의 자산 식별 영역과 숫자 영역을 유지합니다.
Progress
범위를 벗어난 값을 제한하여 완료 비율을 표시합니다.
Skeleton
텍스트·카드·표·차트·통계·블록의 조회 대기 모양을 표시합니다.
Spinner
작업이 진행 중임을 표시합니다. 완료 여부는 프로젝트가 결정합니다.
Tooltip
트리거에 대한 짧은 설명을 표시합니다.
AnimatedNumber
값 변경을 숫자 전환으로 표현합니다. formatter와 접두·접미사는 프로젝트가 제공합니다.
Avatar
사용자 이미지와 이름 기반 대체 표현을 제공합니다.
Badge
짧은 상태명과 의미를 작은 표시로 전달합니다.
Empty
결과가 없는 이유와 사용자가 실행할 다음 행동을 설명합니다.
HeatmapCell
프로젝트 색상을 배경층에 연결하고 값의 농도만 투명도로 조절합니다.
Icon
Tabler 3.48.0의 선형 5,166개·채움형 1,054개를 공통 @kjun/icons 패키지로 제공합니다. 추가 아이콘은 개별 import 후 KjunProvider.icons에 등록합니다.
Image
콘텐츠 이미지의 비율과 실패 대체 표현을 제공합니다.
KpiHero
대표 수치와 증감, 보조 지표를 한 영역에서 표시합니다.
KpiRow
여러 KPI를 같은 행에 놓고 모바일에서 정보 위계를 유지합니다.
ListRow
제목·설명·앞뒤 정보와 별도의 보조 행동으로 범용 목록 행을 구성합니다.
ListSection
제목과 설명이 있는 범용 목록 묶음입니다.
ProgressCell
표 안에서 수치와 진행 비율을 함께 보여줍니다.
Sparkline
작은 공간에 값의 추세를 표시합니다. 의미와 색상은 입력으로 연결합니다.
Table
데이터 열, 정렬, 행 선택, 확장, 모바일 카드 표현을 구성합니다.
CollectionMark
즐겨찾기·관심 여부를 표시합니다. 변경 액션은 IconToggle을 사용합니다.
Deviation
기준과의 편차를 숫자 또는 신호로 표시합니다.
ExecutionStatusBadge
실행 상태와 사용자가 읽을 상태명을 함께 표시합니다.
Freshness
이전 값 또는 종가임을 표시하고 조회 시각을 설명합니다.
MarketCards
표시 지표를 선택하여 자산 목록의 핵심 값을 보여줍니다.
MarketListPanel
조회 조건과 시장 목록 사이의 간격·구분선을 구성합니다.
MarketSimpleList
자산명·가격·증감과 데이터의 최신 여부를 표시합니다.
MarketTable
정렬·컬렉션 액션과 프로젝트의 금융 포맷터를 연결하는 표입니다.
MarketTableSkeleton
실제 시장 표의 열·행·액션 영역을 유지합니다.
PriceCell
가격 포맷과 이전 값 표시를 분리해 표현합니다.
SignedValue
양수·음수·중립의 의미를 숫자 부호와 역할 색상으로 표시합니다.