Shadcn Svelte Management

Svelte Component Management

Primary Focus: Svelte Ecosystem

Specialized in Svelte component libraries and their management:

• shadcn-svelte: Svelte adaptation of shadcn/ui
• Skeleton UI: Modern, accessible Svelte component library
• Melt UI: Headless components for Svelte
• Custom components: Built from scratch with Tailwind CSS

Prerequisites

For Svelte Projects

Verify project setup:

# Check if SvelteKit project
ls src/routes/ src/lib/

For shadcn-svelte Projects

If using shadcn-svelte:

npx shadcn-svelte@latest init

For Skeleton UI Projects

If using Skeleton UI:

npm install @skeletonlabs/skeleton

Quick Add Workflow for Svelte

For simple component additions (e.g., "add a date picker"):

Option 1: shadcn-svelte

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

Option 2: Skeleton UI

npm install @skeletonlabs/skeleton
# Import in app.css: @import '@skeletonlabs/skeleton/theme';

Option 3: Custom Component

Create custom component with Tailwind CSS:

<!-- src/lib/components/DatePicker.svelte -->
<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let value: Date = new Date();
  export let placeholder = 'Select date';

  const dispatch = createEventDispatcher();
</script>

<input
  type="date"
  bind:value
  {placeholder}
  on:change={(e) => dispatch('change', { value: e.target.value })}
  class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
/>

Complex Build Workflow for Svelte

For multi-component features (e.g., "build a login form"), see references/workflows.md.

When to use Complex Build:

• Feature requires 3+ components
• Need component hierarchy planning
• Building complete sections (forms, dashboards, modals)
• Integrating with SvelteKit's form actions and load functions

Svelte-specific considerations:

• Use SvelteKit's form actions for form handling
• Leverage progressive enhancement patterns
• Consider accessibility with Svelte's ARIA support
• Use Svelte stores for state management

Svelte Component Patterns

Common Component Categories

• Forms: form, input, select, checkbox, radio-group, textarea
• Layout: card, dialog, sheet, drawer, tabs, container
• Feedback: alert, toast, skeleton, progress, spinner
• Navigation: button, dropdown-menu, navigation-menu, breadcrumb
• Data Display: table, badge, avatar, accordion, carousel

Svelte-specific Patterns

• Form Actions: Integration with SvelteKit's form handling
• Progressive Enhancement: Works without JavaScript, enhanced with it
• Reactive Components: Using Svelte's reactivity for dynamic UI
• Transitions: Built-in Svelte transitions for smooth animations

Installation Examples

# shadcn-svelte
npx shadcn-svelte@latest add button card form

# Skeleton UI
npm install @skeletonlabs/skeleton
# Add to app.css: @import '@skeletonlabs/skeleton/theme';

# Melt UI
npm install @melt-ui/svelte

After Implementation

Always run audit:

shadcn___get_audit_checklist

Custom Styling & Theming

Shadcn provides structural foundation with default styling. For custom aesthetics:

Svelte Component Library Ecosystem

Primary Libraries

1. shadcn-svelte

npx shadcn-svelte@latest init
npx shadcn-svelte@latest add [component-name]

• Components in: src/lib/components/ui/
• Theme in: src/app.css
• Config: components.json

2. Skeleton UI

npm install @skeletonlabs/skeleton

• Import in: src/app.css → @import '@skeletonlabs/skeleton/theme';
• Components: Import from @skeletonlabs/skeleton
• Theme: CSS variables in src/app.css

3. Melt UI

npm install @melt-ui/svelte

• Headless components
• Build with Tailwind CSS
• Full accessibility support
• Works with SvelteKit

4. Custom Components

• Build from scratch with Tailwind CSS
• Use Svelte transitions and actions
• Integrate with SvelteKit patterns

Customization Strategies

For shadcn-svelte: 1. Modify CSS variables in src/app.css 2. Extend Tailwind config for custom themes 3. Override component styles with class: directives

For Skeleton UI: 1. Use CSS custom properties for theming 2. Leverage Skeleton's theme system 3. Combine with custom Tailwind utilities

For Custom Components: 1. Build with Svelte's component syntax 2. Use Tailwind for styling 3. Add Svelte transitions for animations 4. Ensure accessibility with ARIA attributes

Invoke `frontend-design` skill when:

• User wants unique/distinctive visual style beyond default theme
• Need custom typography, color schemes, or motion effects
• Building landing pages or marketing sites requiring creative design
• User mentions "custom styling", "unique design", "not generic"

