Frequently Asked Questions

General

What is Wire UI?

Wire UI is an AI-native unstyled primitives framework. It provides headless, compound components that ship zero CSS — you style everything yourself using data-* attributes that reflect interactive state.

Is Wire UI free?

Yes. Wire UI is free and open source under the MIT License.

What frameworks does Wire UI support?

Currently React (19+). Vue and Solid support are planned for the future.

How is Wire UI different from Headless UI or Radix?

Wire UI is similar in concept (headless, unstyled) but differs in:

AI-native — built with llms.txt, SKILL.md, and an MCP server for AI-assisted development
data-* attributes — all interactive state is exposed as data attributes, not CSS classes or CSS-in-JS
Consumer-owned validation — form components never validate internally; you control when and what is invalid
asChild polymorphism — merge component behaviour onto any element

Does Wire UI ship any CSS?

No. Zero CSS, zero fonts, zero design opinions. Every component is a bare building block. You bring your own styles using Tailwind, CSS Modules, plain CSS, or any other approach.

Styling

How do I style Wire UI components?

Use CSS attribute selectors targeting data-* attributes:


// Tailwind
<Button className="[data-hover]:bg-blue-700 [data-active]:scale-95">
 
// Plain CSS
button[data-hover] { background: #1d4ed8; }

What are data attributes?

Data attributes are standard HTML attributes that Wire UI uses to expose interactive state. They are present (empty string) when active and absent when not:

Attribute	When present
`data-hover`	Mouse is over the element
`data-focus-visible`	Keyboard focus
`data-active`	Element is being pressed
`data-disabled`	Element is disabled
`data-state`	`"open"` / `"closed"`, `"checked"` / `"unchecked"`

Can I use Wire UI with Tailwind CSS?

Yes. Wire UI works perfectly with Tailwind. Use attribute selectors in your className:


<Button className="
  px-4 py-2 rounded-lg bg-blue-600 text-white
  [data-hover]:bg-blue-700
  [data-active]:scale-95
  [data-focus-visible]:ring-2
  [data-disabled]:opacity-50
">

Can I use CSS Modules or styled-components?

Yes. Wire UI is styling-agnostic. Any CSS approach that supports attribute selectors works.

Components

What components are available?

Wire UI includes 26 components across 4 categories:

Form — Button, Input, Textarea, Password, Checkbox, Radio, Switch, Select, Search, OTP, Rating
Overlay — Modal, Drawer, Dropdown, Tooltip, Accordion
Display — Alert, Avatar, Badge, Card, ProgressBar, Timeago, Image, Icon
Layout — Divider, List

What are compound components?

Compound components use the Component.Part pattern, giving you full control over markup structure:


<Input.Root>
  <Input.Label>Email</Input.Label>
  <Input.Field type="email" />
  <Input.Error />
</Input.Root>

What is `asChild`?

asChild merges all component props and behaviour onto your own child element instead of rendering the default element:


<Button asChild>
  <a href="/dashboard">Go to dashboard</a>
</Button>

The anchor tag gets all Button data attributes and event handlers.

How does validation work?

Wire UI never validates internally. You control validation by setting invalidType on form components:


<Input.Root
  invalidType={error}
  errorMessage={{ required: 'Required', email: 'Invalid email' }}
>
  <Input.Field type="email" />
  <Input.Error />
</Input.Root>

Set invalidType to a key (e.g., "required") when your logic decides the input is invalid. The component renders the matching error message.

AI Integration

What does “AI-native” mean?

Wire UI is designed for AI-assisted development workflows:

llms.txt — structured documentation files that AI coding tools can read directly
SKILL.md — machine-readable documentation with decision trees and anti-patterns for AI agents
MCP server — @wire-ui/mcp gives AI tools direct tool access to the component API

How do I use Wire UI with AI coding tools?

Cursor/Windsurf — add /llms-full.txt to your docs settings
Claude Code/Desktop — configure the MCP server for direct API access
Any AI tool — paste the llms-full.txt URL into your prompt

See the AI documentation for detailed setup instructions.

Performance

What is the bundle size?

Wire UI is lightweight. Each component is tree-shakeable — you only pay for what you import. The library has zero runtime dependencies beyond React.

Does Wire UI support tree-shaking?

Yes. Wire UI publishes ESM and CommonJS builds. Modern bundlers (Vite, webpack, Rollup) will tree-shake unused components automatically.

Does Wire UI work with SSR?

Yes. All components render correctly during server-side rendering. Interactive data attributes are added after hydration on the client — no hydration mismatches.