Skip to content
pandacoderz/ui

Installation

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:

{
  "registries": {
    "@pandacoderz-ui": "https://ui.pandacoderz.dev/r/{name}.json"
  }
}

Add components

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

npx shadcn@latest add https://ui.pandacoderz.dev/r/prompt-input.json

Or, with the namespace configured:

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:

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:

: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:

---
import Chat from "@/components/blocks/ai-chat/chat";
---
<Chat client:visible />