shadcn-svelte
shadcn-svelte component library - install Button, Card, Dialog, Form, Table components with shadcn design tokens. Use for pre-built accessible UI components. For raw Tailwind CSS use tailwind skill. For UX design principles use frontend-design skill.
来源信息
- 仓库
- digi4care/opencode-mastery
- 最近来源活动
- 2026年2月21日 09:55
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 0
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
100 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- shadcn-svelte
- description
- shadcn-svelte component library - install Button, Card, Dialog, Form, Table components with shadcn design tokens. Use for pre-built accessible UI components. For raw Tailwind CSS use tailwind skill. For UX design principles use frontend-design skill.
- license
- MIT
- compatibility
- opencode
- metadata
- {"author":"OpenCode Community","version":"2.0","source":"https://github.com/huntabyte/shadcn-svelte"}
# shadcn-svelte
shadcn-svelte is a Svelte port of shadcn-ui - accessible UI components built with Tailwind CSS and Bits UI.
## When to Use
- Installing shadcn-svelte components (Button, Dialog, Card, etc.)
- Setting up theming with Tailwind CSS v4
- Configuring dark mode with mode-watcher
- Building accessible forms with Bits UI
- Troubleshooting component issues
## Quick Reference
```bash
# Install shadcn-svelte
bunx shadcn-svelte@latest init
# Add components
bunx shadcn-svelte@latest add button
bunx shadcn-svelte@latest add dialog
bunx shadcn-svelte@latest add card
# Add form components
bunx shadcn-svelte@latest add form
bunx shadcn-svelte@latest add input
bunx shadcn-svelte@latest add select
```
```svelte
<script lang="ts">
import { Button } from "$lib/components/ui/button";
import * as Card from "$lib/components/ui/card";
</script>
<Card.Root>
<Card.Header>
<Card.Title>Title</Card.Title>
<Card.Description>Description</Card.Description>
</Card.Header>
<Card.Content>
Content here
</Card.Content>
<Card.Footer>
<Button>Click me</Button>
</Card.Footer>
</Card.Root>
```
## Key Concepts
- **Components** - Installed to `$lib/components/ui/`
- **Bits UI** - Headless primitives for accessibility
- **Tailwind v4** - Styling with CSS-first config
- **Dark Mode** - Via `mode-watcher` package
## References
- [Design Tokens](references/design-tokens.md) - **CRITICAL: Read before styling**
- [Installation](references/documentation/Installation_e2993602e4.md)
- [Dark Mode Setup](references/documentation/Dark_Mode_ed9cf28a2a.md)
- [Component Categories](references/registry.json)
- [Troubleshooting](references/documentation/FAQ_18bce2f4b4.md)
- [Form Components](references/documentation/Formsnap_7e47279aa6.md)
## Related Skills
- tailwind - Styling
- svelte-kit - Framework
在 GitHub 查看