<Drawer>

A reference list of items that can be dragged into a droppable area, normally <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
`droppableId`	`droppableId: "my-drawer"`	String	-
`direction`	`direction: "horizontal"`	`horizontal`, `vertical`	-

Required props

`children`

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

Optional props

`id`

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

Must be unique.
When this id starts with component-list, its children can be dragged into a <Puck.Preview>.

Defaults to component-list.

Components <Drawer.Item>