Astro

Instructions to install Shark UI in an Astro project

Create project

To create a new Astro project, you can use the following command:


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

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths:

tsconfig.json


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

Run the CLI

Run the shadcn init command to setup your project:


pnpm dlx shadcn@latest init

Add Components

You can now start adding components to your project.


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

The command above will add the Button component to your project. You can then import it like this:

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>Button</Button>
		</div>
	</body>
</html>

On This Page

Create project Edit tsconfig.json file Run the CLI Add Components