skills.rest
antstanley
antstanleyCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-svelte

Guide shadcn-svelte component installation, theming, and dark mode integration.

6|1|Updated Jan 20, 2026
Search Tags:#svelte#shadcn-svelte#ui-components#dark-mode#tailwind-v4#formsnap#superforms
One-click install
npx skills add https://github.com/antstanley/shadcn-svelte-skill --skill shadcn-svelte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-svelte
Source: https://github.com/antstanley/shadcn-svelte-skill/tree/main/shadcn-svelte
Command: npx skills add https://github.com/antstanley/shadcn-svelte-skill --skill shadcn-svelte

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides developers to implement and theme shadcn-svelte UI components.

Core Features & Use Cases

  • Provides expert guidance for installing components via the CLI, wiring up dark mode with mode-watcher, and applying Tailwind v4 theming.
  • Walks through forms integration with Formsnap and sveltekit-superforms, component registries, and building cohesive design systems.
  • Offers migration guidance for Svelte v5 and Tailwind v4 to streamline adoption in real projects.

Quick Start

Install and configure shadcn-svelte in your project, then scaffold key components and theming.

Frequently Asked Questions about shadcn-svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install and configure shadcn-svelte UI components in a SvelteKit project?▼

Install shadcn-svelte UI components in SvelteKit by using the CLI for component registration, wiring up dark mode with mode-watcher, and applying Tailwind v4 theming. This process also supports Astro and Vite projects for cohesive design systems.

What's the best way to add dark mode to Svelte components using mode-watcher?▼

Add dark mode to Svelte components by integrating mode-watcher during the shadcn-svelte component setup. This approach ensures consistent theme application across your SvelteKit, Astro, or Vite project while leveraging Tailwind v4 theming.

Does shadcn-svelte work with Tailwind v4 and Svelte v5?▼

Yes, shadcn-svelte works with Tailwind v4 and Svelte v5, offering specific migration guidance to streamline adoption. This ensures your UI components remain compatible with modern Svelte stacks and updated styling frameworks.

How do I integrate forms in Svelte using Formsnap and sveltekit-superforms?▼

Integrate forms in Svelte by combining Formsnap and sveltekit-superforms within your shadcn-svelte UI components. This integration provides robust form handling and validation directly within your SvelteKit project.

Can I use shadcn-svelte components across different Svelte stacks like Astro and Vite?▼

Yes, you can use shadcn-svelte components across SvelteKit, Astro, and Vite projects. The implementation process ensures consistent theming, CLI installation, and component registration regardless of your chosen modern Svelte stack.

How does Tailwind v4 theming apply to shadcn-svelte UI components?▼

Tailwind v4 theming applies to shadcn-svelte UI components by configuring design tokens during the CLI setup. This ensures cohesive styling across all registered components and supports seamless dark mode integration.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
linehaul-ailinehaul-ai
4

shadcn-svelte-skill

Install and customize shadcn-svelte UI components in SvelteKit projects.

Official
Intermediate
xbg-solutionsxbg-solutions

shadcn-svelte

Configure shadcn-svelte components and registries in SvelteKit projects.

Official
Advanced
hasnahasna

shadcn-svelte

Provide 36 Tailwind CSS-styled shadcn-svelte components for json-render catalogs.

Official
Intermediate