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
Install
inertia-rails/skills/shadcn-inertia
git clone https://github.com/inertia-rails/skills
cp -r skills/skills/shadcn-inertia ~/.claude/skills/shadcn-inertianpx skillfed install inertia-rails/skills/shadcn-inertiaFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/shadcn-inertia/SKILL.md
skills/shadcn-inertia/references/components.md
skills/shadcn-inertia/references/flash-toast.md