SvelteKit shadcn-svelte 完整指南：组件安装、使用原则与分类列表

sveltekit-shadcn-guidline by dev-goraebap/sveltekit-custom-skills

1 周安装量

GitHub

安装命令

npx skills add https://github.com/dev-goraebap/sveltekit-custom-skills --skill sveltekit-shadcn-guidline

UI组件库 Svelte 前端架构

🇨🇳中文介绍

shadcn-svelte 指南

shadcn-svelte 是一个基于 TypeScript、Tailwind CSS 和 Bits UI 构建的高可访问性 Svelte/SvelteKit 组件集合。你可以通过 CLI 安装组件，并直接修改源代码。

使用原则

此技能的主要目的是帮助你在构建界面时选择合适的组件并正确使用它们。请参考下面的组件列表，为任务推荐合适的组件并编写代码。

当需要实际添加组件时，请遵循下面的“组件安装”步骤。

组件安装

1. 检查 shadcn-svelte 配置

在添加组件之前，请确认你的工作区已初始化 shadcn-svelte：

ls components.json

如果文件存在 → 配置已完成。直接进入添加组件步骤。
如果文件不存在 → 请直接要求用户进行初始化：

shadcn-svelte 尚未初始化。 请先在终端中使用你想要的配置运行以下命令：
npx shadcn-svelte@latest init
推荐配置：

Base color: Slate

Global CSS: src/routes/+layout.svelte

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

2. 选择组件添加方式

向用户确认安装方式：

A. 仅安装所需组件（推荐）

npx shadcn-svelte@latest add button
npx shadcn-svelte@latest add dialog card

B. 批量安装所有组件

npx shadcn-svelte@latest add --all

# 跳过确认提示
npx shadcn-svelte@latest add --all --yes

# 覆盖现有文件
npx shadcn-svelte@latest add --all --overwrite

选项	说明
`-a, --all`	安装所有组件
`-y, --yes`	跳过确认提示
`-o, --overwrite`	覆盖现有文件
`--no-deps`	跳过安装包依赖

import { Button } from "$lib/components/ui/button/index.js";
import { Dialog } from "$lib/components/ui/dialog/index.js";

Button: 按钮
Button Group: 将相关按钮分组的容器
Calendar: 日期选择日历
Checkbox: 复选框
Combobox: 自动完成输入 + 命令面板
Date Picker: 包含范围和预设的日期选择器
Field: 标签 + 控件 + 帮助文本组合的表单字段
Formsnap: Formsnap + Superforms + Zod 表单构建
Input: 文本输入字段
Input Group: 为输入字段附加额外信息/操作
Input OTP: OTP 输入（支持复制/粘贴）
Label: 可访问性标签
Native Select: 样式化的原生 select
Radio Group: 单选按钮组（单项选择）
Select: 下拉选择（按钮触发）
Slider: 范围值滑块
Switch: 切换开关
Textarea: 多行文本输入

Accordion: 可折叠/展开的手风琴
Breadcrumb: 显示当前位置的路径
Navigation Menu: 网站导航菜单
Resizable: 支持键盘的可调整大小面板
Scroll Area: 自定义滚动区域
Separator: 内容分隔线
Sidebar: 可组合的侧边栏
Tabs: 选项卡面板

覆盖层与对话框

Alert Dialog: 需要确认的模态对话框
Command: 命令菜单（⌘K 风格）
Context Menu: 右键上下文菜单
Dialog: 模态对话框
Drawer: 抽屉（移动端友好）
Dropdown Menu: 按钮触发的下拉菜单
Hover Card: 悬停时预览链接
Menubar: 桌面应用风格的菜单栏
Popover: 弹出框
Sheet: 从屏幕边缘滑出的面板
Tooltip: 悬停/焦点提示工具

Alert: 警告框
Badge: 徽章
Empty: 空状态显示
Progress: 进度条
Skeleton: 加载占位符
Sonner: 轻提示通知
Spinner: 加载旋转器

Aspect Ratio: 固定宽高比容器
Avatar: 用户头像（含备用显示）
Card: 包含页眉/内容/页脚的卡片
Carousel: 可滑动轮播（基于 Embla）
Chart: 图表（基于 LayerChart）
Data Table: 数据网格（基于 TanStack Table）
Item: 多用途内容显示
Kbd: 键盘按键显示
Table: 响应式表格
Typography: 标题/段落/列表排版

Collapsible: 可折叠/展开面板
Pagination: 分页
Range Calendar: 日期范围选择日历
Toggle: 开/关切换按钮
Toggle Group: 切换按钮组

🇰🇷한국어

shadcn-svelte 가이드

shadcn-svelte는 TypeScript, Tailwind CSS, Bits UI 기반의 접근성 높은 Svelte/SvelteKit 컴포넌트 모음이다. CLI로 컴포넌트를 설치하고 소스를 직접 수정할 수 있다.

사용 원칙

이 스킬의 주 목적은 화면 구성 시 알맞은 컴포넌트를 선택하고 올바르게 사용하도록 돕는 것 이다. 아래 컴포넌트 목록을 참고해 작업에 적합한 컴포넌트를 추천하고 코드를 작성한다.

컴포넌트를 실제로 추가해야 할 때는 아래 "컴포넌트 설치" 절차를 따른다.

컴포넌트 설치

