shadcn-ui

Build polished, accessible React interfaces.

frontend design

What it does

Build accessible, customizable React UI components using shadcn/ui patterns, Radix UI primitives, and Tailwind CSS.

When to use it

Use when setting up shadcn/ui, adding components, building validated forms, customizing themes, or implementing UI patterns and charts.

Give it a project and the UI requirements; it installs or implements shadcn/ui components and patterns in the project.

What you provide

This skill

shadcn/ui registry

Read

Fetches components remotely

npx shadcn@latest

Execute

Shadcn at its latest version

Node.js is needed to run the npx-based shadcn/ui and project setup commands.

Tailwind CSS is required because the components rely on Tailwind CSS utilities.

The relevant @radix-ui packages must be installed for Radix-based components.

Recharts is required when using the chart component.