Docs

Cinder UI

Overlay.drawer

Progressive

Drawer panel component.

Drawers are edge-anchored panels intended for mobile-style or bottom-sheet flows. Use sheet/1 for side panels.

side controls placement: :top or :bottom.

Bottom drawer

  <.drawer id="mobile-filters">
  <:trigger><.button variant={:outline}>Filters</.button></:trigger>
  <:title>Filter results</:title>
  <:description>Refine issues by status and owner.</:description>
  <div class="space-y-2 text-sm">
    <p>Status: Open</p>
    <p>Owner: Platform</p>
  </div>
</.drawer>

Attributes

Name Type Default Values Global Includes
class :string
id Required :string
open :boolean false
rest :global
side :atom :bottom :top , :bottom

Slots

Slot Slot Attributes
description
footer
inner_block Required
title
trigger Required