Molecules
Composed components built from atoms. Each molecule combines primitives into a reusable, purpose-built pattern.
31 components
Built on Atoms
How To Use This Page
Molecules are grouped around practical UI jobs, combining multiple atoms into reusable patterns such as fields, headers, lists, and notifications.
Use this section when the primitive pieces are too low-level and you want a composition that already encodes spacing, hierarchy, and behavior.
How The Content Is Grouped
- The top-level Molecules page groups the catalog by subcategory, making it easier to choose a family of patterns before drilling into an implementation.
- Use the highlighted links below to start with the highest-signal areas of the section.
Start With
Account Menu
Structured account dropdown with profile header, sections, action rows, and separators.
Action Panel
Bordered panel that communicates one focused action.
Activity Feed
Vertical timeline of events with icons, rich content, and timestamps.
Ask User Questions
Question prompt panel for collecting answers, clarifications, and review decisions.
Card Heading
Header row for cards and panels with title, description, leading slot, and actions.
Chat Message
Chat transcript row with avatar, author metadata, alignment, and message bubble tone.
Command Palette
Modal search dialog for navigating and executing grouped commands.
Data Transfer Controls
Import and export control cluster with optional scope selector and compact menu mode.
Account Menu
Structured account dropdown with profile header, sections, action rows, and separators.
Dropdown Menu · Avatar
Action Panel
Bordered panel that communicates one focused action.
Button · Card
Activity Feed
Vertical timeline of events with icons, rich content, and timestamps.
Icon
Ask User Questions
Question prompt panel for collecting answers, clarifications, and review decisions.
Card · Button
Card Heading
Header row for cards and panels with title, description, leading slot, and actions.
Card · Avatar · Button · Dropdown Menu
Chat Message
Chat transcript row with avatar, author metadata, alignment, and message bubble tone.
Avatar
Command Palette
Modal search dialog for navigating and executing grouped commands.
Dialog · Input · Icon · Kbd
Data Transfer Controls
Import and export control cluster with optional scope selector and compact menu mode.
Select · Button Group · Dropdown Menu
Description List
Key-value pairs for structured details in profiles and settings panels.
Badge · Button
Empty State
Placeholder for empty lists, zero-data views, and no-results scenarios.
Button · Icon
Field
Labeled form control composition with hint and error text.
Label · Input · Textarea
Grid List
Responsive grid of cards for simple content, accents, and contact layouts.
Card · Badge · Avatar
Input Copy
Read-only value field with an integrated clipboard action and copied feedback state.
Input · Button
Input Group
Input with leading or trailing text addons, icons, and inset actions.
Input
Input Message
Auto-growing chat-style message composer with action slots and send affordance.
Button · Textarea
Media Asset Card
Selectable media or file card with grid, list, and responsive orientations.
Card · Icon · Image
Media Asset Grid
Responsive media asset container that keeps compact divided rows on mobile and switches to a grid on larger screens.
MediaAssetCard · List
Media Object
Layout primitive pairing fixed media with flexible text content.
Avatar · Icon
Mobile Drawer
Mobile navigation drawer wrapper with trigger, sheet content, title, and description.
Button · Sheet
Nav Menu
Vertical navigation list with proximity-aware row activation and active item state.
Nav Item
Notification
Toast-style notification panel with success, error, warning, and info variants.
Icon · Button
Page Heading
Full page header with breadcrumb navigation, title, metadata, and actions.
Button · Badge · Breadcrumb
Property Row
Horizontal label and control row for designer inspector panels.
Input Number · Color Input · Slider
Radio Cards
Card-style single selection where each option highlights when selected.
Radio Group · Card
Section Heading
Section header with optional description and action buttons.
Button
Stacked List
Vertically stacked rows with consistent padding and optional hover behavior.
Badge · Avatar
Stat Card
Metric display card with label, value, optional trend, and optional icon.
Card · Badge · Icon
Usage Bar
Compact quota, readiness, and capacity meter with inline and stacked layouts.
Progress
Thinking Steps
Reasoning progress list with complete, current, and pending step states.
Thinking Indicator
Titled Card
Responsive card wrapper with title, subtitle, actions, and mobile-flattened layout.
Card · Card Heading
URL Redirect Prompt
Redirect recommendation callout shown when an editable URL handle changes.
Callout · Switch