Using Shadcn UI with Astro, Remix, and Other React Frameworks

Shadcn UI was built with Next.js in mind. The CLI scaffolds components into a Next.js project, the documentation assumes App Router conventions, and most examples use server components. But the component system underneath is just React, Radix UI, and Tailwind CSS — none of which require Next.js to function.

That means developers working with Astro, Remix, Vite-based React setups, and even non-React frameworks like Vue and Svelte can use Shadcn UI or one of its community ports. The setup is different for each, but the end result is the same: accessible, well-designed components you own and control.

This guide covers how to integrate Shadcn UI into the most popular alternatives to Next.js, what community ports exist for Vue and Svelte, and how SERP Blocks provides production-ready code in Next.js, Astro, and Vue for all 1,200+ blocks in the library.

Why Shadcn UI Works Outside Next.js

Before diving into specific framework setups, it helps to understand why Shadcn UI is portable in the first place. Unlike traditional component libraries that ship as npm packages, Shadcn UI copies component source code directly into your project. The components depend on three things:

1. Radix UI primitives — headless, accessible React components

2. Tailwind CSS — utility-first styling

3. A utility function (cn) — a small wrapper around clsx and tailwind-merge

None of these dependencies are tied to Next.js. If your framework supports React and Tailwind CSS, the components will work. The only Next.js-specific parts are things like next/image, next/link, and server component patterns — all of which are easy to swap out.

Setting Up Shadcn UI in Astro

Astro has become one of the most popular frameworks for content-heavy sites, documentation, and marketing pages. It supports multiple UI frameworks through its island architecture, and React is a first-class citizen.

Step 1: Create an Astro Project with React

If you're starting fresh, scaffold a new Astro project and add the React integration:

npm create astro@latest my-project
cd my-project
npx astro add react
npx astro add tailwind

This gives you a working Astro project with React component support and Tailwind CSS configured.

Step 2: Initialize Shadcn UI

Run the Shadcn CLI init command:

npx shadcn@latest init

The CLI will detect your project structure and ask configuration questions. For Astro projects, you will typically set:

• Style: Default or New York

• Base color: Your preference

• CSS file path: src/styles/globals.css

• Components path: src/components/ui

The CLI now has built-in Astro support, so it handles most of the configuration automatically.

Step 3: Add Components

Once initialized, add components the same way you would in Next.js:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog

Step 4: Use Components in Astro Pages

In your .astro files, import React components with the client:load or client:visible directive for interactive components:

---
import { Button } from '../components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
---

<Card client:load>
  <CardHeader>
    <CardTitle>Interactive Card</CardTitle>
  </CardHeader>
  <CardContent>
    <Button client:load>Click me</Button>
  </CardContent>
</Card>

Static components that don't need JavaScript on the client can be rendered without a client directive, which is one of Astro's biggest performance advantages.

Astro-Specific Considerations

There are a few things to keep in mind when using Shadcn UI with Astro:

• Client directives matter. Components like Dialog, DropdownMenu, and Accordion need client:load or client:visible because they rely on JavaScript interactivity.

• Static rendering by default. Astro strips JavaScript by default, which is great for performance but means you need to be intentional about which components get hydrated.

• Image handling. Replace any next/image usage with Astro's built-in <Image> component or standard <img> tags.

• Routing. Replace next/link with standard anchor tags or Astro's routing conventions.

Setting Up Shadcn UI in Remix

Remix is a full-stack React framework focused on web standards, progressive enhancement, and nested routing. Since Remix is React through and through, Shadcn UI components work with minimal adjustment.

Step 1: Create a Remix Project with Tailwind

npx create-remix@latest my-project
cd my-project
npm install -D tailwindcss @tailwindcss/vite

Configure Tailwind in your vite.config.ts and import the CSS in your root route.

Step 2: Initialize Shadcn UI

npx shadcn@latest init

Point the CSS file to your Remix stylesheet location and set the components path. The CLI supports Vite-based projects, which covers modern Remix setups.

Step 3: Adjust for Remix Conventions

The main differences from Next.js are routing and data loading:

• Replace next/link with Remix's <Link>. Both accept a to prop, so this is usually a find-and-replace.

• Replace next/image with standard <img> tags or a Remix-compatible image optimization solution.

• Data loading uses loader functions instead of server components. Components that display dynamic data will pull from Remix loaders via useLoaderData().

Step 4: Handle Form Components

Remix has its own form handling with progressive enhancement via the <Form> component. You can use Shadcn UI form components inside a Remix <Form>:

import { Form } from "@remix-run/react";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";

export default function ContactPage() {
  return (
    <Form method="post">
      <Label htmlFor="email">Email</Label>
      <Input id="email" name="email" type="email" />
      <Button type="submit">Subscribe</Button>
    </Form>
  );
}

This gives you the visual polish of Shadcn UI with Remix's built-in progressive enhancement — the form works even without JavaScript.

Shadcn UI with Vite (Plain React)

If you're using Vite with React directly — no meta-framework, just react and react-dom — Shadcn UI works perfectly. This is actually one of the simplest setups because there are no framework-specific conventions to worry about.

npm create vite@latest my-project -- --template react-ts
cd my-project
npm install
npx shadcn@latest init

The CLI detects Vite projects and configures path aliases and Tailwind automatically. From there, adding components is identical to the Next.js workflow. The only thing you lose is server-side rendering, which is a Vite-React trade-off regardless of which component library you use.

Vue: shadcn-vue

