React Router

Install Shark UI in a React Router project.

Create project


pnpm dlx create-react-router@latest my-app.json

Run the CLI

Run the shadcn init command to set up components.json and path aliases:


pnpm dlx shadcn@latest init.json

Add components

Add components from the Shark registry:


pnpm dlx shadcn@latest add https://shark.vini.one/r/button.json

Import and use them in your routes:

app/routes/home.tsx


import { Button } from "~/components/ui/button"
import type { Route } from "./+types/home"
 
export const 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>
  )
}

On This Page

Create project Run the CLI Add components