Astro

Create project

Start by creating a new Astro project:

loading...

Edit tsconfig.json file

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

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

Run the CLI

Run the shadcn init command to setup your project:

loading...

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

Ignore them if you want to use Pure UI Design System.

Enter license

Enter your license key to unlock the full features of Pure UI:

Initialize design system

Use Design System to learn and initialize your own design system or start with the default theme:

loading...

Add components

You can now start adding components to your project.

loading...

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>