Installation: Remix

Core Idea

Simplest installation path: create-remix, shadcn init, shadcn add. Note this guide is specifically for Remix, not React Router (a separate guide/chapter covers that).

Key Concepts

• Import alias difference: Remix imports use ~/components/ui/*, not @/components/ui/* like Next.js/Vite.

Code Examples

npx create-remix@latest my-app
npx shadcn@latest init
npx shadcn@latest add button

import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

• O que demonstra: alias ~/ característico de Remix, diferente do @/ usado em Next/Vite.

Key Takeaways

1. Three-command flow, no manual Tailwind/tsconfig wiring documented here (assumed handled by create-remix + init).
2. Watch for the ~/ vs @/ import alias distinction when copying examples between frameworks.

Connects To

• installation-react-router: the correct guide if using React Router instead of Remix.