Slideout

Side panel that slides in over the main content. Use for detail views, filters, and edit forms.

import{ Slideout } from "@pepulux/ui"

Default

Props

PropTypeDefaultDescription
isOpen*boolean—Controls slideout visibility
onClose() => void—Called when backdrop is clicked
onSave() => void—Called when Save button is clicked
onCancel() => void—Called when Cancel button is clicked
titlestring—Panel header title
descriptionstring—Sub-text below the title
saveLabelstring"Save"Save button label
cancelLabelstring"Cancel"Cancel button label
childrenReactNode—Panel body content
Application component → Slideout menuswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Side panels for focused tasks

Use a slideout for editing or details that keep the page context visible. Provide Save and Cancel in the footer and close on Escape.