svelte-ui-design

What problem does it solve?

Teams need a reliable way to design and implement Svelte 5 UI components that match Podman Desktop’s design system and work correctly with the project’s runtime conventions, while avoiding regressions from outdated Svelte patterns or mismatched component APIs.

Core Features & Use Cases

• Design-system first component selection: Use @podman-desktop/ui-svelte as the default source for standard UI elements, with guidance on when to create custom components.
• Svelte 5 correctness: Apply Svelte 5 runes ($state, $derived, $effect, $props) instead of legacy Svelte 4 reactive syntax, including common prop patterns.
• Integration with app conventions: Follow routing (tinro hash routes), RPC reactive stores patterns, Tailwind styling conventions using Podman Desktop CSS variables, and upstream-component reuse.
• Practical checklist for new pages: Create UI pages using the right page/layout components (NavPage, FormPage, details patterns) and connect them to backend clients.

Quick Start

Update or create your Svelte component and ensure it uses @podman-desktop/ui-svelte first, follows Svelte 5 runes and props patterns, then registers the page route and navigation entry in App.svelte and Navigation.svelte.