When to Use
PropertyPanel provides a standardized persistent editing panel for design interfaces. Unlike Sheet/DittoSheet (temporary overlays), PropertyPanel stays visible while working in the main content area.
Use When
- • Building block/element property editors
- • Need persistent editing context (always visible)
- • Settings that update in real-time
Skip When
- • Need temporary side content (use DittoSheet)
- • Content should close after action
Size Variants
Two size options matching DittoSheet for consistency
| Size | Width | Use Case |
|---|---|---|
normal | 448px | Simple property editing |
wide | 512px | Rich property editing (DEFAULT) |
Full Mode (with title)
Panel provides header, scrollable content area, and optional footer
Main Content Area
PropertyPanel stays visible while editing
Container Mode (no title)
Panel is just a styled container - content provides its own structure
Main Content Area
Empty State
Built-in empty state for when no item is selected
Show empty state:
Main Content Area
Sub-Components
Building blocks for consistent panel structure
| Component | Purpose |
|---|---|
PropertyPanelHeader | Panel header with title, description, and optional icon |
PropertyPanelContent | Scrollable content wrapper with standard padding |
PropertyPanelSection | Section with uppercase muted title |
PropertyPanelFooter | Footer for action buttons |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Panel title (omit for container mode) |
description | string | - | Optional description below title |
children | ReactNode | - | Panel content |
footer | ReactNode | - | Optional footer content (only with title) |
size | 'normal' | 'wide' | 'wide' | Panel width: normal (448px) or wide (512px, default) |
emptyState | { title, description?, icon? } | - | Empty state configuration (only with title) |
isEmpty | boolean | false | Whether to show empty state |
className | string | - | Additional CSS classes |