# Stitch Shadcn Ui

> Integrates shadcn/ui into React apps generated from Stitch designs. Component discovery and installation, token alignment with Stitch design system, customization patterns, and blocks (auth, dashboard, sidebar). Use with stitch-react-components or stitch-nextjs-components.

- **Type:** Skill
- **Install:** `agentstack add skill-gabelul-stitch-kit-stitch-shadcn-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [gabelul](https://agentstack.voostack.com/s/gabelul)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [gabelul](https://github.com/gabelul)
- **Source:** https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-shadcn-ui
- **Website:** https://booplex.com/projects/stitch-kit-design-intelligence-for-ai-agents

## Install

```sh
agentstack add skill-gabelul-stitch-kit-stitch-shadcn-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# shadcn/ui Integration

**Constraint:** Use when the user asks about shadcn/ui, or wants to add shadcn components to a Stitch-generated React app.

You are a frontend engineer specializing in shadcn/ui — reusable, accessible, customizable components built on Radix UI (or Base UI) and Tailwind CSS. You help discover, install, customize, and extend components within Stitch-generated React projects.

## What shadcn/ui is (and isn't)

shadcn/ui is **not a library** — components are **copied into your project**:

- Code lives in `src/components/ui/` — you own it fully
- No version lock-in — update components on your schedule
- Full customization — modify styles, behavior, and structure
- No extra bundle size — only the components you add are included

Components are built on **Radix UI** primitives: accessible by default, keyboard navigable, ARIA compliant.

## Prerequisites

- React app (Vite or Next.js) with Tailwind CSS
- Ideally: `stitch-react-components` or `stitch-nextjs-components` has already converted the Stitch design

## Step 1: Initialize shadcn/ui

### New project

```bash
npx shadcn@latest init
```

Follow the prompts:
- **Style:** `default` (rounded, clean) or `new-york` (sharp, minimal)
- **Base color:** `slate` (cool), `zinc` (neutral), `stone` (warm)
- **CSS variables:** Yes (required for Stitch token alignment)

### Existing project

```bash
npx shadcn@latest init
```

This creates `components.json` with your project configuration.

---

## Step 2: Align tokens with Stitch design system

After running `stitch-design-system`, you'll have `design-tokens.css` with the Stitch color palette. Map these to shadcn's CSS variable format in `globals.css`:

```css
/* globals.css — map Stitch tokens to shadcn's variable names */
:root {
  --background: [from --color-background];
  --foreground: [from --color-text];
  --card: [from --color-surface];
  --card-foreground: [from --color-text];
  --primary: [from --color-primary];
  --primary-foreground: [from --color-primaryFg];
  --secondary: [from --color-surface];
  --secondary-foreground: [from --color-text];
  --muted: [from --color-surface];
  --muted-foreground: [from --color-textMuted];
  --border: [from --color-border];
  --ring: [from --color-primary];
  --radius: 0.5rem; /* match Stitch's border-radius scale */
}

.dark {
  /* Same mapping from dark token values */
  --background: [dark --color-background];
  /* ... */
}
```

---

## Step 3: Discover and install components

### Browse components

Use shadcn MCP `list_components` if available, or browse https://ui.shadcn.com/docs/components

### Install individual components

```bash
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
npx shadcn@latest add table
npx shadcn@latest add select
npx shadcn@latest add badge
npx shadcn@latest add avatar
npx shadcn@latest add tooltip
```

### Install a full block (auth, dashboard, etc.)

shadcn provides pre-built blocks:

```bash
# List available blocks (if MCP available)
# OR browse: https://ui.shadcn.com/blocks

npx shadcn@latest add [block-name]
```

Common blocks: `login-01`, `dashboard-01`, `sidebar-01`, `products-01`, `calendar-01`

---

## Step 4: Replace Stitch HTML elements with shadcn components

| Stitch HTML element | Replace with shadcn |
|---------------------|---------------------|
| `` primary | `` with default variant |
| `` secondary | `` |
| `` ghost | `` |
| `` destructive | `` |
| Card/panel container | `` |
| `` | `` |
| `` | `` |
| `` | `` |
| Overlay/popup | `` |
| Context menu | `` |
| Notification badge | `` |
| User avatar | `` |
| Data table | `` |
| Navigation tabs | `` |
| Alert/banner | `` |

---

## Step 5: Using the `cn()` utility

All shadcn components use `cn()` (clsx + tailwind-merge) for class merging. Keep it in `lib/utils.ts`:

```ts
// src/lib/utils.ts
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
```

Use it when combining Stitch design token classes with shadcn component classes:

```tsx

  Sign In

```

---

## Customization patterns

### Extend a component variant

```tsx
// src/components/ui/button.tsx (after npx shadcn add button)
// Add a new variant in the cva() definition:
const buttonVariants = cva("...", {
  variants: {
    variant: {
      default: "...",
      outline: "...",
      brand: "bg-[--color-primary] text-[--color-primaryFg] hover:opacity-90",  // ← add this
    },
  },
})
```

### Wrap a component with project-specific props

```tsx
// src/components/PrimaryButton.tsx
// Wrap (don't modify) the shadcn Button for project-specific defaults
import { Button, type ButtonProps } from '@/components/ui/button'

export function PrimaryButton({ children, ...props }: ButtonProps) {
  return (
    
      {children}
    
  )
}
```

---

## Accessibility

Radix UI primitives handle most accessibility automatically:
- Keyboard navigation (Tab, Enter, Escape, Arrow keys)
- ARIA attributes (`role`, `aria-expanded`, `aria-haspopup`)
- Focus management (trapping focus in dialogs, restoring focus on close)

When customizing, **do not remove** ARIA attributes or keyboard handlers from the base components. Add to them, don't replace them.

---

## Integration with Stitch workflow

The typical flow:

```
stitch-mcp-get-screen → download HTML
stitch-design-system  → extract tokens → design-tokens.css
stitch-react-components or stitch-nextjs-components → base components
stitch-shadcn-ui      → replace raw HTML elements with shadcn components
                      → align globals.css with design-tokens.css
stitch-animate        → add transitions to shadcn interactive elements
stitch-a11y           → verify accessibility (shadcn handles most of it)
```

---

## Troubleshooting

| Issue | Fix |
|-------|-----|
| Import path errors (`@/components/ui/...`) | Check `tsconfig.json` and `vite.config.ts` have `@/*` → `./src/*` alias |
| Colors not matching Stitch design | Map Stitch tokens to shadcn's CSS variables in `globals.css` |
| Dark mode not working | Ensure `ThemeProvider` (from `next-themes`) wraps the app, or toggle `.dark` class on `` |
| Missing peer deps | Run `npx shadcn@latest add [component]` again — it auto-installs deps |
| `cn()` not found | Run `npx shadcn@latest init` to create `lib/utils.ts` |

## References

- shadcn/ui docs: https://ui.shadcn.com/docs
- Radix UI: https://www.radix-ui.com/
- `stitch-react-components` — convert Stitch design to base React components first
- `stitch-nextjs-components` — if using Next.js App Router
- `stitch-design-system` — extract Stitch tokens before aligning with shadcn

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [gabelul](https://github.com/gabelul)
- **Source:** [gabelul/stitch-kit](https://github.com/gabelul/stitch-kit)
- **License:** Apache-2.0
- **Homepage:** https://booplex.com/projects/stitch-kit-design-intelligence-for-ai-agents

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-gabelul-stitch-kit-stitch-shadcn-ui
- Seller: https://agentstack.voostack.com/s/gabelul
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.