vibekit 학습 플레이그라운드

64 Components

Component Playground

Accordion
여러 질문/섹션을 접고 펼쳐 필요한 내용만 확인할 때 사용합니다.

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

Alert
중요한 안내나 경고 메시지를 눈에 띄게 보여줄 때 사용합니다.
Alert Dialog
삭제처럼 되돌리기 어려운 작업 전에 최종 확인을 받는 팝업입니다.
Aspect Ratio
이미지·영상 박스의 가로세로 비율을 일정하게 유지합니다.
16:9 Preview
Avatar
사용자 프로필 이미지와 이니셜을 함께 표시합니다.
CNAB
+2
Badge
상태, 라벨, 개수 같은 짧은 정보를 작게 강조합니다.
DefaultSecondaryDestructiveOutline
Breadcrumb
현재 페이지 위치를 경로 형태로 보여줘 이동을 돕습니다.
Button
클릭 가능한 기본 액션 버튼 스타일과 상태를 제공합니다.
Button Group
연관된 여러 버튼을 한 덩어리로 정리해 보여줍니다.
3
Calendar
날짜를 시각적으로 선택하거나 확인할 수 있는 달력입니다.
March 2026
Card
제목·설명·내용·액션을 묶어 콘텐츠를 카드 형태로 구성합니다.
Create project
Deploy your new project in one click.

project-name.com

Carousel
여러 항목을 좌우 슬라이드로 넘겨가며 보여줍니다.
Slide 1
Slide 2
Slide 3
Chart
데이터를 그래프로 시각화해 추세를 빠르게 파악하게 합니다.
Checkbox
여러 옵션 중 원하는 항목을 복수 선택할 때 사용합니다.
Collapsible
보조 정보를 필요할 때만 펼쳐 화면을 깔끔하게 유지합니다.
@peduarte starred 3 repositories.
Combobox
입력 검색과 목록 선택을 한 컴포넌트에서 처리합니다.
Command
키보드 중심의 빠른 검색/명령 실행 패널을 제공합니다.
Context Menu
우클릭(또는 길게 누르기) 시 상황별 메뉴를 표시합니다.
Right click here
Data Table
정렬·필터·페이지네이션이 가능한 데이터 표를 구성합니다.
pendingolivia@example.com$250.00
processingjack@example.com$150.00
successmaya@example.com$350.00

Click headers to sort, type to filter, and paginate rows.

Date Picker
캘린더 팝오버로 날짜를 편하게 선택합니다.
Dialog
중요한 작업을 포커스된 모달 창에서 처리하게 합니다.
Direction
LTR/RTL 같은 텍스트 방향을 전역으로 제어합니다.
مرحبا - Direction is set to RTL.
Drawer
화면 가장자리에서 슬라이드되는 패널로 보조 작업을 처리합니다.
Dropdown Menu
버튼 클릭으로 액션 목록을 펼쳐 선택하게 합니다.
Empty
데이터가 없을 때 안내 문구와 다음 행동을 제시합니다.
No results found
Try changing your filters.
Field
라벨·설명·오류를 포함한 폼 필드 단위를 표준화합니다.

We will never share your email.

Footer
페이지 하단에 보조 링크와 저작권 정보를 정리해 배치합니다.

© 2026 vibekit. All rights reserved.

Form
여러 입력 요소를 묶어 데이터 입력과 제출 흐름을 구성합니다.

프로젝트 업데이트를 이 메일로 받습니다.

Header
페이지 상단에 브랜드, 탐색, 주요 액션을 배치합니다.
VBvibekit
Hero
첫 화면에서 핵심 메시지와 주요 행동을 강하게 전달합니다.
New Release

Build polished UI 2x faster

Reusable shadcn components with practical defaults for product teams.

Hover Card
마우스 오버 시 추가 정보를 작은 카드로 보여줍니다.
Input
텍스트를 입력받는 기본 단일 입력 필드입니다.
Input Group
입력창과 접두/접미 요소를 한 줄로 묶어 표현합니다.
https://
Input OTP
인증 코드처럼 자리수가 고정된 값을 칸 단위로 입력받습니다.
Item
목록형 콘텐츠를 제목·설명·액션 구조로 정리해 보여줍니다.
Pro Plan
Popular

Best for teams that need collaboration.

Kbd
키보드 단축키를 키캡 형태로 읽기 쉽게 표시합니다.
⌘K
Label
입력 요소의 의미를 명확히 전달하는 라벨입니다.
Menubar
앱 상단 메뉴바 형태로 기능을 계층적으로 제공합니다.
Native Select
브라우저 기본 select를 일관된 스타일로 사용합니다.
Navigation Menu
사이트 주요 섹션 이동을 위한 내비게이션 메뉴입니다.
Pagination
긴 목록을 페이지 단위로 나눠 탐색하게 합니다.
Popover
트리거 주변에 떠 있는 작은 정보/설정 패널입니다.
Progress
작업 진행률을 막대 형태로 시각적으로 표시합니다.
Upload progress66%
Progress Indicator
로딩/처리 중 상태를 인디케이터로 현재 진행 상황을 알려줍니다.
  1. LOGIN
  2. 2
    CHOOSE INTEREST
  3. 3
    ADD FRIENDS
  4. 4
    VIEW MAP
Radio Group
여러 옵션 중 하나만 선택해야 할 때 사용합니다.
Resizable
패널 경계를 드래그해 영역 크기를 조절합니다.
Left panel
Right panel
Scroll Area
커스텀 스크롤 영역으로 긴 내용을 제한된 공간에 표시합니다.
Select
옵션 목록에서 하나를 선택하는 커스텀 셀렉트입니다.
Separator
콘텐츠 그룹 사이를 시각적으로 구분하는 선입니다.

Account

Manage your account settings.

Sheet
측면에서 열리는 오버레이 패널로 빠른 설정을 제공합니다.
Sidebar
주요 탐색 메뉴를 좌우 고정 영역으로 구성합니다.

Sidebar content area

Skeleton
로딩 중 콘텐츠 자리를 미리 보여줘 체감 대기 시간을 줄입니다.
Slider
값 범위를 드래그로 직관적으로 조절합니다.
Sonner
간결한 토스트 알림을 다양한 상태로 빠르게 표시합니다.
Spinner
로딩 진행 중임을 회전 애니메이션으로 알려줍니다.
Switch
켜기/끄기 같은 이진 상태를 즉시 전환합니다.
Table
행과 열로 정형 데이터를 명확하게 보여줍니다.
InvoiceStatusAmount
INV001Paid$250.00
INV002Pending$150.00
Tabs
관련 콘텐츠를 탭으로 나눠 한 화면에서 전환합니다.
Make changes to your account here.
Textarea
여러 줄 텍스트 입력을 받을 때 사용합니다.
Toast
작업 결과를 짧게 알려주는 일시 알림 메시지입니다.
Toggle
선택/해제 상태를 버튼 형태로 전환합니다.

Click to switch notification state.

Toggle Group
여러 토글을 묶어 단일 또는 복수 선택을 처리합니다.
Tooltip
요소에 마우스를 올렸을 때 짧은 도움말을 보여줍니다.
Typography
문서형 텍스트의 제목·본문·목록 스타일을 표준화합니다.

The Joke Tax Chronicles

Once upon a time, in a far-off land, there was a very lazy king.

  • Readable hierarchy
  • Balanced line-height