Pane

Content section within a panel for composing property editors.

Install

npx shadcn@latest add https://substrate.georgedrury.co.uk/r/pane

Examples

Default

Properties

Width400px

Height300px

Rotation0°

import {
	Pane,
	PaneHeader,

With history controls

Drop HistoryControls (or individual HistoryButton elements) into a PaneHeader and they auto-push to the right and compact to match the header height.

Position

"use client"

import { useState, useCallback } from "react"

Theme variables

Pane inherits panel tokens. PaneAction uses bg-panel for its background.

Variable	Tailwind class	Fallback	Description
`--panel`	`bg-panel`	`--card`	Action button background

Components

Component	Description
`Pane`	Container with vertical spacing and horizontal padding
`PaneHeader`	Flex row for label + action
`PaneLabel`	Section title text
`PaneAction`	Button slot in the header