Anchored panel chrome with titled header and open body/footer slots for tool options.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/options-panelPackage import
import { OptionsPanel, OptionsPanelTrigger, OptionsPanelContent, OptionsPanelHeader, OptionsPanelTitle, OptionsPanelBody, OptionsPanelFooter } from "@default-file/ui/components/df-options-panel"Titled panel with open body and footer slots. Put any tool options inside.
Anchored options panel chrome with a titled header and open body/footer slots. Compose any sections or actions inside the slots. Nothing is hardcoded.
Root open state. Same API as Popover.
| Prop | Type | Default | Notes |
|---|---|---|---|
| open | boolean | — | Controlled open state. |
| defaultOpen | boolean | — | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | — | Called when open state changes. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| render | ReactElement | — | Host element that toggles the panel. |
| children | ReactNode | — | Trigger content when not using render. |
Panel shell with options chrome defaults (content-sized width, end align, bottom side).
| Prop | Type | Default | Notes |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred placement side. |
| align | "start" | "center" | "end" | "end" | Alignment along the side. |
| sideOffset | number | 8 | Gap between trigger and panel. |
| matchTriggerWidth | boolean | false | Lock the panel to the trigger width. Off by default so the panel sizes to its content. |
| portal | boolean | true | When false, render the panel inline (docs demos). Default portals to document.body. |
| className | string | — | Override or extend the panel chrome styles. |
| children | ReactNode | — | Compose OptionsPanelHeader, OptionsPanelBody, and OptionsPanelFooter. |
Pure layout regions. Put any controls in body; any actions or meta in footer.
| Prop | Type | Default | Notes |
|---|---|---|---|
| OptionsPanelHeader | div attrs | — | Header region with bottom border. Usually wraps the title. |
| OptionsPanelTitle | h2 attrs | — | Panel title text. |
| OptionsPanelBody | div attrs | — | Scrollable body slot. Fully swappable for sections, selects, and custom nodes. |
| OptionsPanelFooter | div attrs | — | Footer slot with top border. Fully swappable for buttons, status, and meta. |