thunderboltdev/shadcn-baseui

Overview

This skill enforces Base UI patterns when working with shadcn/ui projects to prevent incorrect Radix UI suggestions. It verifies the project is using Base UI and guides code changes like using the render prop and Base UI–specific prop names. The goal is correct, idiomatic component usage and fewer integration bugs.

How this skill works

First, it checks components.json to confirm the project uses a Base UI style (style field starting with "base-"). It ensures @base-ui/react is installed, then enforces the slot pattern and component-specific prop differences. The skill replaces or flags Radix patterns such as asChild, type= on Accordion, and Radix-specific position props with Base UI equivalents.

When to use it

• When generating or reviewing shadcn/ui component code in a project that uses Base UI.
• Before suggesting component wrappers or trigger patterns to avoid Radix-specific solutions.
• When converting Radix-based examples to Base UI equivalents.
• During code reviews to ensure consistent Base UI prop usage and patterns.
• When confirming project dependencies include @base-ui/react before giving code snippets.

Best practices

• Always verify components.json style starts with "base-" before applying Base UI rules.
• Use the render prop for all trigger/wrapper components instead of asChild.
• For Button rendered as non-button elements, set nativeButton={false} when using render.
• Use Accordion defaultValue as an array and multiple (boolean) instead of type prop.
• Replace SelectContent position prop with alignItemWithTrigger boolean when needed.

Example use cases

• Convert a DialogTrigger that used asChild to a render prop with a Button element.
• Fix an Accordion that incorrectly used type="single" and string defaultValue to array defaultValue.
• Update a Button wrapping a Next.js Link to use render and nativeButton={false}.
• Swap SelectContent position="popper" to alignItemWithTrigger={false} in a dropdown.
• Validate an incoming code suggestion and reject Radix patterns before supplying Base UI code.