Reference guidance on Svelte component patterns, including component libraries, web components, and form handling.
- What it does
- Provides quick-reference instructions for building Svelte components, covering headless component libraries such as Bits UI, Ark UI, and Melt UI, custom element configuration, and form patterns. It points to three reference files for library setup, web components, and advanced form handling. It produces guidance and code snippets rather than generated files.
- When to use it
- Use when working with Svelte components, especially when integrating component libraries, building custom elements, or handling form patterns. It is suited to quick lookups during Svelte front-end work.
- Requirements
- No scripts or special tooling are required; it is instructions and reference documents only. A Svelte project is implied for applying the patterns.
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:
Web Components
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
<!--
PROGRESSIVE DISCLOSURE GUIDELINES:
- Keep this file ~50 lines total (max ~150 lines)
- Use 1-2 code blocks only (recommend 1)
- Keep description <200 chars for Level 1 efficiency
- Move detailed docs to references/ for Level 3 loading
- This is Level 2 - quick reference ONLY, not a manual
-->
