Wire UI
AI-native unstyled primitives framework. Headless, compound components with AI-integrated docs. Zero CSS shipped — style everything through data-* attributes that reflect interactive state.
Why Wire UI?
Most component libraries bundle design decisions you can’t escape. Wire UI takes the opposite approach: every component is a headless, unstyled primitive — pure behaviour, accessibility, and state tracking with no visual opinion. You get the interaction logic, keyboard handling, and ARIA attributes. Nothing else.
Style with your own CSS, Tailwind classes, or whatever approach you prefer — targeting data-* attributes that expose every interactive state.
// Wire UI ships no styles — just unstyled primitives:
<Button onClick={handleClick}>Save</Button>
// Style via data-* attributes with any CSS approach:
<Button className="
px-4 py-2 rounded bg-blue-600 text-white
[data-hover]:bg-blue-700
[data-active]:scale-95
[data-focus-visible]:ring-2
[data-disabled]:opacity-50
">
Save
</Button>Core principles
AI-native. AI-integrated docs with llms.txt, machine-readable API references, and MCP server support. Built for AI-assisted development workflows from the ground up.
Unstyled primitives. Zero CSS shipped, zero design opinions. Every component is a bare building block — you own every pixel of your design system.
Compound components. Complex widgets follow the Component.Part pattern. You compose the markup, control the order, and add whatever wrapper elements you need.
State via data-* attributes. Every interactive state (hover, focus, active, disabled, open/closed) is exposed as a data attribute. Style with CSS attribute selectors.
asChild for polymorphism. Pass asChild to Button to merge all props onto your own child element — great for router links and icon buttons.