Svelte Components

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.jsexport default {	compilerOptions: {		customElement: true,	},};

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

Reference Files

• component-libraries.md [blocked] - Bits UI, Ark UI setup
• web-components.md [blocked] - Building custom elements
• form-patterns.md [blocked] - Advanced form handling

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