Customizing the Panel

The panel is the main UI that slides out from the side of the screen.

Basic Options

examples/guides/panel/basic-config.tsx

<PillarProvider
  productKey="..."
  publicKey="..."
  config={{
    panel: {
      enabled: true,
      position: 'right',
      mode: 'push',
      width: 380,
    },
  }}
>

Options Reference

Option	Type	Default	Description
`enabled`	`boolean`	`true`	Enable/disable the panel
`position`	`'left' \| 'right'`	`'right'`	Which side the panel appears
`mode`	`'overlay' \| 'push'`	`'push'`	How panel affects page content
`width`	`number`	`380`	Panel width in pixels
`container`	`string \| HTMLElement \| 'manual'`	`undefined`	Custom mount point
`useShadowDOM`	`boolean`	`false`	Enable style isolation
`hoverBreakpoint`	`number \| false`	`1200`	Responsive breakpoint
`hoverBackdrop`	`boolean`	`true`	Show backdrop in hover mode

Panel Modes

Push Mode

Content shifts to make room for the panel:

examples/guides/panel/push-mode.tsx

panel: {
  mode: 'push',
}

Best for applications where users interact with both the panel and main content.

Overlay Mode

Panel floats over the content:

examples/guides/panel/overlay-mode.tsx

panel: {
  mode: 'overlay',
}

Best for minimal layouts or when panel content is the focus.

Responsive Behavior

On smaller screens, the panel automatically switches to overlay mode:

examples/guides/panel/responsive-behavior.tsx

panel: {
  mode: 'push',
  hoverBreakpoint: 1200, // Switch to overlay below 1200px
  hoverBackdrop: true,   // Show backdrop when overlaying
}

Disable responsive behavior:

examples/guides/panel/disable-responsive.tsx

panel: {
  hoverBreakpoint: false, // Always use push mode
}

Custom Placement

Using a Container

Mount the panel to a specific element:

examples/guides/panel/container-selector.tsx

panel: {
  container: '#my-panel-container',
}

Or pass an element reference:

examples/guides/panel/container-ref.tsx

const containerRef = useRef<HTMLDivElement>(null);

<PillarProvider
  config={{
    panel: { container: containerRef.current }
  }}
>
  <div ref={containerRef} />
</PillarProvider>

Manual Placement with PillarPanel

For full control over placement, use container: 'manual' with the PillarPanel component:

examples/guides/panel/manual-placement.tsx

import { PillarProvider, PillarPanel } from '@pillar-ai/react';

function App() {
  return (
    <PillarProvider
      productKey="..."
      publicKey="..."
      config={{ panel: { container: 'manual' } }}
    >
      <div className="layout">
        <Sidebar />
        <main>Your content</main>
        <PillarPanel className="custom-panel" />
      </div>
    </PillarProvider>
  );
}

Shadow DOM

By default, the panel inherits your app's CSS. Enable Shadow DOM for complete isolation:

examples/guides/panel/shadow-dom.tsx

panel: {
  useShadowDOM: true,
}

When to use Shadow DOM:

Embedding on third-party sites
Avoiding CSS conflicts
Ensuring consistent appearance

When to avoid Shadow DOM:

Custom cards need your design system
You want to style the panel with your CSS

Search documentation