StackedDrawer - Admin Components

The StackedDrawer component renders a drawer above a route modal. The Medusa Admin uses it to let the user pick resources without leaving the form, such as choosing customer groups while configuring a price list.

Code
import { StackedDrawer } from "@medusajs/dashboard/components"

Stacked Modals#

Render a StackedDrawer inside a RouteDrawer or a RouteFocusModal, which both provide the stacked modal context. Unlike route modals, a StackedDrawer is not tied to a route. The user opens it with a trigger, and the parent modal stays mounted underneath.

Every StackedDrawer requires an id prop. The parent modal uses the ID to track which stacked modal is open, so you can render more than one stacked modal in the same form.

Example#

The following UI route renders a StackedDrawer inside a RouteFocusModal to select a brand:

src/admin/routes/products/[id]/brand/page.tsx
1import { Button, Heading } from "@medusajs/ui"2import {3  RouteFocusModal,4  StackedDrawer,5} from "@medusajs/dashboard/components"6
7const STACKED_MODAL_ID = "select-brand"8
9const ProductBrand = () => {10  return (11    <RouteFocusModal>12      <RouteFocusModal.Header />13      <RouteFocusModal.Body>14        <StackedDrawer id={STACKED_MODAL_ID}>15          <StackedDrawer.Trigger asChild>16            <Button variant="secondary" size="small">17              Select Brand18            </Button>19          </StackedDrawer.Trigger>20          <StackedDrawer.Content>21            <StackedDrawer.Header>22              <StackedDrawer.Title asChild>23                <Heading>Select Brand</Heading>24              </StackedDrawer.Title>25            </StackedDrawer.Header>26            <StackedDrawer.Body>27              <BrandList />28            </StackedDrawer.Body>29            <StackedDrawer.Footer>30              <StackedDrawer.Close asChild>31                <Button variant="secondary" size="small">32                  Cancel33                </Button>34              </StackedDrawer.Close>35            </StackedDrawer.Footer>36          </StackedDrawer.Content>37        </StackedDrawer>38      </RouteFocusModal.Body>39    </RouteFocusModal>40  )41}42
43export default ProductBrand

Props#

Sub-components#

useStackedModal#

Use the useStackedModal hook to control a stacked modal programmatically. For example, close the drawer after the user confirms their selection.

Code
import { useStackedModal } from "@medusajs/dashboard/components"

Call the hook in a component rendered inside a route modal. It throws an error if you use it elsewhere.

Returned Values#

Example#

src/admin/routes/products/[id]/brand/page.tsx
1import { Button } from "@medusajs/ui"2import { useStackedModal } from "@medusajs/dashboard/components"3
4const BrandList = () => {5  const { setIsOpen } = useStackedModal()6
7  const handleSave = () => {8    setIsOpen("select-brand", false)9  }10
11  return (12    <Button size="small" onClick={handleSave}>13      Save14    </Button>15  )16}