# Aihio

> An AI-first design system built on native web components, with no runtime dependencies. Every component has a machine-readable schema, and the same build emits a prompt fragment, a linter with fix suggestions, and an MCP server.

Generate markup from the prompt fragment, start from a pattern where one fits, and run every snippet through aihio lint (or the MCP server's lint tool) before returning it. An issue with a suggestion is fixed by applying the suggestion.

## Start here

- [Prompt fragment](dist/aihio.prompt.md): rules, every component, the intent map, patterns, accessibility obligations, and each mistake beside its fix. The one file to load.
- [Intents](intents/): the intent vocabulary, and the components and patterns that declare each intent.
- [AI and tooling](ai/): the MCP server, the linter, and the files below.

## Components

- [Alert](components/alert/index.md): 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.
- [Avatar](components/avatar/index.md): 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](components/badge/index.md): A small non-interactive label for a status, count, or category, such as Live, Beta, or 3 new.
- [Button](components/button/index.md): 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](components/card/index.md): 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](components/cluster/index.md): Horizontal layout primitive for grouped inline items such as button rows, badge lists, and toolbars. Wraps when space runs out.
- [Combobox](components/combobox/index.md): 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.
- [Data Grid](components/data-grid/index.md): 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](components/dialog/index.md): 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](components/dropdown/index.md): 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](components/field/index.md): Form field wrapper that lays out a label, control, description, and error message, and wires the accessibility relationships between them.
- [Grid](components/grid/index.md): 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](components/input/index.md): 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](components/pagination/index.md): 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](components/stack/index.md): Vertical layout primitive that applies the system's spacing rhythm between its children.
- [Switch](components/switch/index.md): 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.
- [Table](components/table/index.md): 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](components/tabs/index.md): 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](components/toggle/index.md): A button that stays pressed or unpressed, such as Bold in a text toolbar. It renders a real <button aria-pressed>.

## Patterns

- [Auth Form](patterns/auth-form/): Card-based authentication form with labelled fields and a dominant submit action inside the form element.
- [Data Card Grid](patterns/data-card-grid/): A dashboard-style grid of compact summary cards with status, ownership, and a follow-up action. aihio-grid drops columns as it narrows, and the cards are a list.
- [Data Table](patterns/data-table/): A list of records to compare and sort: a heading with the primary action, a search form, a table whose columns sort, whose row headers link to each record, and whose rows carry a status and a menu of actions, and aihio-pagination by link. The table is named by the section's heading, and on a narrow screen it scrolls inside its own box.
- [Destructive Confirmation](patterns/destructive-confirmation/): A modal confirmation flow for irreversible actions with cancel-first ordering. The trigger opens the dialog and Cancel closes it through Invoker Commands, and the confirm button submits the dialog's form, so the flow works without script.
- [Empty State](patterns/empty-state/): A blank-slate surface that explains what is missing and points the user toward the next action.
- [Inline Form With Validation](patterns/inline-form-validation/): A compact form that keeps the invalid field, its message, and the corrective action in one place.
- [Settings Section](patterns/settings-section/): A settings panel in a card: a form of labelled fields — text, a native select for a short list of choices, and a switch for an on/off setting — with Reset and Save that reset and submit it.
- [Tabbed Settings](patterns/tabbed-settings/): A settings view split across tabs so related configuration stays grouped without overwhelming the page. Each panel is its own form with its own Save.
- [Toast-Style Alert Stack](patterns/toast-alert-stack/): A lightweight stacked-notification pattern for transient system updates.

## Optional

- [Full schema](dist/schema.json): components, intents, patterns, examples, and counterexamples as JSON.
- [Semantic tokens](dist/semantic-tokens.md): the custom properties to style with, and what each is for.
- [Token values](dist/tokens.json): every token with resolved light and dark values.
- [Everything as one file](llms-full.txt): the prompt fragment and every component page.