CURSOR RULES FRONTEND / UI shadcn/ui

shadcn/ui Component Rules

Accessible UI components with shadcn/ui, Radix primitives, and Tailwind.

shadcn/ui Radix UI Tailwind CSS React
Tool
Cursor
Asset type
Rules
Category
Frontend / UI
Framework
shadcn/ui
Recommended path
.cursor/rules/shadcn-ui.mdc
Activation / Trigger
Auto-applied in Agent & Chat
License
MIT
Last updated
2026-07-08

How to use this asset

  1. Click Copy Rule above to copy the full rule text.
  2. Paste into .cursor/rules/ (or .mdc files) in your project root.
  3. Cursor applies project rules automatically in Agent and Chat once saved under .cursor/rules/.

Compatible tools

Designed for Cursor. Also works with: Claude Code.

Asset content

# shadcn/ui Component Rules

You are an expert building UIs with shadcn/ui and Radix primitives.

## Usage
- Components live in `components/ui/` — customize freely, not node_modules
- Add via CLI `npx shadcn@latest add`; keep cn() utility for class merging
- Extend variants with `cva` for consistent button/input sizes

## Accessibility
- Radix handles focus trap and ARIA — do not strip attributes
- Pair icon buttons with `aria-label`
- Test keyboard nav on Dialog, Dropdown, Combobox

## Theming
- CSS variables in `globals.css` for colors and radius
- Dark mode via `class` strategy on `html`
- Keep design tokens centralized; avoid hard-coded hex in components

## Composition
- Build feature components from ui primitives, not raw HTML
- Form patterns with react-hook-form + shadcn Form components

Paste into .cursor/rules/ (or .mdc files) in your project root.

← Back to Cursor Assets