Saved
Your changes are live.
Alert
A callout for a message the user should notice where it is shown: a failed save, a confirmation that something worked, a warning about a setting. Only the destructive variant interrupts a screen reader.
Components
Each one drawn live. Every page is generated from the component's contract in dist/schema.json, the
same contract the linter and the MCP server read.
Avatar
A round picture of a person or entity, such as the account owner in a header, falling back to initials when there is no image or it fails to load.
Badge
A small non-interactive label for a status, count, or category, such as Live, Beta, or 3 new.
Button
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.
Card
A bordered surface that groups related content, with an optional header (title and description), content area, and footer for actions, such as a settings section or an item in a grid.
Cluster
Horizontal layout primitive for grouped inline items such as button rows, badge lists, and toolbars. Wraps when space runs out.
Combobox
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.
| Request | Duration |
|---|---|
| #1 | 38 |
| #2 | 412 |
| #3 | 17 |
Data Grid
A virtualized data table for large datasets, more rows than a page can hold (thousands to hundreds of thousands): one scrolling box in which only the rows in view are rendered, by your code, when the grid asks for them. Arrow keys move between cells as in a spreadsheet, and the grid tells assistive technology how many rows there are and which ones it shows. Find in page, printing, and reading the rows in a screen reader's browse mode only reach the rendered rows; when people need those, use aihio-table with aihio-pagination instead.
Dialog
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".
Dropdown
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.
Field
Form field wrapper that lays out a label, control, description, and error message, and wires the accessibility relationships between them.
Grid
Layout primitive for a grid of equal columns, such as a grid of cards. Columns are never narrower than 16rem and drop away as the grid narrows, so it needs no breakpoints; columns caps how many there are.
Input
A single-line text field (text, email, password, number, search, and the other native types) that submits with its form. Put it inside aihio-field to get a label, description, and error message.
Pagination
Navigation between the pages of a long list (a pager): previous and next, the first and last page, and the pages around the current one. With href each page is a link with its own address; without it each page is a button your code answers. Use it under a table, search results, or a grid of cards when the whole list is too long to show at once.
Stack
Vertical layout primitive that applies the system's spacing rhythm between its children.
Switch
An on/off setting that submits with its form, such as Email notifications on a settings page. Renders a real <input type="checkbox" role="switch">. Put it inside aihio-field for a label and description; for a pressed state in a toolbar (Bold, Italic) use aihio-toggle instead.
| Invoice | Status | Amount |
|---|---|---|
| INV-1042 | €1,250.00 | |
| INV-1043 | €980.50 |
Table
A data table: records in rows and columns, compared by scanning down a column. It wraps a native <table> and gives it the system's styles, sortable columns, and a scroll box the keyboard can reach when the table is too wide for the screen. Use it for records people compare (invoices, members, deployments); use aihio-grid of cards for a few summaries, and never a table for layout. For more rows than a page can hold, show one page at a time with aihio-pagination, or use aihio-data-grid.
Tabs
Switches between sibling panels of content with a row of tabs, such as the sections of a settings page. Arrow keys move between tabs.
Toggle
A button that stays pressed or unpressed, such as Bold in a text toolbar. It renders a real <button aria-pressed>.