Panel

Side panel container with position variants and scroll area.

Install

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

Layers

Background

Rectangle 1

Text layer

import { Panel } from "@/components/substrate/panel"
import {
	Pane,

Variable	Tailwind class	Fallback	Description
`--panel`	`bg-panel`	`--card`	Panel background colour
`--panel-foreground`	`text-panel-foreground`	`--card-foreground`	Panel text colour

Prop	Type	Default	Description
`position`	`"left" \| "right"`	`"right"`	Which side the panel sits on. Controls border direction.
`variant`	`"tool" \| "default"`	`"default"`	Panel variant. Tool variant uses flex column layout.