Molecules · Patterns

Molecular UI Patterns

Composed components formed by grouping atomic primitives into distinct, interactive units with localized states.

Overlays — Modal, ConfirmDialog & Drawer

Live @/design render

Responsive Modal

Confirm Dialog

Slide-Over Drawer

Progress — Stepper Wizard

Live @/design render

Step 2 of 3Step 2

Step 1Initial setup

Step 2Configuration parameters

Step 3Review and confirmation

Data Lists — ListItem Variants

Live @/design render

Plain List ItemDescription and metadata subtitle

Navigation List ItemClickable navigation target with chevron indicator

Action List ItemIncludes toggle switch or custom action controls

Containers — Card Anatomy & Media

Live @/design render

Card Media Slot (Image / Visual)

Card Title Header

Card supporting description text.

Card body container content for structured information grouping.

Form Field Label

Supporting hint text for the input field.

Selection Controls — DropdownMenu & Select

Live @/design render

Dropdown Menu

Select Component

Navigation — Tabs Control

Live @/design render

Container pane content for Tab 1.

Data Displays — MetricCard

Live @/design render

Metric Label 1

24,500

+12.5%

Metric comparison caption

Metric Label 2

1,420

-3.2%

Metric comparison caption

Metric Label 3

99.9%

Stable

Metric comparison caption

Feedback — Toast System

Live @/design render

import { … } from "@/design/molecules"
// source: design/molecules/index.ts