# Motif

> An open shadcn registry of interface parts for AI agents and generative media — conversation, reasoning, approvals, and the controls that frame them. Install with npx shadcn add, own the source, restyle it with your theme. Use this index to discover the available documentation pages, markdown mirrors, and registry resources before browsing.

## Docs

- Get Started
  - [Introduction](https://motif-ui.vercel.app/docs.md): An open shadcn registry of interface parts for AI agents and generative media.
  - [Installation](https://motif-ui.vercel.app/docs/installation.md)
  - [Design](https://motif-ui.vercel.app/docs/design.md): Micro-decisions that elevate interfaces from functional to refined — structured as standard Error vs. Right patterns with live interactive examples and concrete measurements.
- Design
  - [Composition](https://motif-ui.vercel.app/docs/design/composition.md): Thoughtful composition establishes clear reading order before components are chosen. Learn how alignment, whitespace, and typographic proportion outperform heavy decorative chrome.
  - [Optical Alignment](https://motif-ui.vercel.app/docs/design/optical-alignment.md): Layout engines align geometric bounding boxes, but human eyes align visual mass. Learn how micro-adjustments correct subtle 1–2px perceptual imbalances across icons, buttons, and quotes.
  - [Font System](https://motif-ui.vercel.app/docs/design/font-system.md): Typography should strictly follow the design system's type ladder. Learn how tabular numerals prevent layout jitter and how to maintain consistent typographic hierarchy.
  - [Color & Surface](https://motif-ui.vercel.app/docs/design/color-and-surface.md): Color communicates status and draws attention, while surfaces establish spatial depth. Learn how to maintain consistent visual hierarchy across both light and dark themes.
  - [Radius](https://motif-ui.vercel.app/docs/design/radius.md): Border radius defines surface contour. Learn the concentric corner formula for nested boxes and how to apply the design system's radius scale consistently.
  - [Stacking](https://motif-ui.vercel.app/docs/design/stacking.md): The z-index property manages overlapping layers. Learn how CSS isolate prevents child elements from bleeding into global page layers and how to follow a strict z-index ladder.
  - [Motion](https://motif-ui.vercel.app/docs/design/motion.md): Motion explains state changes and spatial origin. Learn how swift durations, subtle scale deltas, and GPU compositor-only properties keep interfaces snappy and layout-stable.
  - [Size Stability](https://motif-ui.vercel.app/docs/design/stability.md): State changes should never move what the user was about to click. Learn how to prevent Cumulative Layout Shift (CLS) in buttons, validation errors, and flex containers.
- Components
  - [Components](https://motif-ui.vercel.app/docs/components.md): Browse the components available in this registry.
  - [Activity Heatmap](https://motif-ui.vercel.app/docs/components/activity-heatmap.md): A year of daily counts as a GitHub-style grid — a column per week, a row per weekday, one square per day, shaded by how much happened.
  - [Aspect Ratio Picker](https://motif-ui.vercel.app/docs/components/aspect-ratio-picker.md): Aspect ratio as a grid of to-scale glyphs: every shape is drawn inside the same square window, so the grid stays aligned and the ratio reads before the label does.
  - [Audio Preview](https://motif-ui.vercel.app/docs/components/audio-preview.md): A recording you can read before you play it: the whole waveform on screen, the part you have heard lit, and a press anywhere on it to seek there.
  - [Breakdown](https://motif-ui.vercel.app/docs/components/breakdown.md): A whole cut into its parts: one bar, each cut as wide as its share, and a legend that names every part and its amount.
  - [Cover Fan](https://motif-ui.vercel.app/docs/components/cover-fan.md): A fan of cover cards for an empty state: full-bleed art, the title sitting on it, and enough of every card left showing that the whole set can be read in one look. Hover lifts a card out of the fan; click starts it.
  - [Duration Slider](https://motif-ui.vercel.app/docs/components/duration-slider.md): Duration as a compact clip on a timeline: drag the playhead, read the live value in a HUD, commit one settled number on release.
  - [Flow Edge](https://motif-ui.vercel.app/docs/components/flow-edge.md): A bezier connector that carries a pulse of light from one end to the other while work is in flight — bright in the middle, faded at both ends — and rests as a plain line when it is not.
  - [Generation Overlay](https://motif-ui.vercel.app/docs/components/generation-overlay.md): The overlay a media node wears while it generates: a two-tone flow drifting behind the result, a blur-to-focus reveal once it decodes, and a failure line when it never arrives.
  - [Model Select](https://motif-ui.vercel.app/docs/components/model-select.md): A catalogue you can walk: what is recommended first, then every maker in one scroll, with a rail that indexes the list and follows you down it.
  - [Provider Mark](https://motif-ui.vercel.app/docs/components/provider-mark.md): One maker's logo at 20px, in the colour the brand draws it: twenty-three marks, inlined so a picker never pays for an icon package.
  - [Resolution Segmented](https://motif-ui.vercel.app/docs/components/resolution-segmented.md): A segmented resolution row with a sliding plate and a dot matrix that carries sampling density — two dots standard, three high, four retina.
  - [Settings Dialog](https://motif-ui.vercel.app/docs/components/settings-dialog.md): Destinations down the left, one panel on the right: a rail you can walk with the arrow keys, a panel that fades in, and the row, section and card the panel is built from.
  - [Strength Select](https://motif-ui.vercel.app/docs/components/strength-select.md): Strength as a track you drag: one seat per level, the playhead riding the fill's leading edge, and a slow drift of motes across the fill of the top level.
  - [Toolbar](https://motif-ui.vercel.app/docs/components/toolbar.md): A floating dock that names itself on approach: the glyph under the pointer swells and its label arrives above it. The bar never moves — and an item that earns the width can pin its label into the row.
- Agents
  - [Conversation](https://motif-ui.vercel.app/docs/agents/conversation.md): The region a transcript scrolls in: it follows its own tail while the reader is at the end, lets go the moment they scroll up, and draws a way back when they have.
  - [Message](https://motif-ui.vercel.app/docs/agents/message.md): One turn of a transcript, assembled from parts: who it is from, the body, and the actions that appear once you are done reading.
  - [Thinking Block](https://motif-ui.vercel.app/docs/agents/thinking-block.md): A collapsible window onto a reasoning stream — a capped height, a mask that says the thought runs on below the fold, and a follow that lets the newest line rise into place instead of jumping the scroll.
  - [Agent Indicator](https://motif-ui.vercel.app/docs/agents/agent-indicator.md): A 3×3 grid badge that shows what an agent is doing while it works — idle, thinking, calling a tool, or streaming — through colour, shape and an opacity wave.
  - [Prompt Input](https://motif-ui.vercel.app/docs/agents/prompt-input.md): The box a message is written in, assembled from parts: a field that grows and then scrolls, the files riding with the draft as chips above it, the model answering it, and the one button that ends the turn.
  - [Voice Input](https://motif-ui.vercel.app/docs/agents/voice-input.md): A composer's mic. A press asks for the microphone and the composer becomes a recording bar: cancel on the left, the live level across the middle, stop on the right. The level is written straight to the DOM, so a sixty-frame meter never re-renders anything.
  - [Attachment](https://motif-ui.vercel.app/docs/agents/attachment.md): A square attachment chip for composer rows — image thumbnails, file glyphs, and upload progress drawn around the card's own border.
  - [Scroll Rail](https://motif-ui.vercel.app/docs/agents/scroll-rail.md): A tick rail that mirrors a long scroll region: width carries distance from the reading line, colour carries focus. Hover a tick to preview the turn, click to jump to it.
  - [Approval Card](https://motif-ui.vercel.app/docs/agents/approval-card.md): A human-in-the-loop decision surface for approvals, single-choice questions, custom responses, and multi-step review flows.
  - [Skill Detail](https://motif-ui.vercel.app/docs/agents/skill-detail.md): A skill's detail surface, in two columns: a rail that says what the skill is and a workspace that shows what is inside it. A card opens it, the dialog is optional.
- Blocks
  - [Chat App](https://motif-ui.vercel.app/docs/blocks/chat-app.md): A whole chat surface for a page. A thread that follows its own tail, a rail that mirrors it, turns that carry their reasoning and their actions, and a composer that holds files and a model — assembled, not rebuilt, from the pieces this registry already publishes.

## Machine-readable Resources

- [Full documentation](https://motif-ui.vercel.app/llms-full.txt)
- [Homepage markdown](https://motif-ui.vercel.app/llms.md/content.md)
- [OpenAPI description](https://motif-ui.vercel.app/openapi.json)
- [API catalog](https://motif-ui.vercel.app/.well-known/api-catalog)
- [Agent skill](https://motif-ui.vercel.app/.well-known/agent-skills/site-skill.md)
- [shadcn MCP server documentation](https://ui.shadcn.com/docs/mcp)