Primitive

Drawer

Auto-emitted from DSKintsugiCatalog.drawer. Tier atom.

Live Preview
isOpen: false · side: .right · trigger button only

Main content area

isOpen: true · side: .right · 280px · scrim + gold-warm top border

Main content area

Native · macOS
macOS SwiftUI render of Drawer
DSL usage
// Closed state (controlled externally)
katagami.drawer(
  side: .right,
  isOpen: false,
  width: 280,
  onDismiss: { isOpen = false }
) {
  // panel content
  VStack(spacing: 16) {
    Text("Panel title", style: .h3)
    Text("Body copy", style: .body)
  }
}

// Open state
katagami.drawer(
  side: .right,
  isOpen: true,
  width: 280,
  onDismiss: { isOpen = false }
) {
  VStack(spacing: 16) {
    Text("Panel title", style: .h3)
    Text("Body copy", style: .body)
  }
}
Attributes
NameTypeDefaultDescription
side DrawerSide .right .left | .right | .top | .bottom — which edge the panel slides in from
isOpen Bool false Controls visibility; external state drives open/closed transitions
width CGFloat 280 Panel fixed width (or height for .top / .bottom) in points
onDismiss () -> Void {} Called when scrim is tapped or the close button is activated
density Density regular compact | regular | expanded
locale Locale en BCP-47 locale tag for locale-aware rendering
Used in
sigma-analytics c-tech