Workflow for Svelte projects: 1. Choose appropriate component library (shadcn-svelte, Skeleton, Melt, or custom) 2. Use shadcn-svelte-management patterns adapted for Svelte 3. Invoke frontend-design for visual customization:

• Custom CSS variables in src/app.css
• Tailwind theme extensions in tailwind.config.js
• Svelte transitions and animations
• Typography and color refinements

Customization targets:

• src/app.css - CSS variables, custom fonts, theme imports
• tailwind.config.js - theme colors, fonts, animations
• src/lib/components/ui/ - component-level overrides
• Component-level class: directives for dynamic styling

Complex Build Workflow

For building complete features requiring multiple shadcn components.

Phase 1: Requirements Analysis

Input: User request for a complete feature/section

Steps:

1. Call shadcn___get_project_registries - Note all available registries

2. Break down the request into components needed:

   Example: "login form" needs:
   - Form (validation)
   - Input (email, password)
   - Button (submit)
   - Label (field labels)
   - Card (container)
   - Alert (error messages)

3. For each identified component:

• Call shadcn___search_items_in_registries
• Verify it exists in registry
• Note exact name

4. Output component hierarchy:

   ## Feature: [Name]

   ## Components Required:
   - form (validation and submission)
   - input (email and password fields)
   - button (submit action)
   - card (form container)
   - alert (error display)

   ## Component Hierarchy:
   Card
   └── Form
       ├── Label + Input (email)
       ├── Label + Input (password)
       ├── Button (submit)
       └── Alert (errors)

Phase 2: Component Research

Input: Component list from Phase 1

Steps:

1. For each component:

a. Get implementation details:

   shadcn___view_items_in_registries(items: ["@shadcn/component"])

• Note file dependencies
• Note key props

b. Get examples:

   shadcn___get_item_examples_from_registries(registries, query: "component-demo")

• For forms: get validation examples
• For data: get loading state examples

2. Get installation command for ALL components at once:

   shadcn___get_add_command_for_items(items: ["@shadcn-svelte/form", "@shadcn-svelte/input", ...])

3. Output research summary with:

• Installation commands
• Key imports for each component
• Relevant example code snippets
• Important props to use

Phase 3: Implementation

Input: Requirements + Research from previous phases

Steps:

1. Build implementation following:

• Use EXACT imports from research
• Follow hierarchy from requirements
• Adapt examples to match use case
• Add proper TypeScript types
• Include state management (useState, form hooks)
• Add error handling

2. Run audit:

   shadcn___get_audit_checklist

• Verify best practices followed

3. OUTPUT complete implementation:

<!-- All necessary imports -->
<script lang="ts">
  import { Form, FormControl, FormField } from "$lib/components/ui/form"
  import { Input } from "$lib/components/ui/input"
  import { Button } from "$lib/components/ui/button"

  // Full implementation
</script>

4. Include setup instructions:

• Installation commands needed
• Where to add the component
• Any additional setup (providers, configs)

Example: Login Form

Phase 1 Output:

Components: card, form, input, button, label, alert
Hierarchy: Card > Form > (Label+Input)*2 + Button + Alert

Phase 2 Output:

npx shadcn-svelte@latest add card form input button label alert

Phase 3 Output:

<script lang="ts">
  import { enhance } from '$app/forms';
  import { zodResolver } from "@hookform/resolvers/zod"
  import { useForm } from "react-hook-form"
  import * as z from "zod"
  import { Button } from "$lib/components/ui/button"
  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card"
  import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "$lib/components/ui/form"
  import { Input } from "$lib/components/ui/input"

  const formSchema = z.object({
    email: z.string().email(),
    password: z.string().min(8),
  })

  export let form: HTMLFormElement;

  // SvelteKit form action with progressive enhancement
  const handleSubmit = enhance(() => {
    return async ({ result, data }) => {
      if (result.type === 'success') {
        // Handle successful login
        console.log('Login successful:', data);
      } else {
        // Handle errors
        console.error('Login failed:', result.error);
      }
    };
  });
</script>

<Card>
  <CardHeader>
    <CardTitle>Login</CardTitle>
  </CardHeader>
  <CardContent>
    <form method="POST" action="/login" use:handleSubmit class="space-y-4">
      <div class="space-y-2">
        <label for="email">Email</label>
        <Input
          id="email"
          name="email"
          type="email"
          placeholder="email@example.com"
          required
        />
      </div>
      <div class="space-y-2">
        <label for="password">Password</label>
        <Input
          id="password"
          name="password"
          type="password"
          placeholder="Enter password"
          required
        />
      </div>
      <Button type="submit" class="w-full">Login</Button>
    </form>
  </CardContent>
</Card>