shadcn-svelte-inertia
Adapt shadcn-svelte (bits-ui) components for Inertia.js + Rails + Svelte apps by replacing SvelteKit patterns with Inertia equivalents. Wire inputs to Inertia Form via name attributes, manage dialogs and tables with Inertia router, and configure flash-based toasts with Rails initializers.
shadcn-svelte-inertia bridges shadcn-svelte components to Inertia Rails by swapping SvelteKit APIs for Inertia patterns.
AI-generated summary based on this skill's SKILL.md
Install
inertia-rails/skills/shadcn-svelte-inertia
git clone https://github.com/inertia-rails/skills
cp -r skills/skills/shadcn-svelte-inertia ~/.claude/skills/shadcn-svelte-inertianpx skillfed install inertia-rails/skills/shadcn-svelte-inertiaFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use shadcn-svelte with Inertia.js?
shadcn-svelte-inertia adapts shadcn-svelte (bits-ui) components for Inertia.js + Rails + Svelte by replacing SvelteKit patterns with Inertia equivalents. Wire inputs to Inertia Form via name attributes, manage dialogs and tables with the Inertia router, and configure flash-based toasts with Rails initializers. The skill bridges the gap between SvelteKit examples and Inertia's server-driven architecture.
How do I wire shadcn-svelte inputs to Inertia Form with name attributes?
shadcn-svelte-inertia teaches binding shadcn-svelte form inputs to Inertia Form objects using standard name attributes. Each input component receives a name prop that maps to your Inertia form data structure, enabling automatic validation, error display, and submission handling. This pattern replaces SvelteKit's form actions with Inertia's server-side request lifecycle.
Can shadcn-svelte components work in Inertia Rails apps without SvelteKit?
Yes. shadcn-svelte-inertia specializes in adapting shadcn-svelte for Inertia.js + Rails + Svelte setups that don't use SvelteKit. The skill provides patterns for integrating shadcn-svelte dialogs, tables, selects, and other components directly into Inertia page components, using Rails as your backend and Inertia as your request router.
How do I implement dark mode and flash-based toasts in Inertia Svelte apps?
shadcn-svelte-inertia covers configuring dark mode to avoid flash-of-unstyled-content (FOUC) and wiring flash messages from Rails into toast notifications. Use Sonner or similar toast libraries with Inertia's flash prop to display server-side notices. Configure your Rails initializers and Svelte layout to sync theme state and consume flash data on page visits.
What patterns does shadcn-svelte-inertia use for dialogs and tables?
shadcn-svelte-inertia manages shadcn-svelte dialogs and tables within Inertia's router lifecycle. Dialogs trigger Inertia navigation or form submissions; tables use server-side sorting and pagination via Inertia query params. The skill replaces SvelteKit's load functions with Inertia page props and reactive $derived stores for handling server data.
How do I troubleshoot Svelte reactivity and form submission issues?
shadcn-svelte-inertia addresses common reactivity pitfalls when binding shadcn-svelte inputs to Inertia Form, including bind:value conflicts and processing state timing. The skill covers using $derived for reactive page props, ensuring name attributes sync with form data, and debugging form submission flow through Inertia's request lifecycle and Rails validations.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn-svelte for Inertia Rails
shadcn-svelte (bits-ui) patterns adapted for Inertia.js + Rails + Svelte. NOT SvelteKit.
Before using a shadcn-svelte example, ask:
- Does it use SvelteKit-specific APIs? (goto, $app/navigation, load functions, +page.svelte) → Replace with Inertia router, server props, page components
- Does it use sveltekit-superforms + zod? → Replace with Inertia <Form> + name attributes. Inertia handles CSRF, errors, redirects, processing state.
Key Differences from SvelteKit Defaults
| shadcn-svelte default (SvelteKit) | Inertia equivalent |
|---|---|
goto() from $app/navigation |
router from @inertiajs/svelte |
load functions |
Server-rendered |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/shadcn-svelte-inertia/SKILL.md
skills/shadcn-svelte-inertia/references/components.md
skills/shadcn-svelte-inertia/references/flash-toast.md