# shadcn-svelte

> shadcn-svelte is a collection of beautifully-designed, accessible components for Svelte and SvelteKit. It is built with TypeScript, Tailwind CSS, and Bits UI primitives. Open Source. Open Code. AI-Ready. It also comes with a command-line tool to install and manage components and a registry system to publish and distribute code.

## Overview

- [소개](https://shadcn-svelte.com/docs/about.md): 훌륭한 오픈소스 프로젝트들로 구동됩니다.
- [변경 로그](https://shadcn-svelte.com/docs/changelog.md): 최신 업데이트 및 공지사항
- [shadcn-svelte](https://shadcn-svelte.com/docs/cli.md): shadcn-svelte CLI를 사용하여 프로젝트에 컴포넌트를 추가하세요.
- [components.json](https://shadcn-svelte.com/docs/components-json.md): 프로젝트 설정 파일입니다.
- [JavaScript](https://shadcn-svelte.com/docs/javascript.md): shadcn-svelte를 JavaScript와 함께 사용하는 방법입니다.
- [레거시 문서](https://shadcn-svelte.com/docs/legacy.md): shadcn-svelte와 Tailwind v3의 레거시 문서를 확인하세요.
- [테마 설정](https://shadcn-svelte.com/docs/theming.md): CSS 변수를 사용하여 애플리케이션의 모양과 느낌을 커스터마이즈하세요.

## Installation

- [Astro](https://shadcn-svelte.com/docs/installation/astro.md): Astro 프로젝트에서 shadcn-svelte를 설정하는 방법입니다.
- [수동 설치](https://shadcn-svelte.com/docs/installation/manual.md): shadcn-svelte를 수동으로 설정하는 방법
- [SvelteKit](https://shadcn-svelte.com/docs/installation/sveltekit.md): SvelteKit 프로젝트에서 shadcn-svelte를 설정하는 방법.
- [Vite](https://shadcn-svelte.com/docs/installation/vite.md): Vite 프로젝트에서 shadcn-svelte를 설정하는 방법입니다.

## Components

### Form & Input

- [Button](https://shadcn-svelte.com/docs/components/button.md): 버튼 또는 버튼처럼 보이는 컴포넌트를 표시합니다.
- [Button Group](https://shadcn-svelte.com/docs/components/button-group.md): 일관된 스타일로 관련 버튼들을 그룹화하는 컨테이너입니다.
- [Calendar](https://shadcn-svelte.com/docs/components/calendar.md): 사용자가 날짜를 선택할 수 있는 캘린더 컴포넌트입니다.
- [Checkbox](https://shadcn-svelte.com/docs/components/checkbox.md): 사용자가 체크와 체크 해제를 전환할 수 있는 컨트롤입니다.
- [Combobox](https://shadcn-svelte.com/docs/components/combobox.md): 자동 완성 입력과 제안 목록이 있는 커맨드 팔레트입니다.
- [Date Picker](https://shadcn-svelte.com/docs/components/date-picker.md): 범위와 프리셋이 있는 날짜 선택기 컴포넌트입니다.
- [Field](https://shadcn-svelte.com/docs/components/field.md): 라벨, 컨트롤, 도움말 텍스트를 결합하여 접근 가능한 폼 필드와 그룹화된 입력을 구성합니다.
- [Formsnap](https://shadcn-svelte.com/docs/components/form.md): Formsnap, Superforms, Zod를 사용한 폼 구축
- [Input](https://shadcn-svelte.com/docs/components/input.md): 폼 입력 필드 또는 입력 필드처럼 보이는 컴포넌트를 표시합니다.
- [Input Group](https://shadcn-svelte.com/docs/components/input-group.md): 입력 또는 텍스트영역에 추가 정보나 액션을 표시합니다.
- [Input OTP](https://shadcn-svelte.com/docs/components/input-otp.md): 복사 붙여넣기 기능을 갖춘 접근 가능한 일회용 비밀번호 컴포넌트입니다.
- [Label](https://shadcn-svelte.com/docs/components/label.md): 컨트롤과 연결된 접근 가능한 라벨을 렌더링합니다.
- [Native Select](https://shadcn-svelte.com/docs/components/native-select.md): 일관된 디자인 시스템과 통합된 스타일이 적용된 네이티브 HTML select 요소입니다.
- [Radio Group](https://shadcn-svelte.com/docs/components/radio-group.md): 라디오 버튼으로 알려진 체크 가능한 버튼 세트로, 한 번에 하나의 버튼만 선택할 수 있습니다.
- [Select](https://shadcn-svelte.com/docs/components/select.md): 버튼으로 트리거되는 옵션 목록을 표시합니다.
- [Slider](https://shadcn-svelte.com/docs/components/slider.md): 사용자가 주어진 범위 내에서 값을 선택하는 입력 컴포넌트입니다.
- [Switch](https://shadcn-svelte.com/docs/components/switch.md): 사용자가 체크됨과 체크 안 됨 사이를 토글할 수 있는 컨트롤입니다.
- [Textarea](https://shadcn-svelte.com/docs/components/textarea.md): 폼 텍스트영역 또는 텍스트영역처럼 보이는 컴포넌트를 표시합니다.

### Layout & Navigation

- [Accordion](https://shadcn-svelte.com/docs/components/accordion.md): 각각 콘텐츠 섹션을 표시하는 상호작용 가능한 제목들의 수직 스택입니다.
- [Breadcrumb](https://shadcn-svelte.com/docs/components/breadcrumb.md): 링크의 계층 구조를 사용하여 현재 리소스로의 경로를 표시합니다.
- [Navigation Menu](https://shadcn-svelte.com/docs/components/navigation-menu.md): 웹사이트를 탐색하기 위한 링크 모음입니다.
- [Resizable](https://shadcn-svelte.com/docs/components/resizable.md): 키보드 지원이 포함된 접근 가능한 크기 조절 패널 그룹 및 레이아웃입니다.
- [Scroll Area](https://shadcn-svelte.com/docs/components/scroll-area.md): 커스텀 크로스 브라우저 스타일링을 위해 기본 스크롤 기능을 강화합니다.
- [Separator](https://shadcn-svelte.com/docs/components/separator.md): 콘텐츠를 시각적 또는 의미론적으로 구분합니다.
- [Sidebar](https://shadcn-svelte.com/docs/components/sidebar.md): 조합 가능하고 테마를 적용할 수 있으며 커스터마이징 가능한 사이드바 컴포넌트입니다.
- [Tabs](https://shadcn-svelte.com/docs/components/tabs.md): 한 번에 하나씩 표시되는 계층화된 콘텐츠 섹션(탭 패널)의 집합입니다.

### Overlays & Dialogs

- [Alert Dialog](https://shadcn-svelte.com/docs/components/alert-dialog.md): 중요한 내용으로 사용자를 중단시키고 응답을 기대하는 모달 대화상자입니다.
- [Command](https://shadcn-svelte.com/docs/components/command.md): 빠르고 조합 가능한 비스타일 커맨드 메뉴 컴포넌트입니다.
- [Context Menu](https://shadcn-svelte.com/docs/components/context-menu.md): 우클릭으로 트리거되는 메뉴를 표시합니다. 작업이나 기능 모음을 사용자에게 제공합니다.
- [Dialog](https://shadcn-svelte.com/docs/components/dialog.md): 기본 창이나 다른 대화상자 위에 오버레이되는 창으로, 아래 콘텐츠를 비활성화합니다.
- [Drawer](https://shadcn-svelte.com/docs/components/drawer.md): Svelte용 드로어 컴포넌트입니다.
- [Dropdown Menu](https://shadcn-svelte.com/docs/components/dropdown-menu.md): 버튼을 통해 트리거되는 액션 또는 기능 집합과 같은 메뉴를 사용자에게 표시합니다.
- [Hover Card](https://shadcn-svelte.com/docs/components/hover-card.md): 링크 뒤에 있는 콘텐츠를 미리 볼 수 있도록 합니다.
- [Menubar](https://shadcn-svelte.com/docs/components/menubar.md): 데스크톱 애플리케이션에서 흔히 볼 수 있는 시각적으로 지속되는 메뉴로, 일관된 명령 세트에 빠르게 접근할 수 있습니다.
- [Popover](https://shadcn-svelte.com/docs/components/popover.md): 버튼으로 트리거되는 포털에 풍부한 콘텐츠를 표시합니다.
- [Sheet](https://shadcn-svelte.com/docs/components/sheet.md): 화면의 주요 콘텐츠를 보완하는 콘텐츠를 표시하기 위해 Dialog 컴포넌트를 확장합니다.
- [Tooltip](https://shadcn-svelte.com/docs/components/tooltip.md): 요소가 키보드 포커스를 받거나 마우스를 올렸을 때 관련 정보를 표시하는 팝업입니다.

### Feedback & Status

- [Alert](https://shadcn-svelte.com/docs/components/alert.md): 사용자의 주의를 끌기 위한 콜아웃을 표시합니다.
- [Badge](https://shadcn-svelte.com/docs/components/badge.md): 배지 또는 배지처럼 보이는 컴포넌트를 표시합니다.
- [Empty](https://shadcn-svelte.com/docs/components/empty.md): 빈 상태를 표시하는 Empty 컴포넌트입니다.
- [Progress](https://shadcn-svelte.com/docs/components/progress.md): 작업의 완료 진행 상황을 나타내는 표시기를 보여주며, 일반적으로 진행률 막대로 표시됩니다.
- [Skeleton](https://shadcn-svelte.com/docs/components/skeleton.md): 콘텐츠가 로딩되는 동안 표시할 플레이스홀더입니다.
- [Sonner](https://shadcn-svelte.com/docs/components/sonner.md): Svelte를 위한 토스트 컴포넌트입니다.
- [Spinner](https://shadcn-svelte.com/docs/components/spinner.md): 로딩 상태를 표시하는 데 사용할 수 있는 인디케이터입니다.

### Display & Media

- [Aspect Ratio](https://shadcn-svelte.com/docs/components/aspect-ratio.md): 원하는 비율로 콘텐츠를 표시합니다.
- [Avatar](https://shadcn-svelte.com/docs/components/avatar.md): 사용자를 나타내기 위한 대체 이미지가 있는 이미지 요소입니다.
- [Card](https://shadcn-svelte.com/docs/components/card.md): 헤더, 콘텐츠, 푸터가 있는 카드를 표시합니다.
- [Carousel](https://shadcn-svelte.com/docs/components/carousel.md): Embla를 사용하여 제작된 모션과 스와이프 기능이 있는 캐러셀입니다.
- [Chart](https://shadcn-svelte.com/docs/components/chart.md): 아름다운 차트. LayerChart로 만들어졌습니다. 앱에 복사하여 붙여넣으세요.
- [Data Table](https://shadcn-svelte.com/docs/components/data-table.md): TanStack Table을 사용하여 구축된 강력한 테이블 및 데이터그리드입니다.
- [Item](https://shadcn-svelte.com/docs/components/item.md): 모든 콘텐츠를 표시하는 데 사용할 수 있는 다용도 컴포넌트입니다.
- [Kbd](https://shadcn-svelte.com/docs/components/kbd.md): 키보드의 텍스트 사용자 입력을 표시하는 데 사용됩니다.
- [Table](https://shadcn-svelte.com/docs/components/table.md): 반응형 테이블 컴포넌트입니다.
- [Typography](https://shadcn-svelte.com/docs/components/typography.md): 제목, 단락, 목록 등을 위한 스타일

### Misc

- [Collapsible](https://shadcn-svelte.com/docs/components/collapsible.md): 패널을 확장하거나 접을 수 있는 인터랙티브 컴포넌트입니다.
- [Pagination](https://shadcn-svelte.com/docs/components/pagination.md): 페이지 탐색, 다음 및 이전 링크가 있는 페이지네이션입니다.
- [Range Calendar](https://shadcn-svelte.com/docs/components/range-calendar.md): 사용자가 날짜 범위를 선택할 수 있는 캘린더 컴포넌트입니다.
- [Toggle](https://shadcn-svelte.com/docs/components/toggle.md): 켜짐 또는 꺼짐 상태를 가질 수 있는 두 가지 상태 버튼입니다.
- [Toggle Group](https://shadcn-svelte.com/docs/components/toggle-group.md): 켜거나 끌 수 있는 두 가지 상태 버튼 세트입니다.

## Dark Mode

- [Astro](https://shadcn-svelte.com/docs/dark-mode/astro.md): Astro 사이트에 다크 모드 추가하기.
- [Svelte](https://shadcn-svelte.com/docs/dark-mode/svelte.md): Svelte 사이트에 다크 모드 추가하기

## Migration

- [Svelte 5](https://shadcn-svelte.com/docs/migration/svelte-5.md): Svelte 4와 Tailwind 3에서 Svelte 5로 마이그레이션하는 방법입니다.
- [Tailwind v4](https://shadcn-svelte.com/docs/migration/tailwind-v4.md): Tailwind v4와 Svelte 5로 shadcn-svelte를 사용하는 방법.

## Registry

- [예제](https://shadcn-svelte.com/docs/registry/examples.md): 레지스트리 아이템 예제: 스타일, 컴포넌트, CSS 변수 등
- [FAQ](https://shadcn-svelte.com/docs/registry/faq.md): 레지스트리 운영에 관한 자주 묻는 질문입니다.
- [시작하기](https://shadcn-svelte.com/docs/registry/getting-started.md): 자신의 컴포넌트 레지스트리를 설정하고 실행하는 방법을 배워보세요.
- [registry-item.json](https://shadcn-svelte.com/docs/registry/registry-item-json.md): 레지스트리 아이템 명세
- [registry.json](https://shadcn-svelte.com/docs/registry/registry-json.md): 컴포넌트 레지스트리 운영을 위한 스키마입니다.