svelte-components

spences10's avatarfrom spences10

Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.

⭐107stars🔀8forks📁View on GitHub🕐Updated Jan 1, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides optimized Svelte component patterns and best practices to streamline modern web development. It offers expert guidance on implementing headless UI libraries like Bits UI, Ark UI, and Melt UI, while providing robust solutions for web components, advanced form patterns, and seamless third-party integrations to ensure high-quality, accessible, and performant Svelte applications.

Use Cases

  • Building Accessible UI Libraries: Implementing headless components using Bits UI or Melt UI to create consistent, accessible design systems.
  • Web Component Development: Configuring Svelte to export custom elements for use across different frameworks or vanilla HTML environments.
  • Advanced Form Handling: Utilizing the 'form' attribute and defaultValue patterns to manage complex form layouts and resets efficiently.
  • Component Architecture: Applying proven patterns for snippets and rich HTML wrapping to build flexible and reusable Svelte components.
namesvelte-components
# IMPORTANTKeep description on ONE line for Claude Code compatibility
descriptionSvelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.

Svelte Components

Quick Start

Component libraries: Bits UI (headless) | Ark UI | Melt UI (primitives)

Form trick: Use form attribute when form can't wrap inputs:

<form id="my-form" action="/submit"><!-- outside table --></form>
<table>
	<tr>
		<td><input form="my-form" name="email" /></td>
		<td><button form="my-form">Submit</button></td>
	</tr>
</table>

Web Components

// svelte.config.js
export default {
	compilerOptions: {
		customElement: true,
	},
};

<!-- MyButton.svelte -->
<svelte:options customElement="my-button" />

<button><slot /></button>

Reference Files

Notes

  • Bits UI 1.0: flexible, unstyled, accessible components for Svelte
  • Form defaultValue attribute enables easy form resets
  • Use snippets to wrap rich HTML in custom select options
  • Last verified: 2025-01-14