Claude Code shadcn-ui for reusable filters and tables
Select existing shadcn UI components for filtering, lists, paging, and overlays, keeping project theme and interaction semantics.
中文Install in Claude Code
Open a React Tailwind project in Claude Code and inventory installed shadcn UI components or internal wrappers.
- Review `.claude/skills/shadcn-ui/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/shadcn-ui/` in your project and save the reviewed file as `.claude/skills/shadcn-ui/SKILL.md`.
- Start Claude Code from that project's root, then select `/shadcn-ui` in the slash menu.
Example task
Directory page ui-32 needs category filtering, a list, and another page. It already has {filter: 'Select', list: 'Table', paging: 'Pagination'}.What to check
Reuse {filter: 'Select', list: 'Table', paging: 'Pagination'} with the project theme. Verify that filtering and paging work from the keyboard.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does every page require reinstalling components?
Reuse the available wrappers first. Add a component when a needed behavior is missing, maintaining the same theme tokens and accessibility semantics.