Astro

Install Shark UI in an Astro project.

Create project

Create a new Astro project with Tailwind and React:


pnpm dlx create-astro@latest astro-app --template with-tailwindcss --install --add react --git

Edit tsconfig.json

Add path aliases so imports resolve correctly:

tsconfig.json


{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Run the CLI

Run the shadcn init command to set up your project:


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

Use them in an Astro page with a React client directive:

src/pages/index.astro


---
import { Button } from "@/components/ui/button"
---
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro + TailwindCSS</title>
  </head>
  <body>
    <div className="grid place-items-center h-screen content-center">
      <Button client:load>Button</Button>
    </div>
  </body>
</html>

On This Page

Create project Edit tsconfig.json Run the CLI Add components