$ loading_
Manage component variants and accessible composition for design-to-code workflows.
Copy the install command and let the AI configure it · recommended for beginners
No copy-paste install info for "component-contracts" yet — see the docs or source repo.
Use component-contracts Variant Authority to organize a variant manifest for a button component with size, variant, and state attributes, and output a shared structure for both design and engineering.
A structured button variant manifest that can serve as a shared source of truth for design-to-code work.
Using component-contracts Radix Primitives, create an accessibility composition plan for a dropdown menu and explain which primitives should be combined.
A composition recommendation based on Radix UI primitives to help build an accessible component structure.
Use component-contracts to outline the design-to-code rules for a card component, listing both variant definitions and accessibility composition requirements.
A component spec summary covering both variant definitions and accessibility requirements.
Designers and frontend developers can use it to centrally manage component variant manifests in a design system, reducing drift between design files and code.
When a team assembles interactive components with Radix UI, it can use the Radix Primitives capability to define accessible composition patterns.
During cross-functional component delivery, product, design, and engineering teams can use it as a shared source of truth for design-to-code consistency.
It provides two MCP servers: Variant Authority for managing component variant manifests, and Radix Primitives for accessibility composition based on Radix UI. Together they support a shared design-to-code standard.
It is best suited for design system teams that maintain component standards, especially in designer, frontend developer, and product collaboration workflows.
The provided information does not include installation steps, runtime requirements, or API key needs. Please check the source repository for setup details.
Scan React and Vue projects to expose component metadata for AI coding agents.
Search, read, and discover related design system components via MCP.
Sync and index component libraries so AI can search, understand, and generate component code.
Map Figma designs to real React components for production-ready AI code generation.
Lets AI access design tokens and component contracts via MCP consistently.
Gives AI coding agents queryable design system guidance for accurate implementation.