Layout UI and Svelte

At a glance

Keep design decisions shared

A reactive interface still needs consistent labels, spacing, focus rings, and error states. Layout UI centralizes those decisions so a new screen starts with coordinated defaults instead of another collection of one-off styles.

Svelte and SvelteKit solve different layers

Svelte provides the component and reactivity model. SvelteKit supplies application conventions such as routing and rendering. Layout UI supplies neither a reactive state engine nor an application router; it can be evaluated as the visual layer for either a small component or a larger application.

Evaluate a small component first

Begin with a static card or form using documented Layout UI markup. Let Svelte own reactive state and DOM updates. For enhanced controls, verify mounting, cleanup, keyboard behavior, and any server-rendered hydration. The Svelte integration includes a lifecycle-safe dialog action and server-rendered Theme component. Its working form example verifies bindings, reset, cleanup and hydration. Other native components use the shared semantic classes; see the guide for exact coverage.

From a brief to a considered screen

Start with a project settings screen. Tell your AI who it serves, the main action, and what should feel calm, prominent, or compact. Read the AI guide and choose documented components before adding custom styling.

Let Svelte own state and rendering. Follow the integration examples for native elements and dialog behavior; check cleanup when views change.

Refine hierarchy and spacing first, then color and motion. Compare the actual screen at phone and desktop widths, in light and dark mode. Shared defaults provide a starting point; the finished experience still needs review.