1. shadcn-svelte 설정 확인

컴포넌트를 추가하기 전에 작업공간에 shadcn-svelte가 초기화되어 있는지 확인한다:

ls components.json

파일이 있으면 → 이미 설정 완료. 바로 컴포넌트 추가로 이동.
파일이 없으면 → 사용자에게 직접 초기화를 요청한다:

shadcn-svelte가 초기화되어 있지 않습니다. 터미널에서 아래 명령어를 원하는 설정으로 먼저 실행해 주세요:
npx shadcn-svelte@latest init
권장 설정:

Base color: Slate

Global CSS: src/routes/+layout.svelte

Import aliases: $lib, $lib/components, $lib/utils, $lib/hooks, $lib/components/ui

완료되면 다시 알려주세요.

초기화 완료 확인 후 컴포넌트 추가로 진행한다.

2. 컴포넌트 추가 방식 선택

사용자에게 설치 방식을 확인한다:

A. 필요한 컴포넌트만 설치 (권장)

npx shadcn-svelte@latest add button
npx shadcn-svelte@latest add dialog card

B. 전체 컴포넌트 일괄 설치

npx shadcn-svelte@latest add --all

# 확인 프롬프트 없이
npx shadcn-svelte@latest add --all --yes

# 기존 파일 덮어쓰기
npx shadcn-svelte@latest add --all --overwrite

주요 CLI 옵션

옵션	설명
`-a, --all`	모든 컴포넌트 설치
`-y, --yes`	확인 프롬프트 건너뜀
`-o, --overwrite`	기존 파일 덮어쓰기
`--no-deps`	패키지 의존성 설치 제외

컴포넌트 임포트

import { Button } from "$lib/components/ui/button/index.js";
import { Dialog } from "$lib/components/ui/dialog/index.js";

컴포넌트 목록

Form & Input (폼 & 입력)

Button: 버튼
Button Group: 관련 버튼을 묶는 그룹
Calendar: 날짜 선택 캘린더
Checkbox: 체크박스
Combobox: 자동완성 입력 + 커맨드 팔레트
Date Picker: 범위/프리셋 포함 날짜 선택기
Field: 레이블 + 컨트롤 + 도움말 조합 폼 필드
Formsnap: Formsnap + Superforms + Zod 폼 구성
Input: 텍스트 입력 필드
Input Group: 입력 필드에 추가 정보/액션 붙이기
Input OTP: OTP 입력 (복사/붙여넣기 지원)
Label: 접근성 레이블
Native Select: 스타일드 네이티브 select
Radio Group: 라디오 버튼 그룹 (단일 선택)
Select: 드롭다운 선택 (버튼 트리거)

Layout & Navigation (레이아웃 & 내비게이션)

Accordion: 펼치고 접는 아코디언
Breadcrumb: 현재 위치 경로 표시
Navigation Menu: 사이트 내비게이션 메뉴
Resizable: 키보드 지원 리사이저블 패널
Scroll Area: 커스텀 스크롤 영역
Separator: 콘텐츠 구분선
Sidebar: 조합 가능한 사이드바
Tabs: 탭 패널

Overlays & Dialogs (오버레이 & 다이얼로그)

Alert Dialog: 확인을 요구하는 모달 다이얼로그
Command: 커맨드 메뉴 (⌘K 스타일)
Context Menu: 우클릭 컨텍스트 메뉴
Dialog: 모달 다이얼로그
Drawer: 드로어 (모바일 친화적)
Dropdown Menu: 버튼 트리거 드롭다운 메뉴
Hover Card: 호버 시 링크 미리보기
Menubar: 데스크탑 앱 스타일 메뉴바
Popover: 팝오버
Sheet: 화면 가장자리 슬라이드 패널
Tooltip: 호버/포커스 툴팁

Feedback & Status (피드백 & 상태)

Alert: 알림 박스
Badge: 배지
Empty: 빈 상태 표시
Progress: 진행률 표시바
Skeleton: 로딩 중 플레이스홀더
Sonner: 토스트 알림
Spinner: 로딩 스피너

Display & Media (표시 & 미디어)

Aspect Ratio: 비율 고정 컨테이너
Avatar: 사용자 아바타 (폴백 포함)
Card: 헤더/콘텐츠/푸터 카드
Carousel: 스와이프 캐러셀 (Embla 기반)
Chart: 차트 (LayerChart 기반)
Data Table: 데이터 그리드 (TanStack Table 기반)
Item: 다목적 콘텐츠 표시
Kbd: 키보드 입력 표시
Table: 반응형 테이블
Typography: 제목/단락/목록 타이포그래피

Misc (기타)

Collapsible: 접기/펼치기 패널
Pagination: 페이지네이션
Range Calendar: 날짜 범위 선택 캘린더
Toggle: 켜기/끄기 토글 버튼
Toggle Group: 토글 버튼 그룹

참고 문서

Weekly Installs

Repository

dev-goraebap/sv…m-skills

First Seen

1 day ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

zencoder1

amp1

cline1

openclaw1

opencode1

cursor1

shadcn UI组件库：36个Radix UI + Tailwind CSS预构建组件，无缝集成json-render

478 周安装

Slider: 범위 값 슬라이더

Switch: 토글 스위치

Textarea: 멀티라인 텍스트 입력