OpenSkillIndex← back to search
claude-code

Awesome-omni-skill 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.

install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/shadcn-svelte" ~/.claude/skills/diegosouzapw-awesome-omni-skill-shadcn-svelte && rm -rf "$T"
manifest: skills/development/shadcn-svelte/SKILL.md
source content

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

# 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

<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

Related Skills

  • tailwind - Styling
  • svelte-kit - Framework