Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/fusengine/agents/react-shadcnnpx skills add fusengine/agents --skill react-shadcngit clone --depth 1 https://github.com/fusengine/agentsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/fusengine/agents/react-shadcn)<a href="https://agentmods.dev/skills/fusengine/agents/react-shadcn"><img src="https://agentmods.dev/badge/skills/fusengine/agents/react-shadcn.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00035 | $0.01691 |
| Opus 5 | $0.00017 | $0.00846 |
| Sonnet 5 | $0.00007 | $0.00338 |
| Haiku 4.5 | $0.00003 | $0.00169 |
Grade A, and why
react-shadcn scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
88% identical to nextjs-shadcn — 21 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 134 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Requires installing components via bunx --bun shadcn@latest add (never hand-written) to @/modules/cores/shadcn/components/ui/, and covers MCP registry tools (mcp__shadcn__*) for discovering components before implementing. This is the plain-React variant of shadcn/ui — for Next.js App Router see nextjs-shadcn instead.
shadcn/ui for React
Beautiful, accessible components built on Radix UI with Tailwind CSS styling.
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Analyze existing components and patterns
- fuse-ai-pilot:research-expert - Verify latest shadcn/ui docs via Context7/Exa
- mcp__shadcn__* - Search registry for component availability
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Building UI components for React applications (Vite, CRA)
- Need accessible, customizable form components (inputs, selects, checkboxes)
- Implementing dialogs, sheets, drawers, or overlay patterns
- Creating data tables with sorting, filtering, and pagination
- Building navigation menus, sidebars, or command palettes
- Need toast notifications or alert feedback components
Why shadcn/ui
| Feature | Benefit |
|---|---|
| Copy/paste model | Components copied to your project, full ownership |
| Radix UI foundation | Accessibility built-in, unstyled primitives |
| Tailwind CSS styling | Utility-first, easy customization |
| TanStack Form ready | Modern form library with Field pattern |
| Lucide icons | Consistent, customizable icon set |
What ships with it
51 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/accordion.md 10 KB
- references/alert-dialog.md 7.4 KB
- references/alert.md 4.3 KB
- references/aspect-ratio.md 7.4 KB
- references/avatar.md 9.4 KB
- references/badge.md 8.4 KB
- references/breadcrumb.md 13 KB
- references/button.md 8.6 KB
- references/calendar.md 13 KB
- references/card.md 12 KB
- references/carousel.md 12 KB
- references/chart.md 12 KB
- references/checkbox.md 16 KB
- references/collapsible.md 11 KB
- references/command.md 12 KB
- references/configuration.md 6.7 KB
- references/context-menu.md 10 KB
- references/dialog.md 15 KB
- references/drawer.md 11 KB
- references/dropdown.md 7.3 KB
- references/field-patterns.md 2.5 KB
- references/form-examples.md 4.7 KB
- references/hover-card.md 8.0 KB
- references/input-otp.md 12 KB
- references/input.md 12 KB
- references/installation.md 3.9 KB
- references/label.md 5.0 KB
- references/menubar.md 16 KB
- references/navigation-menu.md 20 KB
- references/pagination.md 18 KB
- references/popover.md 5.8 KB
- references/progress.md 7.1 KB
- references/radio-group.md 11 KB
- references/resizable.md 10 KB
- references/scroll-area.md 6.7 KB
- references/select.md 9.5 KB
- references/separator.md 5.0 KB
- references/sheet.md 12 KB
- references/sidebar.md 18 KB
- references/skeleton.md 6.5 KB
- references/slider.md 9.9 KB
- references/spinner.md 8.8 KB
- references/switch.md 11 KB
- references/table.md 8.7 KB
- references/tabs.md 8.6 KB
- references/textarea.md 8.0 KB
- references/theming.md 12 KB
- references/toast.md 13 KB
- references/toggle-group.md 11 KB
- references/toggle.md 8.6 KB
- references/tooltip.md 6.4 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 134 lines · 35 tokens per session scan A 121d074ee313
react-shadcn is a skill published in the GitHub repository fusengine/agents (25 stars, last pushed 1mo ago), licensed MIT. It adds 35 tokens to every session and 1,691 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 88% identical to nextjs-shadcn, differing in 21 lines, and is treated as a copy.
Other skills, from other repositories
shiny-bslib-theming
Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bstheme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection…
shiny-bslib
Build modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes), or working with bslib page layouts, grid systems, cards, value boxes, navigation, sidebars, filling layouts, theming…
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
frontend
Two-mode frontend skill: (1) authoring — accessibility, responsive layout, loading/error states, performance, DESIGN.md authoring, visual direction; (2) critique — READ-only scored review of built UI against anchored rubric, AI-slop detection, two isolated assessments. Router invokes mode via context.
stitch-design-system
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.
fec-tailwind-design-system
用于设计、实现或审查 Tailwind CSS 设计系统、Token 映射、主题扩展、工具类治理、组件变体、暗色模式、响应式工具、safelist 或可维护的 class 组合；中文触发词包括 Tailwind、设计 Token、组件变体、暗色模式、class 管理。.