React Router

A guide on installing and configuring shadcn/ui components for seamless integration with React Router projects.

Step 1: Initialize Your React Router Project

npx create-react-router@latest my-app

Step 2: Execute the shadcn/ui Initialization Command

Run the shadcn/ui initialization command in your terminal to configure your project for using shadcn/ui components:

npx shadcn@latest init

Step 3: Integrate Individual Components

You have now completed the initial setup and are ready to begin adding individual shadcn/ui components to your React Router project as needed.

npx shadcn@latest add button

Executing the command shown above will add the Button component files to your project structure. You can then import and use the component in your React Router files as demonstrated below:


export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export default function Home() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

Laravel Remix