@vercel/components-build

An open-source standard for building modern, composable and accessible UI components.

View in AI SkillSafe app
1504 downloads
0 stars
0 demos
SKILL.md

components.build

An open-source standard for building modern, composable, and accessible UI components.

About

components.build is a formal specification that establishes best practices and guidelines for building open-source UI components for the modern web. Co-authored by Hayden Bleasel and shadcn, this specification aims to help open-source maintainers and senior front-end engineers create components that are:

  • Composable - Built with composition over inheritance, easily combined to create complex UIs
  • Accessible - WCAG-compliant with proper ARIA attributes and keyboard navigation
  • Customizable - Easy to theme and style for any design system
  • Performant - Lightweight with minimal dependencies
  • Transparent - Full code visibility and ownership
  • Well-documented - Clear examples and developer-friendly

While examples use React/TypeScript, the core principles are framework-agnostic and applicable to Vue, Svelte, Angular, and other modern frameworks.

Contributing

Contributions are welcome! This specification is informed by the open-source community and real-world component libraries.

To contribute, please read the contributing guide.

License

This project is open source and available under the MIT License.

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@vercel/components-build/verified)](https://skillsafe.ai/skill/@vercel/components-build/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@vercel/components-build/installs)](https://skillsafe.ai/skill/@vercel/components-build/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@vercel/components-build/scan)](https://skillsafe.ai/skill/@vercel/components-build/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@vercel/components-build/eval)](https://skillsafe.ai/skill/@vercel/components-build/)