UniKit

Button · 버튼여섯 가지 스타일과 네 가지 크기예요. 버튼을 꾹 눌러보세요.

Card · 카드제목·설명·내용·하단을 조합해 정보를 담아요.

안녕, UniKit!복사해서 쓰는 유니버설 컴포넌트

이 카드 하나가 React(웹)와 React Native 모두에서 똑같이 렌더링돼요. 소스를 내 프로젝트로 가져와 자유롭게 고칠 수 있어요.

v0.1

다크 모드도 한 번에오른쪽 위 토글로 전체 색이 전환돼요.

색·테두리·배경이 모두 CSS 변수 토큰으로 정의되어 있어, 테마를 바꾸면 화면 전체가 한꺼번에 바뀌어요.

Input · Label — 입력창레이블과 입력창을 함께 써요. 입력창을 클릭하면 테두리가 강조돼요.

이름

이메일

비활성 입력창

Badge · 배지네 가지 스타일의 배지예요.

기본

보조

삭제

외곽선

폼 컨트롤 — Checkbox · Radio · Switch · Toggle눌러 보세요. 체크·선택·전환이 모두 한 벌 소스로 동작해요.

이메일로 받기 (기본 선택)

일부만 선택됨 (중간 상태)

이메일

문자

푸시

알림 켜기작게

Tabs · Accordion · Collapsible탭과 접기를 열고 닫아 보세요.

계정 탭 내용이에요.

한 벌 소스로 React(웹)와 React Native 양쪽에 같은 모습을 내는 컴포넌트 모음이에요.

접기를 접었다 펼 수 있어요.

Alert · Progress · Avatar · Empty상태와 정보를 알려주는 표시 요소예요.

저장 완료변경사항이 안전하게 저장됐어요.

주의이 작업은 되돌릴 수 없어요.

홍

유

김

이

박

+5

◻

아직 항목이 없어요첫 번째 항목을 추가해 보세요.

Table · Breadcrumb · Pagination · 레이아웃데이터를 담고 위치를 안내하는 컴포넌트예요.

컴포넌트

이름

역할

상태

홍길동

관리자

활성

김철수

편집자

대기

팀 구성원 2명

⌘

K

2:1 비율

★

즐겨찾는 프로젝트어디서나 같은 모습으로 열리는 UniKit이에요.

팀 이름팀 이름은 언제든 바꿀 수 있어요.

오버레이 — Dialog · AlertDialog · Sheet · Drawer화면을 덮는 대화 상자예요. 열림·닫힘은 상태로 관리돼요.

ESC·바깥 눌림 닫힘: 4종 모두 · 백드롭 눌림 닫힘 금지: AlertDialog만.

팝업 메뉴 — Popover · Tooltip · Dropdown · ContextMenu · HoverCard트리거에 붙어 뜨는 팝업과 메뉴예요.

Popover

Tooltip

DropdownMenu

ContextMenu

HoverCard (웹 전용)

HoverCard는 이 팝업 계열에서 유일하게 마우스 호버가 없는 네이티브에서 쓰기 어려워 웹 전용으로 표시해요.

명령·탐색 — Command · Combobox · Menubar · NavigationMenu검색으로 명령을 찾고 항목을 골라요.

Command

매칭이 하나도 없으면 목록이 "결과가 없어요"(CommandEmpty)로 바뀌어요.Combobox (단일 선택)

선택됨: 없음

MenubarNavigationMenu

선택 상자 — Select · NativeSelect목록에서 하나를 골라요. 선택 전(placeholder)과 선택됨을 나란히 둬요.

선택 전 — placeholder

선택됨 — 기본값 지정

선택 전 셀렉트를 고르면 값이 "없음"으로 바뀌어요.

NativeSelect

비활성 (전체)

폼 확장 — InputOTP · InputGroup · Slider · Calendar · Form값을 입력하고 고르는 컨트롤이에요. 상태에 따라 모습이 바뀌어요.

InputOTP — 부분 입력 → 완성

−

0/6 입력됨 — 다 채우면 완성 상태로 바뀌어요.

InputGroup

https://

Slider

음량: 40

Calendar — 월 이동 · 선택일

2026년 11월

일

월

화

수

목

금

토

선택일: 없음 — 날짜를 눌러 보세요

Form — react-hook-form

닉네임다른 사람에게 보이는 이름이에요.

빈 값 제출 → 오류 메시지(FormMessage)와 붉은 라벨, 입력창 aria-invalid. 정상 제출 → 1.2초 spinner 후 완료 토스트.

레이아웃·피드백 확장 — ScrollArea · Resizable · Carousel · Sidebar · Sonner · Spinner공간을 나누고 상태를 알려주는 컴포넌트예요.

ScrollArea

목록 항목 1목록 항목 2목록 항목 3목록 항목 4목록 항목 5목록 항목 6목록 항목 7목록 항목 8목록 항목 9목록 항목 10목록 항목 11목록 항목 12

Resizable (웹 전용)

패널 A — 핸들을 끌어 보세요

패널 B

Carousel

슬라이드 하나 (1/5)

슬라이드 둘 (2/5)

슬라이드 셋 (3/5)

슬라이드 넷 (4/5)

슬라이드 다섯 (5/5)

첫 슬라이드에서는 "이전", 마지막에서는 "다음" 버튼이 비활성화돼요.Sidebar — 데스크톱 고정

UniKit

메뉴

본문 영역

▤ 트리거를 누르면 사이드바가 접혀요(웹은 ⌘B도 돼요).

Sidebar — isMobile 시트

isMobile — 트리거를 누르면 시트가 열려요.

Sonner — toast

토스트는 화면 오른쪽 아래에 쌓여요(드래그로 치우면 닫혀요). 카드는 화면 루트의 <Toaster />가 렌더해요.Spinner

불러오는 중…

큰 크기(size-6)

메시지 UI — Message · Bubble · Attachment · Marker · MessageScroller채팅 화면을 구성하는 부품들이에요.

Message

홍

홍길동 · 오전 10:02

이 메시지는 상대방 쪽(start)이에요.

전송 완료

그럼! 나는 내 쪽(end)이에요.

👍 3

오후 12:30 · 읽음

Bubble

default — 주 배경

secondary — 보조 배경

tinted — 주색 물들임

destructive — 오류·경고

Attachment

📄

분기 보고서.pdf2.4 MB

스크린샷.png업로드 중…

!

큰 파일.mp4용량 초과로 실패했어요

Marker

2026년 11월 10일

여기까지 읽었어요

MessageScroller — 자동 하단

안녕! 쇼케이스 잘 뜨나요?

메시지를 추가하면 뷰포트가 자동으로 맨 아래로 붙어요(stickToEnd). ↓ 버튼은 맨 아래로 점프해요.

Chart — 차트 (웹 전용)선언형 시리즈 조합으로 그리는 차트예요. 막대 위를 hover하거나 누르면 툴팁이 떠요.

ChartBarSeries — 방문자 수

데스크톱

ChartLineSeries — 플랫폼별 추이

데스크톱

모바일

시리즈 색은 --chart-1..5 토큰(site.css)이에요. 테마를 전환하면 팔레트도 바뀌어요.