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
Decision gist · record as of 2026-02-13
shadcn-svelte-inertia bridges shadcn-svelte components to Inertia Rails by swapping SvelteKit APIs for Inertia patterns. 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.
Use it when
- shadcn-svelte-inertia teaches binding shadcn-svelte form inputs to Inertia Form objects using standard name attributes.
- Yes.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
inertia-rails/skills/shadcn-svelte-inertia
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Integrate shadcn-svelte components with Inertia Rails forms and dialogs”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill shows how to wire shadcn-vue UI components into Inertia Rails Vue 3 applications, replacing Nuxt-specific patterns with Inertia equivalents. Learn to bind form inputs via name attributes, manage dialogs with router state, render server-sorted tables, and display flash toasts—plus avoid common pitfalls like v-model conflicts and frozen computed values.
shadcn-inertia teaches you how to use shadcn/ui components in Inertia Rails React applications by adapting Next.js examples. It replaces shadcn's form components and react-hook-form with Inertia's Form component, removes Next.js directives and APIs, and covers dialogs, tables, toasts, and dark mode setup.
Build forms in Inertia.js + Rails using the `<Form>` component for simple create/edit workflows or `useForm` for multi-step wizards and dynamic fields. Automatic CSRF token handling, error mapping, file upload detection, and progress tracking eliminate the need for external form libraries. React, Vue, and Svelte examples included.
Inertia Rails Setup detects your frontend framework (React, Vue, or Svelte) and serialization layer from your project files, then recommends and installs complementary libraries like alba-inertia, js-routes, pagy, and shadcn components. It generates a CLAUDE.md configuration block that tells Claude which skill patterns apply to your specific stack.
Inertia Rails Pages provides patterns for constructing pages that maintain layout state across navigation, derive UI from URL parameters server-side, and use client-side router methods to update props without full reloads. It covers persistent layouts, prefetching, partial data refresh, and deferred component rendering across React, Vue, and Svelte.
Inertia Coder guides you through building modern single-page applications that combine Inertia.js with Rails and your choice of React, Vue, or Svelte. It covers controller setup, page component patterns, form handling with the useForm hook, shared data management, and client-side routing—all without the complexity of separate APIs.
More skills inertia-rails-architecture (MIT) · inertia-rails-typescript (MIT) · shadcn (MIT) · inertia-rails-controllers (MIT)