Customizing the Panel

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

Basic Options

<PillarProvider
  agentSlug="your-agent-slug"
  config={{
    panel: {
      enabled: true,
      position: 'right',
      mode: 'push',
      width: 380,
    },
  }}
>

Options Reference

Panel Modes

Push Mode

Content shifts to make room for the panel:

panel: {
  mode: 'push',
}

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

Overlay Mode

Panel floats over the content:

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:

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

Disable responsive behavior:

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

Resizing

Users can resize the panel by dragging its inner edge. The resize handle appears on the edge opposite the screen boundary (e.g., the left edge of a right-aligned panel). When the edge trigger is enabled, the resize handle appears between the panel and the trigger. The resized width is persisted to localStorage and restored across page loads.

<PillarProvider
  agentSlug="your-agent-slug"
  config={{
    panel: {
      width: 450,       // Default width in pixels
      resizable: true,  // Allow users to drag-resize (default)
    },
  }}
>

Disable resizing if you want a fixed-width panel:

<PillarProvider
  agentSlug="your-agent-slug"
  config={{
    panel: {
      width: 400,
      resizable: false,  // Fixed-width panel, no drag handle
    },
  }}
>

Custom Placement

Using a Container

Mount the panel to a specific element:

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

Or pass an element reference:

<PillarProvider
  agentSlug="your-agent-slug"
  config={{
    panel: { container: '#my-panel-container' }
  }}
>
  <div id="my-panel-container" />
</PillarProvider>

Manual Placement with PillarPanel

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

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

function App() {
  return (
    <PillarProvider
      agentSlug="your-agent-slug"
      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 to isolate the panel's styles from your application:

panel: {
  useShadowDOM: true,
}

When to use Shadow DOM:

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

When to avoid Shadow DOM:

• Inline UI components need your design system
• You want to style the panel with your CSS

Hiding on Routes

The SDK automatically hides all UI — panel, edge trigger, mobile trigger, and text selection popover — on /login and /signup routes. No configuration needed:

// No config needed — /login and /signup are excluded by default.
// The SDK automatically hides on these routes.
<PillarProvider agentSlug="your-agent-slug">
  {children}
</PillarProvider>

Custom Excluded Routes

Add your own routes to the list:

<PillarProvider
  agentSlug="your-agent-slug"
  config={{
    excludeRoutes: ['/login', '/signup', '/onboarding', '/maintenance'],
  }}
>
  {children}
</PillarProvider>

Route matching uses prefix logic: /login matches /login, /login/sso, and /login/forgot-password, but not /login-history.

Show on Every Route

Pass an empty array to disable route exclusion entirely:

<PillarProvider
  agentSlug="your-agent-slug"
  config={{
    excludeRoutes: [],
  }}
>
  {children}
</PillarProvider>

Next Steps

• Theming & Branding — Customize colors and appearance
• Edge Trigger — Configure the sidebar tab that opens the panel
• Text Selection Helper — Let users ask about selected text