# AirUI

> AirUI design system documentation and resources

## Getting Started

Introduction and setup instructions for AirUI

- [Llms Txt](https://air-ui.netlify.app/raw/docs/getting-started/agents/llms-txt.md)
- [Mcp Server](https://air-ui.netlify.app/raw/docs/getting-started/agents/mcp-server.md)
- [Configuration](https://air-ui.netlify.app/raw/docs/getting-started/configuration.md)
- [](https://air-ui.netlify.app/raw/docs/getting-started.md)
- [Installation From Existing](https://air-ui.netlify.app/raw/docs/getting-started/installation-from-existing.md)
- [Installation From Scratch](https://air-ui.netlify.app/raw/docs/getting-started/installation-from-scratch.md)
- [Design Tokens](https://air-ui.netlify.app/raw/docs/getting-started/theme/design-tokens.md)
- [Theme Customization](https://air-ui.netlify.app/raw/docs/getting-started/theme/theme-customization.md)

## Components

Documentation for Air UI components

- [Accordion](https://air-ui.netlify.app/raw/docs/components/accordion.md)
- [Accordion Group](https://air-ui.netlify.app/raw/docs/components/accordion-group.md)
- [Action Button](https://air-ui.netlify.app/raw/docs/components/action-button.md)
- [Action Icon Button](https://air-ui.netlify.app/raw/docs/components/action-icon-button.md)
- [Action Panel](https://air-ui.netlify.app/raw/docs/components/action-panel.md)
- [Alert](https://air-ui.netlify.app/raw/docs/components/alert.md)
- [Angle Slider](https://air-ui.netlify.app/raw/docs/components/angle-slider.md)
- [Angle Slider Field](https://air-ui.netlify.app/raw/docs/components/angle-slider-field.md)
- [Author](https://air-ui.netlify.app/raw/docs/components/author.md)
- [Avatar](https://air-ui.netlify.app/raw/docs/components/avatar.md)
- [Avatar Stack](https://air-ui.netlify.app/raw/docs/components/avatar-stack.md)
- [Badge](https://air-ui.netlify.app/raw/docs/components/badge.md)
- [Badge Stack](https://air-ui.netlify.app/raw/docs/components/badge-stack.md)
- [Breadcrumbs](https://air-ui.netlify.app/raw/docs/components/breadcrumbs.md)
- [Button Field](https://air-ui.netlify.app/raw/docs/components/button-field.md)
- [Button Pagination](https://air-ui.netlify.app/raw/docs/components/button-pagination.md)
- [Card](https://air-ui.netlify.app/raw/docs/components/card.md)
- [Checkbox](https://air-ui.netlify.app/raw/docs/components/checkbox.md)
- [Checkbox Field](https://air-ui.netlify.app/raw/docs/components/checkbox-field.md)
- [Checkbox Group Field](https://air-ui.netlify.app/raw/docs/components/checkbox-group-field.md)
- [Circle Stepper](https://air-ui.netlify.app/raw/docs/components/circle-stepper.md)
- [Collapsible](https://air-ui.netlify.app/raw/docs/components/collapsible.md)
- [Compact Header](https://air-ui.netlify.app/raw/docs/components/compact-header.md)
- [Confirmation Details Card](https://air-ui.netlify.app/raw/docs/components/confirmation-details-card.md)
- [Contact Details Card](https://air-ui.netlify.app/raw/docs/components/contact-details-card.md)
- [Contained Icon](https://air-ui.netlify.app/raw/docs/components/contained-icon.md)
- [Content Item](https://air-ui.netlify.app/raw/docs/components/content-item.md)
- [Content Page Header](https://air-ui.netlify.app/raw/docs/components/content-page-header.md)
- [Content Placeholder](https://air-ui.netlify.app/raw/docs/components/content-placeholder.md)
- [Context Menu](https://air-ui.netlify.app/raw/docs/components/context-menu.md)
- [Copy Button](https://air-ui.netlify.app/raw/docs/components/copy-button.md)
- [Current Active Subscription Card](https://air-ui.netlify.app/raw/docs/components/current-active-subscription-card.md)
- [Danger Modal Dialog](https://air-ui.netlify.app/raw/docs/components/danger-modal-dialog.md)
- [Data Details](https://air-ui.netlify.app/raw/docs/components/data-details.md)
- [Data Field](https://air-ui.netlify.app/raw/docs/components/data-field.md)
- [Divider](https://air-ui.netlify.app/raw/docs/components/divider.md)
- [Drag Placeholder](https://air-ui.netlify.app/raw/docs/components/drag-placeholder.md)
- [Drawer](https://air-ui.netlify.app/raw/docs/components/drawer.md)
- [Dropdown Menu](https://air-ui.netlify.app/raw/docs/components/dropdown-menu.md)
- [Dropdown Select](https://air-ui.netlify.app/raw/docs/components/dropdown-select.md)
- [Dropzone](https://air-ui.netlify.app/raw/docs/components/dropzone.md)
- [Empty State](https://air-ui.netlify.app/raw/docs/components/empty-state.md)
- [Error Display](https://air-ui.netlify.app/raw/docs/components/error-display.md)
- [Feature](https://air-ui.netlify.app/raw/docs/components/feature.md)
- [Feature Card](https://air-ui.netlify.app/raw/docs/components/feature-card.md)
- [File Upload Field](https://air-ui.netlify.app/raw/docs/components/file-upload-field.md)
- [Footer](https://air-ui.netlify.app/raw/docs/components/footer.md)
- [Form](https://air-ui.netlify.app/raw/docs/components/form.md)
- [Gallery](https://air-ui.netlify.app/raw/docs/components/gallery.md)
- [Grid](https://air-ui.netlify.app/raw/docs/components/grid.md)
- [Heading](https://air-ui.netlify.app/raw/docs/components/heading.md)
- [Help Topic Card](https://air-ui.netlify.app/raw/docs/components/help-topic-card.md)
- [Icon](https://air-ui.netlify.app/raw/docs/components/icon.md)
- [Icon Badge](https://air-ui.netlify.app/raw/docs/components/icon-badge.md)
- [Icon Text Badge](https://air-ui.netlify.app/raw/docs/components/icon-text-badge.md)
- [Image](https://air-ui.netlify.app/raw/docs/components/image.md)
- [Info Modal Dialog](https://air-ui.netlify.app/raw/docs/components/info-modal-dialog.md)
- [Input Field](https://air-ui.netlify.app/raw/docs/components/input-field.md)
- [Kbd](https://air-ui.netlify.app/raw/docs/components/kbd.md)
- [Lightbox](https://air-ui.netlify.app/raw/docs/components/lightbox.md)
- [List](https://air-ui.netlify.app/raw/docs/components/list.md)
- [Loading](https://air-ui.netlify.app/raw/docs/components/loading.md)
- [Loading Screen](https://air-ui.netlify.app/raw/docs/components/loading-screen.md)
- [Marquee](https://air-ui.netlify.app/raw/docs/components/marquee.md)
- [Metric Card](https://air-ui.netlify.app/raw/docs/components/metric-card.md)
- [Modal Dialog](https://air-ui.netlify.app/raw/docs/components/modal-dialog.md)
- [Nav Link](https://air-ui.netlify.app/raw/docs/components/nav-link.md)
- [Nav Sidebar](https://air-ui.netlify.app/raw/docs/components/nav-sidebar.md)
- [Notifications Popover](https://air-ui.netlify.app/raw/docs/components/notifications-popover.md)
- [Option Buttons Group Field](https://air-ui.netlify.app/raw/docs/components/option-buttons-group-field.md)
- [Overtitle](https://air-ui.netlify.app/raw/docs/components/overtitle.md)
- [Pin Field](https://air-ui.netlify.app/raw/docs/components/pin-field.md)
- [Popover](https://air-ui.netlify.app/raw/docs/components/popover.md)
- [Progress Bar](https://air-ui.netlify.app/raw/docs/components/progress-bar.md)
- [Progress Circle](https://air-ui.netlify.app/raw/docs/components/progress-circle.md)
- [Qr Code](https://air-ui.netlify.app/raw/docs/components/qr-code.md)
- [Radio Group Field](https://air-ui.netlify.app/raw/docs/components/radio-group-field.md)
- [Rating](https://air-ui.netlify.app/raw/docs/components/rating.md)
- [Repeater Field](https://air-ui.netlify.app/raw/docs/components/repeater-field.md)
- [Rules Field](https://air-ui.netlify.app/raw/docs/components/rules-field.md)
- [Scroll Area](https://air-ui.netlify.app/raw/docs/components/scroll-area.md)
- [Search Field](https://air-ui.netlify.app/raw/docs/components/search-field.md)
- [Section](https://air-ui.netlify.app/raw/docs/components/section.md)
- [Select Field](https://air-ui.netlify.app/raw/docs/components/select-field.md)
- [Selectable Card](https://air-ui.netlify.app/raw/docs/components/selectable-card.md)
- [Selectable Card Field](https://air-ui.netlify.app/raw/docs/components/selectable-card-field.md)
- [Signature Field](https://air-ui.netlify.app/raw/docs/components/signature-field.md)
- [Signature Pad](https://air-ui.netlify.app/raw/docs/components/signature-pad.md)
- [Simple Pagination](https://air-ui.netlify.app/raw/docs/components/simple-pagination.md)
- [Skeleton](https://air-ui.netlify.app/raw/docs/components/skeleton.md)
- [Slider](https://air-ui.netlify.app/raw/docs/components/slider.md)
- [Slider Field](https://air-ui.netlify.app/raw/docs/components/slider-field.md)
- [Slot Field](https://air-ui.netlify.app/raw/docs/components/slot-field.md)
- [Spinner](https://air-ui.netlify.app/raw/docs/components/spinner.md)
- [Step Indicator](https://air-ui.netlify.app/raw/docs/components/step-indicator.md)
- [Step Switch](https://air-ui.netlify.app/raw/docs/components/step-switch.md)
- [Step Switch Field](https://air-ui.netlify.app/raw/docs/components/step-switch-field.md)
- [Subscription Plan Card](https://air-ui.netlify.app/raw/docs/components/subscription-plan-card.md)
- [Success Modal Dialog](https://air-ui.netlify.app/raw/docs/components/success-modal-dialog.md)
- [Switch](https://air-ui.netlify.app/raw/docs/components/switch.md)
- [Switch Field](https://air-ui.netlify.app/raw/docs/components/switch-field.md)
- [Tab Stepper](https://air-ui.netlify.app/raw/docs/components/tab-stepper.md)
- [Table](https://air-ui.netlify.app/raw/docs/components/table.md)
- [Tabs](https://air-ui.netlify.app/raw/docs/components/tabs.md)
- [Tags Field](https://air-ui.netlify.app/raw/docs/components/tags-field.md)
- [Testimonial Card](https://air-ui.netlify.app/raw/docs/components/testimonial-card.md)
- [Text Line Divider](https://air-ui.netlify.app/raw/docs/components/text-line-divider.md)
- [Textarea Field](https://air-ui.netlify.app/raw/docs/components/textarea-field.md)
- [Toggle Buttons Group Field](https://air-ui.netlify.app/raw/docs/components/toggle-buttons-group-field.md)
- [Tree View](https://air-ui.netlify.app/raw/docs/components/tree-view.md)
- [Tri State Checkbox](https://air-ui.netlify.app/raw/docs/components/tri-state-checkbox.md)
- [Tri State Checkbox Field](https://air-ui.netlify.app/raw/docs/components/tri-state-checkbox-field.md)
- [Tri State Switch](https://air-ui.netlify.app/raw/docs/components/tri-state-switch.md)
- [Tri State Switch Field](https://air-ui.netlify.app/raw/docs/components/tri-state-switch-field.md)
- [Unique Subscription Plan Card](https://air-ui.netlify.app/raw/docs/components/unique-subscription-plan-card.md)
- [User](https://air-ui.netlify.app/raw/docs/components/user.md)
- [Vertical Stepper](https://air-ui.netlify.app/raw/docs/components/vertical-stepper.md)

## Utilities

Documentation for Air UI utilities

- [Convert String Into Slug Format](https://air-ui.netlify.app/raw/docs/utils/convert-string-into-slug-format.md)
- [Convert To Select Options](https://air-ui.netlify.app/raw/docs/utils/convert-to-select-options.md)
- [Copy To Clipboard](https://air-ui.netlify.app/raw/docs/utils/copy-to-clipboard.md)
- [Delay](https://air-ui.netlify.app/raw/docs/utils/delay.md)
- [Encode Svg To Data Uri](https://air-ui.netlify.app/raw/docs/utils/encode-svg-to-data-uri.md)
- [Evaluate Secure Password Conditions](https://air-ui.netlify.app/raw/docs/utils/evaluate-secure-password-conditions.md)
- [Filter Alphabetic](https://air-ui.netlify.app/raw/docs/utils/filter-alphabetic.md)
- [Format Localized Date](https://air-ui.netlify.app/raw/docs/utils/format-localized-date.md)
- [Format Localized Date Time](https://air-ui.netlify.app/raw/docs/utils/format-localized-date-time.md)
- [Format Number With Thousands](https://air-ui.netlify.app/raw/docs/utils/format-number-with-thousands.md)
- [Generate Secure Password](https://air-ui.netlify.app/raw/docs/utils/generate-secure-password.md)
- [Generate Username](https://air-ui.netlify.app/raw/docs/utils/generate-username.md)
- [Get Credit Card Last Four Numbers](https://air-ui.netlify.app/raw/docs/utils/get-credit-card-last-four-numbers.md)
- [Get Env Error Message](https://air-ui.netlify.app/raw/docs/utils/get-env-error-message.md)
- [Get Full Name](https://air-ui.netlify.app/raw/docs/utils/get-full-name.md)
- [Get Initials](https://air-ui.netlify.app/raw/docs/utils/get-initials.md)
- [Get Paginated Data](https://air-ui.netlify.app/raw/docs/utils/get-paginated-data.md)
- [Get Rating Indicator](https://air-ui.netlify.app/raw/docs/utils/get-rating-indicator.md)
- [Get Stack Counter Content](https://air-ui.netlify.app/raw/docs/utils/get-stack-counter-content.md)
- [Get User Display Name](https://air-ui.netlify.app/raw/docs/utils/get-user-display-name.md)
- [Is Secure Password](https://air-ui.netlify.app/raw/docs/utils/is-secure-password.md)
- [Lowercase First Letter](https://air-ui.netlify.app/raw/docs/utils/lowercase-first-letter.md)
- [Trim Text](https://air-ui.netlify.app/raw/docs/utils/trim-text.md)
- [Uppercase First Letter](https://air-ui.netlify.app/raw/docs/utils/uppercase-first-letter.md)
- [Validate Array Field](https://air-ui.netlify.app/raw/docs/utils/validate-array-field.md)
- [Validate Boolean Field](https://air-ui.netlify.app/raw/docs/utils/validate-boolean-field.md)
- [Validate Date Range](https://air-ui.netlify.app/raw/docs/utils/validate-date-range.md)
- [Validate Email](https://air-ui.netlify.app/raw/docs/utils/validate-email.md)
- [Validate Field](https://air-ui.netlify.app/raw/docs/utils/validate-field.md)
- [Validate Password Match](https://air-ui.netlify.app/raw/docs/utils/validate-password-match.md)
- [Validate Url](https://air-ui.netlify.app/raw/docs/utils/validate-url.md)

## Blocks

Documentation for Air UI blocks

- [Hero](https://air-ui.netlify.app/raw/docs/blocks/hero.md)

## MCP Server

This site exposes a Model Context Protocol (MCP) server over streamable HTTP at https://air-ui.netlify.app/mcp.

- [airui](https://air-ui.netlify.app/mcp): Streamable HTTP endpoint — connect an MCP client to this URL to call the tools, resources and prompts exposed by this site.