Aihio emits machine-readable component contracts, semantic tokens, patterns, a linter, and an MCP server from one build. This site is generated from those artifacts and built with the components it documents — so if a page here is wrong, the package is wrong.
Three steps, no build step required. The stylesheet carries the tokens; the module registers every element.
Install the package
npm install @luntta/aihioLoad the styles and the elements
<link rel="stylesheet" href="node_modules/@luntta/aihio/dist/aihio.css">
<script type="module" src="node_modules/@luntta/aihio/dist/aihio.js"></script>Write markup
<aihio-button variant="outline">Click me</aihio-button>
In development, import aihio/dev instead to get schema-backed console warnings. The production bundle
never imports that module, so none of it ships.
Four surfaces, one schema behind all of them.
Variants, examples, each common mistake beside its fix, the full API, and the accessibility contract.
Auth flows, settings panels, confirmations, and card grids as lint-clean markup to lift wholesale.
Colour, type, space, and motion, drawn from the tokens, with the contrast contract the build enforces.
Connect an agent through the MCP server, and the lint loop that fixes its markup in one round trip.
Drawn live, and generated from dist/schema.json rather than written by hand.
An action the user takes: submit a form, open a dialog, run a command. Renders a real <button>; variant="default" is the primary style and variant="destructive" marks an irreversible action. To go to another page, put an <a href> inside it instead: the link becomes the control, styled as the button.
Form field wrapper that lays out a label, control, description, and error message, and wires the accessibility relationships between them.
A text field for picking one option from a long list: typing filters the options, and the chosen option's value submits with the form. Use it when there are too many options to scan comfortably (roughly more than ten), or when the options come from a search.
A modal dialog for a focused task or a confirmation before an irreversible action, such as deleting a project. Opens and closes from markup: commandfor plus command="--open" or command="--close".
A menu of actions or links opened from a trigger button, such as an account menu or a row's More actions. Not for choosing a form value: use aihio-combobox for that.
Switches between sibling panels of content with a row of tabs, such as the sections of a settings page. Arrow keys move between tabs.