What is shadcn/ui and how does it differ in Stitch apps?

Shadcn/ui provides components copied into your project (not a runtime library). You own the code in your repo, can customize freely, and avoid runtime overhead since there’s no extra code loading from node_modules.

How do I install and discover components for Stitch?

Use MCP commands to list components (list_components) or browse ui.shadcn.com, then install with npx shadcn@latest add [component-name]. Components land under src/components/ui/ and components.json is updated automatically.

How should I approach theming and accessibility?

Maintain accessibility with Radix primitives (ARIA, keyboard navigation, focus management) and keep ARIA and focus indicators intact. Align theming with DESIGN.md and stitch-design-md by updating Tailwind variables in globals.css and following the project’s design guidelines.

stitch-shadcn-ui

npx machina-cli add skill partme-ai/stitch-skills/stitch-shadcn-ui --openclaw

Files (1)

SKILL.md

4.8 KB

shadcn/ui Component Integration

Constraint: Use when the user asks about shadcn/ui, Stitch + React + shadcn, or building React UIs with shadcn components.

You are a frontend engineer specializing in shadcn/ui—reusable, accessible, customizable components (Radix UI or Base UI + Tailwind). You help discover, install, customize, and extend components following best practices.

Core Principles

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

Full ownership: Code lives in your repo, not node_modules
Full customization: Style, behavior, and structure under your control
No version lock-in: Update components when you choose
Zero runtime overhead: No extra bundle, only the code you add

Component Discovery and Installation

Browse and install

List components: Use shadcn MCP list_components (or browse ui.shadcn.com).
Install (recommended):
```
npx shadcn@latest add [component-name]
```
Downloads source, installs deps, places files in components/ui/, updates components.json.
Manual: Use MCP get_component to get source; create components/ui/[name].tsx; install peer deps.

Project setup

New project: npx shadcn@latest create (style, baseColor, RSC, etc.).
Existing project: npx shadcn@latest init → creates components.json with:
- style: default, new-york (classic), or newer visual styles (Vega, Nova, Maia, Lyra, Mira).
- baseColor: slate, gray, zinc, neutral, stone.
- cssVariables, tailwind paths, aliases, rsc (React Server Components), rtl (optional).

Dependencies: React 18+, Tailwind 3+, Radix UI or Base UI, class-variance-authority, clsx, tailwind-merge.

Custom registries (optional)

For custom or third-party registries (defined in components.json): use MCP get_project_registries, list_items_in_registries, view_items_in_registries, search_items_in_registries to discover and install components.

Architecture

File structure: src/components/ui/ for shadcn components; src/components/[custom]/ for your composed components.
cn() utility: All shadcn components use cn() (clsx + tailwind-merge) for class merging; keep lib/utils.ts with this helper.

Customization

Theme: Edit Tailwind config and CSS variables in globals.css (:root and .dark).
Variants: Use cva for variant logic (e.g. button variant/size).
Wrappers: Create wrapper components in components/ (not components/ui/) that extend shadcn components.

Blocks and Complex Components

shadcn provides blocks (auth, dashboard, sidebar, etc.): use MCP list_blocks, get_block to retrieve and install. Blocks are organized by category (e.g. calendar, dashboard, login, sidebar, products).

Validation and Quality (align with official)

Before committing components:

Type check: Run tsc --noEmit.
Lint: Run the project linter.
Accessibility: Use tools like axe DevTools.
Visual QA: Test light and dark modes.
Responsive: Verify at different breakpoints.

Accessibility

Components use Radix primitives: keyboard navigation, ARIA, focus management. When customizing, preserve ARIA, keyboard handlers, and focus indicators.

Integration with Stitch

After converting Stitch screens to React with stitch-react-components, add shadcn components for forms, dialogs, tables, etc. using this skill.
Align theme (colors, spacing) with DESIGN.md from stitch-design-md if the project uses it.

Troubleshooting

Import errors: Check components.json and tsconfig.json paths (@/*).
Style conflicts: Ensure Tailwind and globals.css are configured; match CSS variable names.
Missing deps: Run npx shadcn@latest add [component] to auto-install; or use get_component_metadata for dependency list.

Keywords

English: shadcn, shadcn/ui, Radix, Tailwind, React, components, blocks.
中文关键词： shadcn、Radix、Tailwind、组件。

References

Examples
Tailwind → shadcn/ui — When converting Stitch HTML to React + shadcn: keep Tailwind, map Stitch tokens to globals.css (--primary, --background, etc.); use shadcn components (Button, Card, Input) with className/cn().
shadcn/ui docs
Radix UI

Source

git clone https://github.com/partme-ai/stitch-skills/blob/main/skills/stitch-shadcn-ui/SKILL.mdView on GitHub

Overview

An expert guide to discovering, installing, and customizing shadcn/ui components in Stitch-generated React apps. It covers copying components into your repo (not node_modules), installing with npx shadcn@latest, and tailoring themes, blocks, and accessibility with Radix/Base UI and Tailwind. Use this to deliver consistent, accessible UI with full ownership and no runtime overhead.

How This Skill Works

Shadcn/ui components are copied into your repo, giving you full ownership and customization control. Install components with npx shadcn@latest add [component-name], which downloads the source, installs peer dependencies, and updates components.json, placing files under src/components/ui/. You customize via Tailwind, the cn() helper, and variant logic (cva); you can extend with wrappers or blocks, ensure accessibility per Radix primitives, and align theming with Stitch workflows when converting screens with stitch-react-components.

When to Use It

Starting a Stitch-generated React project and needing a consistent, accessible UI baseline.
Adding a new form, dialog, table, or other component using shadcn UI components.
Theming a Stitch app to match DESIGN.md or stitch-design-md across projects.
Using shadcn blocks (auth, dashboard, sidebar) to rapidly assemble UI with MCP.
Ensuring accessibility, keyboard navigation, and responsive behavior across breakpoints.

Quick Start

Step 1: List components with MCP (list_components) or browse ui.shadcn.com, then run npx shadcn@latest add [component-name].
Step 2: If starting from scratch, set up the project with npx shadcn@latest create or init, ensuring components.json is created/updated.
Step 3: Customize by editing globals.css, Tailwind config, and optional wrappers; integrate with stitch-react-components where needed.

Best Practices

Install components into your project under src/components/ui/ rather than relying on node_modules.
Use the cn() helper (clsx + tailwind-merge) for robust class merging and theming.
Preserve accessibility: keep ARIA attributes, keyboard handlers, and focus indicators when customizing.
Align theme and spacing with DESIGN.md from stitch-design-md to ensure visual consistency.
Validate changes with TypeScript checks, lint, axe accessibility tests, visual QA, and responsive testing.

Example Use Cases

Migrate a Stitch form screen to use shadcn-ui inputs, selects, and validation messages.
Build a dashboard page using shadcn blocks (calendar, sidebar) for a cohesive layout.
Theme a Stitch app to Vega or Maia styles by adjusting shadcn style options and Tailwind config.
Create a reusable wrapper component that extends a shadcn button with project-specific behavior.
Add accessible modals and tables using Radix primitives through shadcn components.

Frequently Asked Questions

Add this skill to your agents