shadcn-inertia
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.
shadcn-inertia adapts shadcn/ui components from Next.js to Inertia Rails React by replacing react-hook-form with Inertia Form and removing Next.js-specific APIs.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-02-13
shadcn-inertia adapts shadcn/ui components from Next.js to Inertia Rails React by replacing react-hook-form with Inertia Form and removing Next.js-specific APIs. 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.
Use it when
- shadcn-inertia shows how to adapt shadcn/ui components from Next.js examples to Inertia Rails React.
- Yes.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
inertia-rails/skills/shadcn-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/ui components in Inertia Rails React applications?
shadcn-inertia teaches you to adapt shadcn/ui components from Next.js examples to work with Inertia Rails React. The skill covers removing Next.js-specific directives and APIs, wiring components to Inertia's Form component instead of react-hook-form, and implementing dialogs, tables, toasts, and dark mode. shadcn-inertia provides patterns for building full-featured UIs without Next.js dependencies.
How to use shadcn in Inertia Rails instead of Next.js?
shadcn-inertia shows how to adapt shadcn/ui components from Next.js examples to Inertia Rails React. Key steps include removing 'use client' directives, replacing react-hook-form with Inertia's Form component for form handling, and adjusting imports and APIs. shadcn-inertia covers component adaptation patterns so you can reuse shadcn's design system in your Rails + React stack.
Can I build forms with shadcn inputs without react-hook-form in Inertia?
Yes. shadcn-inertia teaches building forms by wiring shadcn inputs directly to Inertia's Form component, eliminating the need for react-hook-form. shadcn-inertia covers form field setup, validation, and submission patterns specific to Inertia Rails, allowing you to leverage shadcn's input components with Inertia's native form handling.
How do I implement dialogs, tables, and toasts in shadcn-inertia apps?
shadcn-inertia provides patterns for implementing dialogs, tables, and toasts using shadcn components adapted for Inertia Rails. For toasts, shadcn-inertia covers flash-based notification setup. shadcn-inertia includes examples for dialog navigation, table sorting, and integrating these components with Inertia's request lifecycle.
What is the shadcn-inertia dark mode and flash notification setup?
shadcn-inertia covers dark mode configuration by adapting shadcn's theming to Inertia Rails, typically using Tailwind's dark mode class. For notifications, shadcn-inertia shows how to wire flash messages from Rails to shadcn toast components, creating a seamless notification system that works with Inertia's request cycle.
How do I troubleshoot shadcn component crashes in Inertia Rails?
shadcn-inertia addresses common crashes and form submission issues by covering proper component adaptation, removing Next.js APIs, and ensuring correct Inertia Form integration. shadcn-inertia provides debugging patterns for form validation errors, dialog state management, and component lifecycle issues specific to Inertia Rails React applications.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
shadcn/ui for Inertia Rails
shadcn/ui patterns adapted for Inertia.js + Rails + React. NOT Next.js.
Before using a shadcn example, ask:
- Does it use react-hook-form + zod? → Replace with Inertia <Form> + name attributes. Inertia handles CSRF, errors, redirects, processing state — react-hook-form would fight all of this.
- Does it use 'use client'? → Remove it. Inertia has no RSC — all components are client components.
- Does it use next/link, next/head, useRouter()? → Replace with Inertia <Link>, <Head>, router.
Key Differences from Next.js Defaults
| shadcn default (Next.js) | Inertia equivalent |
|---|---|
'use client' directive |
Remove — not needed (no RSC) |
react-hook-form + zod |
(truncated - see the full file via the links below)
File tree — 3 files
skills/shadcn-inertia/SKILL.md
skills/shadcn-inertia/references/components.md
skills/shadcn-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 › “Adapt shadcn/ui components from Next.js examples to work with Inertia Rails React”
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.
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.
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 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.
Build consistent UIs across full-stack Next.js/NestJS applications using this design system reference. It covers theme configuration, shadcn/ui component patterns, CSS variables, dark mode setup with next-themes, and visual effects like glassmorphism. Extends the generic design system foundation for colors, typography, and spacing.
Configure type-safe shared props, flash messages, and error handling across Inertia Rails with React, Vue, or Svelte using InertiaConfig module augmentation. Define your shared data types once in globals.d.ts and index.ts, then access them globally via usePage() with full TypeScript support. Avoid common pitfalls like interface vs. type constraints and incorrect destructuring patterns.
More skills laravel-inertia-react (MIT) · shadcn-ui (MIT) · Inertia Coder (NOASSERTION) · shadcn-ui (MIT) · Shadcn Ui Expert (unlicensed) · Shadcn Skills (unlicensed) · Shadcn (NOASSERTION) · shadcn (MIT)