shadcn-inertia

仓库: inertia-rails/skills
安装量: 53
排名: #14015

安装

npx skills add https://github.com/inertia-rails/skills --skill shadcn-inertia

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

+ 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 , , 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 Inertia component FormField , FormItem , FormMessage Plain + errors.field next-themes CSS class strategy + @custom-variant useRouter() (Next) router from @inertiajs/react next/link from @inertiajs/react next/head from @inertiajs/react NEVER use shadcn's FormField , FormItem , FormLabel , FormMessage components — they depend on react-hook-form's useFormContext internally and will crash without it. Use plain shadcn Input / Label / Select with name attributes inside Inertia , and render errors from the render function's errors object (see examples below). Setup npx shadcn@latest init . add @/ resolve aliases to tsconfig.json if not present, Do NOT add @/ resolve aliases to vite.config.ts — vite-plugin-ruby already provides them. shadcn Inputs in Inertia Use plain shadcn Input / Label / Button with name attributes inside Inertia . See inertia-rails-forms skill for full API — this section covers shadcn-specific adaptation only. The key pattern: Replace shadcn's FormField / FormItem / FormMessage with plain components + manual error display: // shadcn error display pattern (replaces FormMessage): < Label htmlFor = " name " > Name < Input id = " name " name = " name " /> { errors . name && < p className = " text-sm text-destructive " > { errors . name } } — shadcn examples omit it Dialog closes unexpectedly Missing or wrong onOpenChange handler Use onOpenChange={(open) => { if (!open) closeHandler() }} Flash of wrong theme (FOUC) Missing inline