Adaptive Components

Adaptive Components are UI elements or design patterns that adjust based on user needs, context, or device specifications. Unlike fixed components, adaptive components can change their size, functionality, or layout to provide an optimal experience across different conditions. This flexibility is often seen in responsive and adaptive designs that ensure usability across a range of devices and screen sizes.

Adaptive components let your product serve wildly different contexts — a dashboard widget that collapses on mobile, a data table that reflows into cards on small screens — without building separate products. For early-stage SaaS teams, this reduces engineering effort significantly while keeping the experience polished across every device your customers use.

Notion's sidebar adapts based on screen size: on desktop it's a persistent panel, on mobile it slides in as a drawer — same component, different behavior, same codebase.