ContextQMD
Back to Shark UI

Astro

docs/installation/astro

latest9.6 KB
Original Source

Sections

Components

Utilities

Forms

Hooks

Astro

Copy Markdown

Install Shark UI in an Astro project.

[

Use the Shark preset

Initialize an Astro project with the Shark registry preset.

](#use-the-shark-preset)[

Use the CLI

Scaffold a new Astro project directly from the terminal.

](#use-the-cli)[

Existing Project

Configure Shark UI manually in an existing Astro project.

](#existing-project)

Use the Shark Preset#

Create Project#

Run the init command with the Shark preset and the Astro template:

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style -t astro

Add Components#

You can add components with the CLI or copy them manually from the component docs:

  • CLI : Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
  • Manual : Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/ui

Then import and use components in an Astro page with a React client directive:

src/pages/index.astro

---
import Layout from "@/layouts/main.astro";
import { Button } from "@/components/ui/button";
---

<Layout>
  <div class="grid h-screen place-items-center content-center">
    <Button client:load>Button</Button>
  </div>
</Layout>

Use the CLI#

Create Project#

Run the init command to scaffold a new Astro project and configure Shark UI:

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style -t astro

For a monorepo project, use the --monorepo flag:

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style -t astro --monorepo

Add Components#

You can add components with the CLI or copy them manually from the component docs:

  • CLI : Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
  • Manual : Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/button

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/button -c apps/web

You can also install every component at once:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/ui

Then import and use components in an Astro page with a React client directive:

src/pages/index.astro

---
import Layout from "@/layouts/main.astro";
import { Button } from "@/components/ui/button";
---

<Layout>
  <div class="grid h-screen place-items-center content-center">
    <Button client:load>Button</Button>
  </div>
</Layout>

If you created a monorepo, update apps/web/src/pages/index.astro and import from your workspace UI package instead. The monorepo layout at apps/web/src/layouts/main.astro already imports your shared global CSS for you.

Existing Project#

Create Project#

If you need a new Astro project, create one first. Otherwise, skip this step.

pnpmbunnpmyarn

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

This command sets up Tailwind CSS and the React integration for you. If you're adding Shark UI to an older or custom Astro app, make sure both are configured before continuing.

The Tailwind starter loads your global stylesheet through src/layouts/main.astro. Keep that layout in place, or make sure your page imports @/styles/global.css.

Edit tsconfig.json#

Add path aliases so imports resolve correctly:

tsconfig.json

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

Run the CLI#

Run the shadcn init command with the Shark preset to set up your project.

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style

Add Components#

You can add components with the CLI or copy them manually from the component docs:

  • CLI : Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
  • Manual : Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/ui

Then import and use components in an Astro page with a React client directive:

src/pages/index.astro

---
import Layout from "@/layouts/main.astro";
import { Button } from "@/components/ui/button";
---

<Layout>
  <div class="grid h-screen place-items-center content-center">
    <Button client:load>Button</Button>
  </div>
</Layout>

On This Page

Use the Shark PresetCreate ProjectAdd ComponentsUse the CLICreate ProjectAdd ComponentsExisting ProjectCreate ProjectEdit tsconfig.jsonRun the CLIAdd Components