building-components

by 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 ZIPGitHub775

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