DocsAPI ReferenceOverridesdrawerContainer

drawerContainer

Override the container that wraps the component drawer items. When provided, completely replaces the default drawer container while receiving all necessary props for drag-and-drop functionality.

const overrides = {
  drawerContainer: ({ children, className, ref, ...props }) => (
    <div 
      className={className} 
      ref={ref} 
      {...props}
      style={{ border: "2px solid blue" }}
    >
      {children}
    </div>
  ),
};

Important: When using this override, you must provide a complete implementation. The override completely replaces the default container, so ensure you pass through the required props for drag-and-drop functionality to work.

Props

PropExampleTypeDescription
children<div />ReactNodeThe drawer items
className"Drawer-abc123"stringCSS class for styling
refrefRefObjectReact ref for drag-and-drop
data-puck-dnd"drawer-123"stringDrag-and-drop identifier
data-puck-drawertruebooleanMarks as drawer container
data-puck-dnd-voidtruebooleanDrag-and-drop collision handling

children

The drawer items to be rendered inside the container.

className

The CSS class name for styling the drawer. Pass this through to maintain default styling.

ref

React ref required for drag-and-drop functionality. Must be passed through.

data-puck-dnd

Unique identifier for drag-and-drop operations. Must be passed through.

data-puck-drawer

Boolean flag marking this as a drawer container. Must be passed through.

data-puck-dnd-void

Flag for drag-and-drop collision handling. Must be passed through.

Examples

Custom styling while preserving functionality

const overrides = {
  drawerContainer: ({ children, className, ref, ...props }) => (
    <div 
      className={`${className} my-custom-class`} 
      ref={ref} 
      {...props}
      style={{ background: "lightblue", padding: "8px" }}
    >
      {children}
    </div>
  ),
};

Adding header while preserving drag-and-drop

const overrides = {
  drawerContainer: ({ children, className, ref, ...props }) => (
    <div>
      <h3>Available Components</h3>
      <div className={className} ref={ref} {...props}>
        {children}
      </div>
    </div>
  ),
};

Grid layout that fills available space

const overrides = {
  drawerContainer: ({ children, className, ref, ...props }) => (
    <div 
      className={className} 
      ref={ref} 
      {...props}
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(64px, 1fr))",
        gap: 16,
      }}
    >
      {children}
    </div>
  ),
};

Completely custom container

const overrides = {
  drawerContainer: ({ children, className, ref, ...props }) => (
    <section 
      className="my-drawer-section" 
      ref={ref} 
      {...props} // Important: must pass through for drag-and-drop
    >
      <header>My Components</header>
      <div className="drawer-content">
        {children}
      </div>
    </section>
  ),
};
drawerdrawerItem