For Vue developers, the community has built shadcn-vue, a faithful port of Shadcn UI built on Radix Vue (now Reka UI) primitives instead of Radix React. It follows the same philosophy — components are copied into your project, styled with Tailwind CSS, and fully customizable.

Getting Started with shadcn-vue

npx shadcn-vue@latest init
npx shadcn-vue@latest add button card dialog

The CLI works the same way as the React version. Components are generated as .vue single-file components with TypeScript support.

Key Differences from React Shadcn UI

• Template syntax. Components use Vue's template syntax with v-bind, v-model, and slots instead of JSX and props.

• Reactivity. State management uses Vue's ref() and reactive() instead of useState.

• Underlying primitives. Components are built on Reka UI (formerly Radix Vue) rather than Radix React, but the accessibility behavior and API surface are nearly identical.

shadcn-vue supports both Vue 3 with the Composition API and Nuxt 3 projects. If you're building with Nuxt, there's also a dedicated Nuxt module for automatic component imports.

Svelte: shadcn-svelte

The Svelte community has its own port: shadcn-svelte, built with Bits UI (Svelte headless components) and Tailwind CSS. It follows the same copy-paste-own model.

npx shadcn-svelte@latest init
npx shadcn-svelte@latest add button card

Components are generated as .svelte files. The API maps closely to the React version, but uses Svelte's reactive syntax and slot-based composition. It works with both standalone SvelteKit projects and plain Svelte setups.

How SERP Blocks Handles Multi-Framework Support

This is where the practical reality of multi-framework projects gets interesting. Individual Shadcn UI components are portable. Full page sections — hero blocks, pricing tables, dashboard layouts, checkout flows — are not as simple to port, because they combine multiple components with layout logic, responsive behavior, and real content structure.

At SERP Blocks, every block in the library ships with code for three frameworks:

• Next.js — the primary implementation using React, App Router conventions, and next/image

• Astro — a native .astro implementation that uses Astro's component model and island architecture

• Vue — a .vue single-file component implementation using shadcn-vue primitives

This covers the three largest audiences building with Shadcn UI today. Whether you're building a content site with Astro, a Vue/Nuxt app, or a Next.js project, you get production-ready code — not a React component you have to manually convert.

What That Looks Like in Practice

Take the hero blocks as an example. There are 81 hero section variants in the library. Each one includes:

• A Next.js .tsx file with proper imports and responsive layout

• An Astro .astro file with the same design, using Astro's templating

• A Vue .vue file with the equivalent layout using Vue syntax

The same applies across all 1,200+ blocks in 55 categories — from the 132 feature sections and 110 card components down to the 10 cost estimator blocks and 10 chat interfaces.

Why This Matters for Teams

Multi-framework code isn't just a convenience. It solves real problems:

Marketing sites on Astro, apps on Next.js. Many teams use Astro for their marketing site (where static generation and minimal JavaScript improve Core Web Vitals) and Next.js for their application. With SERP Blocks, both properties can use the same design patterns with framework-native code.

Vue shops adopting Shadcn design patterns. Teams that prefer Vue can use the same block designs without learning React or manually converting JSX to Vue templates.

Evaluating frameworks. If you're deciding between Astro and Next.js for a new project, you can prototype in both using the same blocks and compare the developer experience.

Framework Migration Tips

If you're moving an existing Shadcn UI project from one framework to another, here are practical tips:

Next.js to Astro

1. Copy your components/ui folder as-is — the base Shadcn UI components work in Astro's React islands.

2. Convert page layouts from .tsx to .astro, moving static content outside React and using client directives only for interactive parts.

3. Replace next/image with Astro's <Image> component.

4. Replace next/link with <a> tags — Astro handles routing differently.

5. Move data fetching from server components to Astro's frontmatter --- blocks.

Next.js to Remix

1. Components work without changes since both use React.

2. Replace useRouter with Remix's useNavigate.

3. Move data fetching to loader and action functions.

4. Replace next/link with Remix <Link>.

5. Swap API routes for Remix resource routes.

Next.js to Vue

1. This requires rewriting components in Vue syntax. If you're using shadcn-vue, the primitives map closely.

2. Replace useState with ref(), useEffect with onMounted/watch, and JSX with Vue templates.

3. Slot patterns in Vue replace React's children prop pattern.

Choosing the Right Framework for Your Shadcn UI Project

The framework you pick depends on what you're building:

• Next.js — best for full-stack applications, especially with server components and API routes. The largest Shadcn UI ecosystem and most examples.

• Astro — best for content sites, marketing pages, and documentation. Excellent performance due to zero-JS-by-default. Ideal when most of your page is static.

• Remix — best for form-heavy applications and progressive enhancement. Strong conventions around data loading and mutations.

• Vite + React — best for SPAs where you don't need SSR. Simplest setup, fastest build times.

• Vue/Nuxt — best if your team prefers Vue. shadcn-vue provides a comparable experience to the React original.

• SvelteKit — best if you prefer Svelte's reactive model. shadcn-svelte is mature and well-maintained.

Getting Started with Multi-Framework Blocks

If you want to skip the manual setup and start with production-ready blocks in multiple frameworks, browse the SERP Blocks library. There are 60 free blocks available across categories like Hero, Feature, Card, Testimonial, and more — each with Next.js, Astro, and Vue code included.

For access to the full library of 1,200+ blocks across 55 categories, SERP Blocks offers a one-time Pro purchase with no subscriptions or recurring fees. Every block, every framework variant, and every future update is included.

Shadcn UI proved that developers want to own their component code. The ecosystem expanding beyond Next.js into Astro, Vue, Svelte, and Remix means that same philosophy now applies regardless of which framework you prefer.