Molecules
Composed components built from atoms. Each molecule combines primitives into a reusable, purpose-built pattern.
16 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.
Field
A labeled form control. Composes Label, Input or Textarea, and optional hint or error text.
Label · Input · Textarea
Input Group
An input with leading or trailing text addons and icons. Extends Input with contextual decoration.
Input
Stat Card
A metric display card. Composes a label, a large value, an optional trend indicator, and an optional icon.
Card · Badge · Icon
Empty State
A placeholder for empty lists, zero-data views, and no-results scenarios.
Button · Icon
Description List
Key–value pairs for displaying structured details. Common in profile pages and settings panels.
Badge · Button
Section Heading
A section header with optional description and action buttons. Used above lists and tables.
Button
Page Heading
A full page header with breadcrumb navigation, title, metadata, and action buttons.
Button · Badge · Breadcrumb
Activity Feed
A vertical timeline of events with icons, rich content, and timestamps.
Icon
Stacked List
A vertically stacked list of rows with consistent padding and optional hover behavior.
Badge · Avatar
Action Panel
A bordered card that communicates a single focused action. Common in settings pages.
Button · Card
Notification
A toast-style notification panel with success, error, warning, and info variants.
Icon · Button
Radio Cards
Card-style single selection. Each option is a bordered card that highlights when selected.
Radio Group · Card
Card Heading
A header row for cards and panels. Combines title, description, leading slot, and trailing actions.
Card · Avatar · Button · Dropdown Menu
Media Object
A layout primitive pairing a fixed media element with a flexible text block.
Avatar · Icon
Grid List
A responsive grid of cards. Supports simple content, accent-strip, and custom contact layouts.
Card · Badge · Avatar
Command Palette
A modal search dialog for navigating and executing commands quickly. Grouped by category.
Dialog · Input · Icon · Kbd