Can I use shadcn-ui with Remix?

Yes, shadcn-ui is fully compatible with Remix as it is a collection of React components built on Radix UI and Tailwind CSS.

Does the shadcn CLI support Remix?

Yes, the CLI supports Remix, but you must manually ensure your directory paths in components.json align with the app/ directory structure.

Will I face SSR issues with shadcn-ui components?

No, because shadcn-ui uses Radix UI primitives which are designed to handle server-side rendering and hydration correctly.

Do I need to change my Vite config?

You need to ensure that your Vite path aliases match the aliases defined in your tsconfig.json so the CLI can find your utilities folder.

Shadcn/ui+Remix V2

Compatibility analysis and integration guide

Shadcn/ui

Remix V2

Compatible

Score:85/100

Fully compatible but requires manual configuration of Tailwind CSS and path aliases within the Remix Vite environment.

Technical Analysis

Shadcn-ui is not a dependency but a source-code distribution model. Since it relies on Radix UI and Tailwind CSS, it is inherently compatible with Remix's React-based architecture. The primary friction point is the default folder structure; shadcn-ui originally targeted Next.js conventions, while Remix uses an app/ directory by default.

To ensure a smooth developer experience, you must align the Vite path aliases with your tsconfig.json. Specifically, the @/* alias must be resolved by Vite to the app/ folder. Once the components.json file is correctly mapped to app/components and app/lib, the CLI works seamlessly for adding new components without manual file moves.

Known Issues (2)

1Default Path Misalignment

The shadcn CLI may default to a 'components/' directory at the root, whereas Remix projects keep everything inside 'app/'.

Workaround

Update your 'components.json' file to set 'aliases' to 'app/components' and 'app/lib' respectively.

2Vite Alias Resolution

Remix's Vite compiler might not recognize the '@' symbol used by shadcn by default, leading to import errors.

Workaround

Install 'vite-tsconfig-paths' and add it to your 'vite.config.ts' plugins array to automatically sync Vite aliases with your TypeScript configuration.

Best Use Cases

Building high-performance SaaS dashboards with Remix and Radix UI primitives.
Implementing accessible design systems in Remix using Tailwind CSS.
Rapidly prototyping UI components using the shadcn CLI within a Remix project.
Developing enterprise-grade web applications that require SSR-safe UI components.

Frequently Asked Questions

Share this Badge

Add this compatibility badge to your GitHub README or website.

GitHub README (Markdown)

[![Shadcn/ui + Remix V2](https://devradar.dev/api/v1/badge/shadcn-ui-with-remix-v2-setup.svg)](https://devradar.dev/check/shadcn-ui-with-remix-v2-setup)

Website (HTML)

<a href="https://devradar.dev/check/shadcn-ui-with-remix-v2-setup"><img src="https://devradar.dev/api/v1/badge/shadcn-ui-with-remix-v2-setup.svg" alt="Shadcn/ui + Remix V2" /></a>

Direct Badge URL

https://devradar.dev/api/v1/badge/shadcn-ui-with-remix-v2-setup.svg

Get Started

Architecture isn't a gamble.
It's a calculation.

Eliminate incompatible technologies and build a defensible tech stack.

Launch Architect Wizard

No assumptions. No account required. Deterministic validation.