AIR Stack

Appearance

Components ​

Building consistent, accessible UI components from scratch requires managing complex states like hover, focus, and active across multiple themes.

AIR Material 3 CSS abstracts these states into highly optimized, modular CSS files. Each component uses standard HTML semantic tags combined with simple class names. Since there is no JavaScript involved, the browser natively handles states like :hover and :focus-visible, utilizing the state layer variables defined in the theme.

Please select a component from the catalog below or the sidebar to view detailed usage guidelines, HTML structures, and CSS semantics.

Actions ​

Inputs & Controls ​

Data Display ​

Feedback ​

Pickers ​

Utilities ​