home / skills / noklip-io / agent-skills / shadcn-base

shadcn-base skill

safe

This skill helps you navigate and apply Base UI patterns from shadcn/ui, accelerating component usage, theming, and forms integration.

npx playbooks add skill noklip-io/agent-skills --skill shadcn-base

Review the files below or copy the command above to add this skill to your agents.

Files (19)

SKILL.md

3.0 KB

---
name: shadcn-base
description: Use when you need the Base UI version of shadcn/ui components, docs, CLI, theming, forms, registries, or MCP guidance for shadcn’s Base UI stack.
---

# shadcn/ui (Base UI) — shadcn-base

## Overview
This skill documents the Base UI version of shadcn/ui. Use it to navigate the official Base UI docs and the shadcn/ui Base UI component pages.

shadcn/ui is not headless. It provides styled, copy-and-own components built on top of Base UI’s headless primitives. Composition follows compound components, composition-over-inheritance, and variant-driven styling.

Primary docs:
- Docs entry point: https://ui.shadcn.com/docs
- Base UI project docs: https://base-ui.com
- Base UI skill: skills/base-ui

Important:
- Base UI vs Radix docs and the conversion rule are defined in `references/overview.md`. Use that guidance instead of the Radix components index.

## Start Here
1. Read `references/overview.md` for scope and doc entry points.
2. Use `references/components.md` to find the component you need.
3. Use `references/installation.md` or `references/cli.md` to set up a project.
4. Use `references/theming.md` and `references/dark-mode.md` for design tokens.
5. Use `references/components-json.md` for CLI config details.
6. Use `references/forms.md` for field patterns and `references/forms-integrations.md` for form libs.
7. Use `references/registry.md` and `references/registry-schema.md` for registries.
8. Use `references/blocks.md` for blocks workflows.
9. Use `references/composition-pattern.md` for the composition paradigm and Base UI render rule.
10. Use `references/examples.md` for render and useRender patterns.
11. Check `references/changelog.md` before shipping.

## Composition Pattern (Short)
Base UI + shadcn/ui uses **copy-and-own styled components on headless primitives**, composed via **compound subcomponents** and **render-prop substitution** (`render` / `useRender`). Reference: `references/composition-pattern.md`.

## Reference Map
- `references/overview.md`: what shadcn/ui is and official doc entry points.
- `references/components.md`: full component list from llms.txt.
- `references/installation.md`: create/init and per-framework installation links.
- `references/cli.md`: CLI commands and options.
- `references/components-json.md`: components.json schema and key fields.
- `references/theming.md`: theming and design tokens.
- `references/dark-mode.md`: dark mode guidance and framework-specific pages.
- `references/forms.md`: field usage patterns and validation structure.
- `references/forms-integrations.md`: React Hook Form and TanStack Form pages.
- `references/registry.md`: registry docs.
- `references/registry-schema.md`: registry.json and registry-item.json schema details.
- `references/blocks.md`: blocks library workflows.
- `references/composition-pattern.md`: Base UI composition rule (render/useRender only).
- `references/examples.md`: render and useRender examples (Base UI).
- `references/mcp.md`: MCP server guidance.
- `references/changelog.md`: release notes.
- `references/links.md`: quick links index.

Overview

This skill documents the Base UI version of shadcn/ui and guides using its styled, copy-and-own components built on Base UI primitives. It helps you find docs, setup instructions, theming, forms, registries, and CLI guidance tailored to the Base UI stack. Use it when you need concrete patterns for composition, theming, or integrating forms and registries with shadcn's Base UI approach.

How this skill works

The skill maps key reference pages into a clear start sequence: overview, components index, install/CLI steps, theming and dark-mode guidance, forms integrations, registries, blocks, composition patterns, examples, MCP guidance, and changelog. It inspects which area you need (component, install, theming, forms, or CLI) and points to the precise reference resource and actionable rules for Base UI usage. It emphasizes the composition rule (render/useRender) and copy-and-own workflow for styled components.

When to use it

You need the Base UI variant of shadcn/ui component docs or examples.
Setting up a project with the shadcn Base UI stack or running the shadcn CLI for Base UI.
Designing or applying theming and dark-mode tokens for Base UI components.
Implementing forms and integrating with React Hook Form or TanStack Form using shadcn conventions.
Creating or maintaining component registries, blocks, or MCP server workflows for Base UI.

Best practices

Start with the overview and component index to scope your work before implementing components.
Follow copy-and-own: copy component code and adapt styles/tokens instead of editing upstream templates.
Adhere to the Base UI composition rule: prefer render/useRender for render-prop substitution and compound subcomponents.
Use the provided theming and dark-mode guidance to keep tokens consistent across components.
Consult the components.json and registry schemas when configuring the CLI or publishing registry items.

Example use cases

Add a shadcn Base UI dialog component to a project and adapt tokens for dark mode.
Run the shadcn CLI to scaffold Base UI components and wire them into your registry.json.
Implement form fields with React Hook Form following the forms-integrations patterns for validation and controlled inputs.
Create a blocks workflow that composes multiple Base UI components for a page builder.
Migrate a Radix-targeted pattern to Base UI using the conversion guidance in the overview reference.

FAQ

What is the core composition rule for Base UI shadcn components?

Use render/useRender and compound subcomponents—prefer render-prop substitution over other render approaches.

Where do I start when adding a Base UI component to a project?

Follow the start sequence: overview, components index, installation/CLI, theming, forms, then examples; this ensures consistent setup and tokens.