# Material 3 Expressive Docs

> Interactive documentation for Material 3 Expressive on Android. Every demo is the real Compose component. Pages describe when to use each component, show runnable Kotlin examples, list parameters and cover accessibility.

Compose Multiplatform 1.12, Material3 1.12.0-alpha03 (Jetpack Material3 1.5 alpha line). Expressive APIs need `@OptIn(ExperimentalMaterial3ExpressiveApi::class)`.
Each page below is available as plain markdown. Prefer these over the interactive app, which is client rendered.

## Foundations

- [Getting started](https://m3e.ljzapps.app/docs/foundations/getting-started.md): Add Material 3 Expressive to a Compose project in a few lines.
- [For AI agents](https://m3e.ljzapps.app/docs/foundations/ai-agents.md): An MCP server, llms.txt, markdown pages and in-page tools, so coding agents read these docs instead of guessing.
- [Theming](https://m3e.ljzapps.app/docs/foundations/theming.md): MaterialTheme, dynamic color and how to build a scheme from one seed color.
- [Color](https://m3e.ljzapps.app/docs/foundations/color.md): A full color scheme is generated from one seed color. Roles, not hex values, carry the meaning.
- [Typography](https://m3e.ljzapps.app/docs/foundations/typography.md): Fifteen baseline styles, fifteen emphasized variants, one typeface.
- [Shape](https://m3e.ljzapps.app/docs/foundations/shape.md): A corner radius scale plus 35 expressive shapes that components can morph between.
- [Elevation](https://m3e.ljzapps.app/docs/foundations/elevation.md): Depth comes from tonal surface colors first and from shadows only where separation is needed.
- [Motion](https://m3e.ljzapps.app/docs/foundations/motion.md): Springs replace fixed easing curves. Two schemes ship: standard and expressive.
- [Layout](https://m3e.ljzapps.app/docs/foundations/layout.md): Window size classes decide which navigation and how many panes a screen shows.
- [Interaction states](https://m3e.ljzapps.app/docs/foundations/interaction-states.md): Hover, focus, press and drag states, and how to observe them.
- [Iconography](https://m3e.ljzapps.app/docs/foundations/iconography.md): Material Symbols, sizes and how icons take their color.
- [Adaptive design](https://m3e.ljzapps.app/docs/foundations/adaptive-design.md): Layouts that respond to window size, posture and input.
- [Accessibility](https://m3e.ljzapps.app/docs/foundations/accessibility.md): Contrast, touch targets, semantics and focus are part of every component.

## Components: Actions

- [Button group](https://m3e.ljzapps.app/docs/components/button-group.md): Arranges related buttons and moves the ones that do not fit into an overflow menu.
- [Buttons](https://m3e.ljzapps.app/docs/components/button.md): Let people take an action. Five types, five sizes, and shapes that morph when pressed.
- [Connected button group](https://m3e.ljzapps.app/docs/components/connected-button-group.md): Toggle buttons that share one row and morph their shape on press and selection.
- [Extended FAB](https://m3e.ljzapps.app/docs/components/extended-fab.md): A floating action button with a text label, in four sizes, that collapses to its icon.
- [FAB menu](https://m3e.ljzapps.app/docs/components/fab-menu.md): A FAB that opens into a stack of related actions.
- [Floating action button](https://m3e.ljzapps.app/docs/components/fab.md): The primary action of a screen, in five sizes. The extended variant adds a label.
- [Icon button](https://m3e.ljzapps.app/docs/components/icon-button.md): A compact button that shows one icon. Four types, five sizes and three widths.
- [Segmented button](https://m3e.ljzapps.app/docs/components/segmented-button.md): A row of two to five options for choosing one or several of them.
- [Split button](https://m3e.ljzapps.app/docs/components/split-button.md): Pairs a primary action with a menu of related alternatives.
- [Toggle button](https://m3e.ljzapps.app/docs/components/toggle-button.md): A button that keeps a selected state and morphs between round and square when it changes.

## Components: Communication

- [Badge](https://m3e.ljzapps.app/docs/components/badge.md): A small marker that shows a status or a count on top of another element.
- [Icon](https://m3e.ljzapps.app/docs/components/icon.md): Draws a vector or bitmap symbol that follows the content color.
- [Loading indicator](https://m3e.ljzapps.app/docs/components/loading-indicator.md): A morphing shape that shows an indeterminate wait of up to a few seconds.
- [Progress indicator](https://m3e.ljzapps.app/docs/components/progress-indicator.md): Shows how far an operation has come, as a bar or a ring, flat or wavy.
- [Snackbar](https://m3e.ljzapps.app/docs/components/snackbar.md): A short message about a process that just happened, with an optional action.
- [Tooltip](https://m3e.ljzapps.app/docs/components/tooltip.md): A short label or explanation that appears on hover, focus or long press.

## Components: Containment

- [Bottom sheet](https://m3e.ljzapps.app/docs/components/bottom-sheet.md): A surface anchored to the bottom edge for secondary content and actions.
- [Card](https://m3e.ljzapps.app/docs/components/card.md): A container for content and actions about a single subject.
- [Carousel](https://m3e.ljzapps.app/docs/components/carousel.md): Scrolling collections of items whose sizes change as they move through the viewport.
- [Dialog](https://m3e.ljzapps.app/docs/components/dialog.md): A modal window for a decision or a small task that needs the user's attention.
- [Divider](https://m3e.ljzapps.app/docs/components/divider.md): A thin line that groups content in lists and layouts.
- [List](https://m3e.ljzapps.app/docs/components/list.md): Rows of related content with optional icons, supporting text and trailing controls.
- [Swipe to dismiss](https://m3e.ljzapps.app/docs/components/swipe-to-dismiss.md): Reveals or triggers an action when an item is swiped sideways.

## Components: Navigation

- [Bottom app bar](https://m3e.ljzapps.app/docs/components/bottom-app-bar.md): Puts the most important actions of a screen within thumb reach.
- [Docked and full-screen search](https://m3e.ljzapps.app/docs/components/full-screen-search.md): Two ways to show search results: in a dropdown under the field or on a full-screen surface.
- [Floating toolbar](https://m3e.ljzapps.app/docs/components/floating-toolbar.md): A toolbar that floats above content with actions for the current context.
- [Modal and dismissible drawer](https://m3e.ljzapps.app/docs/components/modal-navigation-drawer.md): A navigation panel that slides over the content or pushes it aside, and can be closed again.
- [Modal navigation rail](https://m3e.ljzapps.app/docs/components/modal-navigation-rail.md): A rail that expands over the content as a modal panel and collapses back to icons.
- [Navigation bar](https://m3e.ljzapps.app/docs/components/navigation-bar.md): Switches between three to five top level destinations on compact windows.
- [Navigation drawer](https://m3e.ljzapps.app/docs/components/navigation-drawer.md): A side panel with many destinations. Modal, dismissible or permanent.
- [Navigation rail](https://m3e.ljzapps.app/docs/components/navigation-rail.md): A vertical rail that collapses to icons or expands to full labels.
- [Search](https://m3e.ljzapps.app/docs/components/search.md): A search field that expands into a list of suggestions or results.
- [Tabs](https://m3e.ljzapps.app/docs/components/tabs.md): Organize related content at one level of hierarchy and switch between views.
- [Top app bar](https://m3e.ljzapps.app/docs/components/top-app-bar.md): Shows the screen title and the most important actions at the top of a screen.

## Components: Layout and structure

- [App bar row](https://m3e.ljzapps.app/docs/components/app-bar-row.md): A row of actions that moves what does not fit into an overflow menu.
- [Drag handle](https://m3e.ljzapps.app/docs/components/drag-handle.md): A grabbable bar between two panes that lets people resize them.
- [List-detail layout](https://m3e.ljzapps.app/docs/components/list-detail.md): Shows a list and the selected item side by side, or one after the other on small windows.
- [Scaffold](https://m3e.ljzapps.app/docs/components/scaffold.md): The basic screen layout: top bar, bottom bar, FAB, snackbars and content.
- [Supporting pane layout](https://m3e.ljzapps.app/docs/components/supporting-pane.md): A primary pane with a secondary pane of related content next to it.
- [Surface](https://m3e.ljzapps.app/docs/components/surface.md): The building block of every container: shape, color, border and elevation in one place.
- [Text](https://m3e.ljzapps.app/docs/components/text.md): Displays text with a style from the theme's type scale.

## Components: Selection and input

- [Autocomplete](https://m3e.ljzapps.app/docs/components/autocomplete.md): A text field that suggests matching options while the user types.
- [Checkbox](https://m3e.ljzapps.app/docs/components/checkbox.md): Lets people select one or more items from a set, or turn an option on or off.
- [Chips](https://m3e.ljzapps.app/docs/components/chips.md): Compact elements for filters, assistance, entered data and suggestions.
- [Date picker](https://m3e.ljzapps.app/docs/components/date-picker.md): Lets people choose a date or a range of dates, by calendar or by typing.
- [Date range picker](https://m3e.ljzapps.app/docs/components/date-range-picker.md): Lets people pick a start and an end date on a scrolling calendar.
- [Menu](https://m3e.ljzapps.app/docs/components/menu.md): A temporary list of choices or actions that opens from a button or a field.
- [Password field](https://m3e.ljzapps.app/docs/components/secure-text-field.md): A text field that hides what is typed and can reveal it on request.
- [Pull to refresh](https://m3e.ljzapps.app/docs/components/pull-to-refresh.md): Lets people reload a list by pulling it down, with a loading indicator as feedback.
- [Radio button](https://m3e.ljzapps.app/docs/components/radio-button.md): Lets people choose exactly one option from a short list.
- [Slider](https://m3e.ljzapps.app/docs/components/slider.md): Picks a value or a range along a track. Continuous or in steps.
- [Switch](https://m3e.ljzapps.app/docs/components/switch.md): Toggles one setting on or off, and applies the change immediately.
- [Text field](https://m3e.ljzapps.app/docs/components/text-field.md): Lets people enter and edit text. Filled or outlined, with labels, icons and helper text.
- [Time picker](https://m3e.ljzapps.app/docs/components/time-picker.md): Lets people choose a time on a dial or by typing it.
- [Vertical slider](https://m3e.ljzapps.app/docs/components/vertical-slider.md): A slider that runs top to bottom, for levels, equalizers and mixers.

## Machine readable

- [Complete documentation in one file](https://m3e.ljzapps.app/llms-full.txt): all pages concatenated
- [JSON index](https://m3e.ljzapps.app/docs/index.json): ids, categories, APIs, parameters and URLs of every page
- [Design tokens](https://m3e.ljzapps.app/docs/tokens.json): baseline color roles, type scale and shape scale
- [MCP server](https://m3e.ljzapps.app/mcp): Streamable HTTP endpoint with search, component, snippet and token tools
- [Agent skill](https://m3e.ljzapps.app/skills/m3-expressive-docs/SKILL.md): instructions for coding agents
- [Source repository](https://github.com/LJZApps/material-3-expressive-docs)