What is the role of Radix Primitives in Component Contracts?

Radix Primitives is the accessibility foundation within Component Contracts. It maps component types to Radix UI primitives, exposing their ARIA contracts and keyboard interactions, ensuring accessible composition.

How does it help manage component variants?

It manages component variant manifests, including versions, deprecation info, and required slots. It also classifies variant changes (major, minor, patch) and validates component usage across your codebase.

How does Component Contracts integrate design tokens?

It defines and manages design token bindings between Figma and code, ensuring consistent styling across design and development environments and acting as a single source of truth for visual properties.

What is Component Contracts?

Component Contracts establishes the authority layer for design-to-code component lifecycles. It provides engineering contracts for component variants and foundational accessibility contracts for your UI library.

Can Component Contracts validate component usage?

Yes, it can scan your workspace for component usage and validate variant values and required slots against the defined manifest, helping to maintain correctness and consistency in your component library.

Component Contracts: D2C Variant Management & Accessibility

Component Contracts serves as the authoritative backend for design-to-code workflows, offering two distinct MCP servers. The Variant Authority server acts as the engineering contract for component libraries, defining variants, required slots, design token mappings between Figma and code, and handling component deprecations while classifying variant surface changes. Complementing this, the Radix Primitives server provides an accessibility foundation by mapping component types to Radix UI primitives, exposing ARIA contracts, keyboard interactions, and documenting known caveats. Together, these servers provide the foundational source of truth for structural correctness and accessible composition within design-to-code operations.

主な機能

01Classify component variant changes (major, minor, patch) to inform consumers.

02Manage and validate component variant manifests, including versions and deprecation info.

03Define design token bindings between Figma and code for consistent styling.

04Scan workspaces for component usage and validate variant values and required slots.

050 GitHub stars

06Map component types to Radix UI primitives and expose their accessibility contracts.

ユースケース

01Ensuring accessibility compliance by integrating Radix UI primitive ARIA contracts and keyboard interactions.

02Managing and validating component library changes, including deprecations and semantic versioning impact.

03Establishing a single source of truth for component variants and design tokens in design-to-code workflows.