// Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.
SvelteKit remote functions guidance. Use for query(), form(), command(), and prerender() patterns in .remote.ts files.
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
| name | svelte-components |
| description | Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration. |
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>
// svelte.config.js
export default {
compilerOptions: {
customElement: true,
},
};
<!-- MyButton.svelte -->
<svelte:options customElement="my-button" />
<button><slot /></button>
defaultValue attribute enables easy form resets