skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

shadcn-components

Map Radix UI asChild patterns to Base UI render props for shadcn/ui components.

22|3|Updated Jan 10, 2026
Search Tags:#react#shadcn/ui#component development#radix-ui#base-ui#ui primitives
One-click install
npx skills add https://github.com/fusengine/agents --skill shadcn-components-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-components
Source: https://github.com/fusengine/agents/tree/main/plugins/shadcn-expert/skills/shadcn-components
Command: npx skills add https://github.com/fusengine/agents --skill shadcn-components-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers correctly implement shadcn/ui components by understanding the differences between Radix UI and Base UI primitives and their respective composition patterns.

Core Features & Use Cases

  • API Mapping: Clearly outlines how to map Radix UI's asChild pattern to Base UI's render prop.
  • Primitive Detection Guidance: Emphasizes the importance of detecting the underlying primitive (Radix or Base UI) before component development.
  • Use Case: When building a new Dialog component, you can quickly reference this Skill to understand whether to use asChild with Radix primitives or render with Base UI primitives, ensuring consistency and correctness.

Quick Start

Consult the component mapping table to understand how to use Base UI primitives for Dialog components.

Frequently Asked Questions about shadcn-components

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

FAQPage Schema
How do I map Radix UI asChild to Base UI render props in shadcn/ui components?▼

To map shadcn/ui component patterns, replace Radix UI's `asChild` composition pattern with Base UI's `render` prop. This ensures correct primitive mapping and maintains UI consistency when switching underlying libraries.

What is the difference between Radix UI and Base UI primitives for component development?▼

Radix UI and Base UI are different underlying primitive sets for shadcn/ui components. They utilize distinct composition patterns, specifically `asChild` for Radix versus `render` for Base UI, affecting how you structure component APIs.

How do I detect whether a shadcn/ui component uses Radix or Base UI primitives?▼

Detecting the underlying primitive in shadcn/ui requires checking the component's dependencies. Identifying whether it relies on Radix UI or Base UI is essential before development to ensure you apply the correct composition pattern.

Can I use Base UI primitives to build a shadcn/ui Dialog component?▼

Yes, you can use Base UI primitives for shadcn/ui Dialog components. You should consult the component mapping table to understand the specific API differences and utilize the `render` prop instead of `asChild` for correct implementation.

Why does my shadcn/ui component break when switching primitives?▼

shadcn/ui components break when switching primitives if you do not update the composition pattern. You must map Radix UI's `asChild` pattern to Base UI's `render` prop to maintain correctness and prevent API conflicts.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic
ChenYCLChenYCL

web-artifacts-builder

Generate HTML artifacts with React, Tailwind CSS, and shadcn/ui components.

Community
Intermediate
mostafasudomostafasudo
3

shadcn-ui

Automate discovery, installation, and customization of shadcn/ui components in React applications.

Community
Intermediate