Shadcn Baseui

If you're using shadcn/ui with Base UI instead of Radix UI, this prevents Claude from suggesting the wrong patterns. The critical difference is the slot pattern: Base UI uses the `render` prop while Radix uses `asChild`, and getting this wrong breaks your components. It also covers the quirks like Accordion's `multiple` boolean instead of a `type` prop, and Button's `nativeButton={false}` requirement when rendering as links. Simple checklist style guide that keeps you from fighting with incorrect suggestions when Base UI is detected in your components.json. Saves time if you've already migrated or started fresh with Base UI.

skills.sh installs: 251
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add thunderboltdev/shadcn-baseui --skill shadcn-baseui --agent claude-code

Installs into .claude/skills of the current project.

Files

shadcn/ui + Base UI Guidelines

A guide for using shadcn/ui components when working with Base UI. Prevents LLMs from incorrectly suggesting Radix UI patterns (asChild, etc.).

⚠️ CRITICAL: Before suggesting any code, verify this is a Base UI project by checking components.json. The style field should start with "base-" (e.g., "base-vega", "base-nova", "base-maia", "base-lyra", "base-mira"). If it starts with something else, this skill does not apply.

Ensure the @base-ui/react package is installed. If not, install it using the appropriate package manager.

Slot Pattern

The major difference between Radix UI and Base UI is the slot pattern. Radix UI uses asChild, while Base UI uses the render prop. Always use render prop over asChild.

Rule: Always use render prop instead of asChild for ALL trigger/wrapper components.

Applies to: DialogTrigger, AlertDialogTrigger, PopoverTrigger, DropdownMenuTrigger, TooltipTrigger, SelectTrigger, TabsTrigger, AccordionTrigger, Button (when wrapping links), etc.

// ❌ INCORRECT
<DialogTrigger asChild>
  <Button variant="outline">Click me</Button>
</DialogTrigger>

SKILL.md on GitHub

Details

Repository: github.com/thunderboltdev/shadcn-baseui
Category: Frontend Development
First seen: Jun 3, 2026