Get the FREE Ultimate OpenClaw Setup Guide →

shadcn-base

Scanned
npx machina-cli add skill noklip-io/agent-skills/shadcn-base --openclaw
Files (1)
SKILL.md
3.0 KB

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:

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.

Source

git clone https://github.com/noklip-io/agent-skills/blob/main/skills/shadcn-base/SKILL.mdView on GitHub

Overview

This skill documents the Base UI variant of shadcn/ui and guides you to official docs and component pages. It covers how to use copy-and-own styled components on top of Base UI’s headless primitives, plus the composition and render patterns that drive Base UI apps.

How This Skill Works

Base UI provides styled, copy-and-own components layered on headless primitives. Components are assembled via compound subcomponents and render-prop substitution (render/useRender), following the Base UI composition pattern described in the references.

When to Use It

  • You need the Base UI version of shadcn/ui components for a project and want official docs and component pages.
  • You’re setting up a project with the Base UI stack and need installation or CLI guidance.
  • You’re theming a Base UI app and want design tokens and dark-mode guidance.
  • You’re building forms and need field patterns or integrations (e.g., Form libraries) for Base UI.
  • You’re working with registries or MCP guidance within the Base UI stack and need the related docs.

Quick Start

  1. Step 1: Read references/overview.md to understand the Base UI scope and doc entry points.
  2. Step 2: Use references/components.md and references/installation.md (or references/cli.md) to start a project and locate components.
  3. Step 3: Check references/changelog.md before shipping and reference the composition-pattern docs for render/useRender guidance.

Best Practices

  • Start with references/overview.md to understand scope and doc entry points.
  • Use references/components.md to locate the exact component you need.
  • Adopt the copy-and-own styled components on headless primitives and honor the compound subcomponent approach.
  • Consult theming and dark-mode references for consistent design tokens and visuals.
  • Check references/changelog.md before shipping changes to stay aligned with releases.

Example Use Cases

  • Open UI docs at ui.shadcn.com/docs and implement a Base UI-styled component using the copy-and-own pattern.
  • Navigate to base-ui docs at base-ui.com and follow installation and CLI setup steps for a new project.
  • Build a form using references/forms.md and references/forms-integrations.md to ensure proper field patterns and validations.
  • Create a themed component by applying design tokens from references/theming.md and verify dark-mode behavior from references/dark-mode.md.
  • Configure and consult registries via references/registry.md and references/registry-schema.md as part of a Base UI workflow.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