# Installation
Source: https://ui.spencerwueste.com/docs/installation/
Markdown: https://ui.spencerwueste.com/llm/installation.md

> Set up a React 19, Tailwind CSS v4, and shadcn/ui project, then add components from the registry.

## Prerequisites

Your project needs:

- React 19 or later
- Tailwind CSS v4
- TypeScript
- shadcn/ui initialized (`npx shadcn@latest init`)

The components use shadcn primitives such as `button`, `tooltip`, and `collapsible`. The CLI installs those automatically when you add a component.

## Add the registry (optional)

To use the short `@pandacoderz-ui/<name>` form, register the namespace in `components.json`:

```json title="components.json"
{
  "registries": {
    "@pandacoderz-ui": "https://ui.spencerwueste.com/r/{name}.json"
  }
}
```

## Add components

Use the full registry URL directly (no config needed):

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/prompt-input.json
```

Or, with the namespace configured:

```bash
npx shadcn@latest add @pandacoderz-ui/prompt-input
```

Every component page has an Installation section with the exact command for npm, pnpm, yarn, and bun, plus a Manual tab with the full source.

## Project structure

After adding a few components, your tree looks like this:

```text
components/
├── pandacoderz-ui/
│   ├── prompt-input.tsx
│   ├── message.tsx
│   └── markdown-code-block.tsx
├── ui/
│   ├── button.tsx
│   ├── textarea.tsx
│   └── tooltip.tsx
└── ...
lib/
├── utils.ts
└── merge-refs.ts
```

Files in `pandacoderz-ui/` are this library's components. Files in `ui/` are shadcn primitives they depend on.

## Theme

Components use semantic Tailwind tokens (`bg-background`, `text-muted-foreground`, `border-border`) plus two extras: `--brand` and `--brand-soft` for the accent color. Add them to your `globals.css` if you don't already have them:

```css title="globals.css"
:root {
  --brand: oklch(0.541 0.281 293.009);
  --brand-soft: oklch(0.943 0.029 294.588);
}
.dark {
  --brand: oklch(0.702 0.183 293.541);
  --brand-soft: oklch(0.3 0.09 293);
}
@theme inline {
  --color-brand: var(--brand);
  --color-brand-soft: var(--brand-soft);
}
```

Also make sure `tw-animate-css` is imported (shadcn's default) for the collapse and fade animations.

## Using with Astro

The components are React, so in Astro add `@astrojs/react` and render them as islands:

```astro title="src/pages/chat.astro"
---
import Chat from "@/components/blocks/ai-chat/chat";
---
<Chat client:visible />
```