Side Panel Component Playground

Interactive playground to test the SidePanel component

Props

open: boolean - Whether the panel is open

onClose: () => void - Callback when panel should close

className: string (optional) - Additional className for the root container

contentClassName: string (optional) - Additional className for the panel content

children: ReactNode (optional) - Content to render inside the panel

<SidePanel
  open={isOpen}
  onClose={() => setIsOpen(false)}
>
  {/* Your content here */}
</SidePanel>

Preview

Click the button above to open the side panel

Example Usage

The SidePanel is a blank generic component. Add your own content via children. The panel slides in from the right and includes a backdrop overlay.