<Drawer>

A vertical or horizontal list of items that can be dragged into a <Puck.Preview>. Used for composing custom Puck UIs.

Interactive Demo

Orange

import { Puck, Drawer } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck>
      <Drawer>
        <Drawer.Item name="Orange" index={0} />
      </Drawer>
    </Puck>
  );
}

Props

Param	Example	Type	Status
`children`	`children: <Drawer.Item />`	ReactNode	Required
`direction`	`direction: "horizontal"`	`horizontal`, `vertical`	-
`droppableId`	`droppableId: "my-drawer"`	String	-

Required props

`children`

A React node representing the contents of the <Drawer>. Will likely contain <Drawer.Item> nodes.

Optional props

`direction`

Set the direction of the drawer.

Defaults to vertical.

`droppableId`

Set a custom ID for the underlying Droppable (opens in a new tab).

Must be unique.
Will be prefixed with component-list:.

Defaults to default.