---
name: building-components
description: Comprehensive guide for building modern, accessible, and composable UI components. Covers component taxonomy (primitives, components, blocks, templates), core design principles, and accessibility i...
---

# building-components

Comprehensive guide for building modern, accessible, and composable UI components. Covers component taxonomy (primitives, components, blocks, templates), core design principles, and accessibility implementation including ARIA, keyboard navigation, and WCAG compliance Includes patterns for composable APIs, polymorphism, controlled/uncontrolled state, and the as-child pattern for flexible element composition Provides guidance on design tokens, theming systems, styling approaches, and using...

# building-componentsby vercel
Comprehensive guide for building modern, accessible, and composable UI components. Covers component taxonomy (primitives, components, blocks, templates), core design principles, and accessibility implementation including ARIA, keyboard navigation, and WCAG compliance Includes patterns for composable APIs, polymorphism, controlled/uncontrolled state, and the as-child pattern for flexible element composition Provides guidance on design tokens, theming systems, styling approaches, and using...

`npx skills add https://github.com/vercel/components.build --skill building-components`Download ZIPGitHub

## Building Components

## When to use this skill

Use when the user is:

* Building new UI components (primitives, components, blocks, templates)

* Implementing accessibility features (ARIA, keyboard navigation, focus management)

* Creating composable component APIs (slots, render props, controlled/uncontrolled state)

* Setting up design tokens and theming systems

* Publishing components to npm or a registry

* Writing component documentation

* Implementing polymorphism or as-child patterns

* Working with data attributes for styling/state

## References

* definitions.mdx - Artifact taxonomy (primitives, components, blocks, templates)

* principles.mdx - Core principles for component design

* accessibility.mdx - ARIA, keyboard navigation, WCAG compliance

* composition.mdx - Composable component patterns

* as-child.mdx - The as-child pattern for element polymorphism

* polymorphism.mdx - Polymorphic component patterns

* types.mdx - TypeScript typing patterns for components

* state.mdx - Controlled vs uncontrolled state management

* data-attributes.mdx - Using data attributes for styling and state

* design-tokens.mdx - Design token systems and theming

* styling.mdx - Component styling approaches

* registry.mdx - shadcn-style registry distribution

* npm.mdx - Publishing components to npm

* marketplaces.mdx - Component marketplace distribution

* docs.mdx - Writing component documentation

## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

---

**Source**: https://github.com/vercel/components.build/tree/HEAD/skills/building-components
**Author**: vercel
**Discovered via**: mcpservers.org