Drawers and side panels

41 components, 39 with React code

Detail drawers for subscribers, transactions, deploys, members and pull requests. They open beside a list so people inspect one record without losing their place.

Record detail from a table rowSettings for one integrationVersion history and activity

Campaign report drawer component preview
Olivia Bennett drawer component preview
Shopify settings drawer component preview
Payment #TX-48213 drawer component preview
deploy-agent drawer component preview
deploy-agent drawerAutonCode Pro
Enforced drawer component preview
Enforced drawerAutonCode Pro
Version history drawer component preview
gh-app-deploy drawer component preview
Request blocked drawer component preview
GitHub drawer component preview
GitHub drawerAutonCode Pro
SR drawer component preview
SR drawerAutonCode Pro
Production access requested drawer component preview
Campaign report drawer component preview
Campaign report drawerMailPulseCode Pro
Slack settings drawer component preview
Slack settings drawerMailPulseCode Pro
Subscriber profile drawer component preview
Subscriber profile drawerMailPulseCode Pro
Transaction drawer component preview
Transaction drawerMailPulseCode Pro
Extract invoice fields drawer component preview
NS drawer component preview
NS drawerAxonCode Pro
PO not found in NetSuite drawer component preview
Gmail drawer component preview
Gmail drawerAxonCode Pro
NS drawer, NS component preview
NS drawer, NSAxonCode Pro
Notification preferences drawer component preview
ai.guardrail_changed drawer component preview
PR open drawer component preview
PR open drawerVeriqCode Pro
Browse and filter all 41

Every drawers and side panels component, by system

Questions

What belongs in a drawer?

Detail and light editing for one record, opened from a list. Anything that needs the full page or blocks the task belongs elsewhere.

Do drawers work on mobile?

On small screens a drawer should take the full width; the components are built to stretch.

Guides