SvelteKit shadcn-svelte 组件库完整指南：安装、配置与使用教程
sveltekit-shadcn-guidline by dev-goraebap/sveltekit-skills
1 周安装量
GitHub安装命令
npx skills add https://github.com/dev-goraebap/sveltekit-skills --skill sveltekit-shadcn-guidline🇨🇳中文介绍
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
🇰🇷한국어
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 开发者，精准高效
