Component

Create Svelte Component

Create a new Svelte 5 component: $ARGUMENTS

Process

1. Check existing components in src/lib/components/ for similar patterns
2. Check shadcn-svelte components in src/lib/components/ui/ — reuse base components
3. Create the component following Svelte 5 runes syntax
4. Add TypeScript props with $props()
5. Use Tailwind for styling — no custom CSS unless absolutely necessary
6. Export from index if it's a shared component

Component Template

<script lang="ts">
  import { Button } from '$lib/components/ui/button';
  import type { ComponentProps } from '$lib/types';

  interface Props {
    title: string;
    variant?: 'default' | 'destructive';
    disabled?: boolean;
    onaction?: (id: string) => void;
  }

  let { title, variant = 'default', disabled = false, onaction }: Props = $props();

  let loading = $state(false);

  const derivedClass = $derived(
    variant === 'destructive' ? 'border-red-500' : 'border-border'
  );

  async function handleClick() {
    loading = true;
    try {
      onaction?.('some-id');
    } finally {
      loading = false;
    }
  }
</script>

<div class="rounded-lg border {derivedClass} p-4">
  <h3 class="text-sm font-medium">{title}</h3>
  <Button {disabled} onclick={handleClick}>
    {#if loading}
      Loading...
    {:else}
      Action
    {/if}
  </Button>
</div>