skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

react-ui-shadcn-tailwind

Generate React UI components using shadcn/ui and Tailwind CSS.

Updated Mar 27, 2026
Search Tags:#React#frontend#dashboard#tailwind#ui components#ShadCN#form validation
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill react-ui-shadcn-tailwind-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-ui-shadcn-tailwind
Source: https://github.com/gmackie/agent-skills/tree/main/skills/react-ui-shadcn-tailwind
Command: npx skills add https://github.com/gmackie/agent-skills --skill react-ui-shadcn-tailwind-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, well-structured React interfaces from scratch is repetitive and error-prone, especially when wiring up forms with validation, data tables with filtering, and dashboard layouts. This Skill provides ready-to-adapt component patterns so you can produce working UI code quickly. ## Core Features & Use Cases - Form Generation: Create forms with react-hook-form and zod validation, including inputs, selects, and textareas wired to shadcn/ui Form components. - Data Tables & Dashboards: Generate data tables with search, status filtering, and action menus, plus dashboard layouts with metric cards, progress bars, and tabbed analytics views. - Dialogs & Sheets: Build modal dialogs and slide-over sheets for create/edit flows and settings panels. - Use Case: Ask for a user management page and receive a complete component with a searchable, filterable table, badge-based status indicators, and a create-user modal. ## Quick Start Use the react-ui-shadcn-tailwind skill to create a user registration form with validation in my React project.

Frequently Asked Questions about react-ui-shadcn-tailwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a React form with validation using shadcn/ui?▼

Combine react-hook-form with zodResolver and a zod schema, then render fields using shadcn/ui Form, FormField, FormItem, and FormMessage components. The schema defines rules like minimum length and email format, and validation messages display automatically.

How to build a data table with search and filters in React?▼

Use shadcn/ui Table components with React state for the search term and filter values, then compute a filtered array before rendering rows. Pair Input for search, DropdownMenu for status filters, and Badge for role or status indicators.

Does shadcn/ui require Tailwind CSS to work?▼

Yes, shadcn/ui components are built on Tailwind CSS utility classes and require Tailwind to be configured in your React project. Run npx shadcn-ui@latest init after Tailwind is set up, then add individual components with the CLI.

Why are my shadcn/ui components not styled correctly?▼

Unstyled components usually mean Tailwind CSS is not properly configured or its stylesheet is not imported in your app entry point. Verify the Tailwind directives are in your global CSS and that the content paths in tailwind.config include your component files.

Why is my shadcn/ui dialog not closing when expected?▼

Dialog state must be managed with the open and onOpenChange props bound to React state. If you close the dialog only inside a button handler without updating that state, the controlled component will not dismiss.

Related Skills

Explore More Software Engineering Skills→
Adithiya-SAdithiya-S

shadcn

Installs, configures, and composes shadcn/ui components via CLI for React interfaces.

Community
Intermediate
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
GTC6244GTC6244

browse

Drive a real browser to automate QA testing and visual validation.

Community
Advanced
DagimAlemayehuuDagimAlemayehuu

shadcn-ui

Integrates and customizes shadcn/ui components in React applications with Tailwind CSS.

Community
Intermediate