component-library-integration

To integrate design-system tokens into shadcn/ui or MUI, this process generates library-specific adapters like CSS variable mappings or MUI token themes. It reads your approved source truth artifacts and writes bridge files to ensure the UI library renders with your project's exact palette and typography.

A UI component library token bridge is an adapter that maps approved design-system tokens to a specific library's theme structure. It prevents design drift by creating concrete files like headless primitive-to-component mappings, ensuring the chosen library renders with the correct palette, typography, and motion.

Yes, the token integration process supports HeadlessUI and Mantine alongside MUI, shadcn/ui, Radix, and custom libraries. It selects an appropriate bridge depth for the chosen library and generates the required adapter outputs within the prototypes design-system directory.

Generating a token bridge for prototype handoff involves selecting an appropriate bridge depth and creating adapter files under the library-bridge directory. It requires an approved brandbook and design-system manifest, updating the manifest.json.componentLibrary.bridgePath to record the generated bridge path.

An anti-ai-slop contract is used during component integration to enforce fail-closed compliance before prototype handoff. It requires evidence-bound reports tied to the exact artifact, applying gate taxonomy checks to ensure the design-system tokens meet established quality standards.

Design tokens drift when switching UI component libraries due to missing or incorrect adapter mappings. This process prevents drift by generating a concrete token bridge that forces the new library to render using your project's previously approved palette, typography, and motion settings.