How to install shadcn/ui in Remix applications. Complete setup for full-stack React with server-side rendering.

How to install shadcn/ui in Remix

Remix brings server-side rendering, nested routing, and progressive enhancement to React. Combined with shadcn/ui, you get a full-stack setup that's fast by default.

Full setup guide

Create a Remix app

npx create-remix@latest my-app
cd my-app

Choose your preferences when prompted. The TypeScript template is recommended for better component prop IntelliSense.

Run the shadcn/ui CLI

npx shadcn@latest init

The CLI detects Remix and configures everything correctly—path aliases, component location, and CSS setup.

Install Tailwind dependencies

pnpm add -D tailwindcss@latest autoprefixer@latest

Create postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Configure Remix for Tailwind

Update remix.config.js:

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  tailwind: true,
  postcss: true,
}

This tells Remix to process your CSS with PostCSS and Tailwind.

Import styles in root

// app/root.tsx
import styles from "./tailwind.css?url"

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
]

The ?url suffix is Remix's way of handling CSS imports.

Add components and build

npx shadcn@latest add button form card

Use them in your routes:

// app/routes/_index.tsx
import { Button } from "~/components/ui/button"
import { Card } from "~/components/ui/card"

export default function Index() {
  return (
    <Card className="m-8 p-6">
      <h1 className="text-2xl font-bold mb-4">Welcome to Remix</h1>
      <Button>Get started</Button>
    </Card>
  )
}

Project structure

root.tsx

tailwind.css

remix.config.js

components.json

Deployment

Remix apps with shadcn/ui deploy anywhere:

Platform	Setup	Best For
Vercel	One-click deploy with adapter	Familiar Vercel workflow
Netlify	Great Remix support	Powerful build features
Fly.io	Remix's recommended platform	Global edge deployment
Cloudflare Pages	Edge deployment	Fast worldwide performance
Node.js	Any Node hosting works	Traditional hosting

Since components are in your codebase, there's no special deployment config needed.

Common issues

"Cannot find module '~/components/ui/button'"

Check your tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

CSS not loading

Make sure you're importing styles with the ?url suffix:

import styles from "./tailwind.css?url"

Hydration mismatches

Usually happens when server and client render different content. Use Remix's built-in features like useFetcher instead of client-only state when possible.

Next steps

Now that Remix + shadcn/ui is set up:

Browse official components for forms, tables, and UI elements
Add charts for data visualization
Explore community components for extended functionality
Add useful hooks to enhance your components
Use pre-built blocks to quickly build common layouts

Remix's server-first approach combined with shadcn/ui's flexible components gives you a powerful, accessible, and fast-by-default stack.

Install shadcn/ui Remix