Enforce Base UI `render` prop usage for shadcn/ui components.
npx skills add https://github.com/mihaicrisan04/zalem --skill shadcn-baseui
Please help me install this Agent Skill. Skill: shadcn-baseui Source: https://github.com/mihaicrisan04/zalem/tree/main/.agents/skills/shadcn-baseui Command: npx skills add https://github.com/mihaicrisan04/zalem --skill shadcn-baseui
This skill prevents AI agents from using outdated Radix UI patterns (like asChild) when working with shadcn/ui components that are configured to use Base UI, ensuring correct and modern implementation.
render prop instead of Radix UI's asChild for trigger and wrapper components.DialogTrigger render={<Button />} instead of the incorrect DialogTrigger asChild.Ensure the @base-ui/react package is installed and use the render prop for all trigger components.
High-intent search queries and answers about installing and using this skill.
To use shadcn/ui with Base UI, you must use the `render` prop for trigger and wrapper components instead of the outdated `asChild` pattern. This ensures your Accordion, Button, and Select components remain compatible with Base UI configurations.
The `asChild` prop is a Radix UI pattern that does not work with Base UI. Base UI uses a distinct slot pattern, requiring you to use the `render` prop instead, such as `DialogTrigger render={<Button />}`, to function correctly.
The correct Base UI pattern for shadcn/ui triggers involves using the `render` prop. You pass the component directly, like `DialogTrigger render={<Button />}`, replacing the Radix UI `asChild` approach to enforce modern implementation.
You can identify a Base UI configuration by checking the `components.json` file. If the style fields in your `components.json` start with "base-", your project is set up to use Base UI patterns and requires the `render` prop.
Yes, you need to ensure the `@base-ui/react` package is installed in your project. Once installed, you can use the `render` prop for all trigger components to properly implement shadcn/ui patterns with Base UI.
Using Radix UI patterns like `asChild` in Base UI projects breaks component functionality. You must avoid `asChild` for trigger and wrapper components and strictly use the Base UI `render` prop for Accordion, Button, and Select components to prevent errors.
yuheitomiConfigure Biome and Shadcn/UI preferences in React projects with pnpm.
secondskyMigrate Radix UI components to Base UI equivalents in React projects.
wfvueIntegrate shadcn/ui components with Tailwind theming and wrapper patterns.
bluebricks-nlReview React components using shadcn/ui, Radix primitives, and Tailwind CSS for best practices.