CSS Showcase · Live Demo

Drawers that slide in with intent.

Animated panels, navigation drawers, docked inspectors, and touch-friendly bottom sheets — built with transform transitions and a dismissible backdrop.

Featured demo

mobile · bottom-sheet
Design review
Sprint planning
Invoice #4821
Welcome aboard

mobile design patterns

drawer-bottom-sheet.css
/* Drag-handle bottom sheet */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--foreground) 35%, transparent);
}

.bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70%;
  background: var(--popover);
  border-top: 1px solid var(--border);
  border-radius: 1.25rem 1.25rem 0 0;
  transform: translateY(0);
  transition: transform .25s ease;
}

.sheet-handle {
  width: 2.5rem;
  height: 0.3rem;
  margin: 0.5rem auto;
  border-radius: 999px;
  background: var(--muted);
}

CSS features used

  • • transform: translate transitions
  • • backdrop overlay with color-mix()
  • • CSS grid docked layout
  • • border-radius clip on sheets
  • • data-open attribute state
  • • Semantic tokens