videorc/uiPanel Section
The flush section every pane is built from. A 13 px header as an h2, a 12 px description, an action on the title line, 16 px of padding and a hairline to the next section, with no box around it.
Recording
Markers
Installation
$ pnpm dlx shadcn@latest add @videorc/panel-sectionUsage
import { PanelSection } from "@/components/panel-section";<PanelSection
description="Recordings save to ~/Movies/Videorc."
title="Recording"
>
…
</PanelSection>Use it for every section of a page or a pane: Settings, Output, Sources, the inspector. Rules a streamer needs, such as limits or what Premium adds, go in its description, never in a footnote.
Don't put a border, a background, a radius or a shadow around page content, and don't put a card inside a section. Sections are flush and split by hairlines.
Anatomy
<PanelSection title description icon action headingLevel>
{/* content */}
</PanelSection>Examples
Nested sections
A section under another section's heading passes headingLevel={3}, so the outline reads h1 (the toolbar's title), h2, h3. A section with no children is only its header: a title, what it says, and its action.
Camera
Placement
Lens
Theming
| Token or attribute | Meaning |
|---|---|
p-gutter | 16 px of padding |
border-b, border-border | The hairline to the next section; the last one has none |
text-section | The 13 px / 600 title |
text-meta, text-muted-foreground | The 12 px description, in the secondary tier |
h-5 | The action's line, as tall as the title, so a 28 px button or a switch centres on it |
data-slot | panel-section, panel-section-header, panel-section-description, panel-section-action, panel-section-content |
data-* | Any data- prop lands on the section, for tests and probes |
Accessibility
The title is an h2 under the toolbar's h1, or an h3 with headingLevel={3}. A section without a title has no heading, for when the layout around it already names it. A switch or an icon button in action needs its own aria-label.
API reference
Prop
Type
Page Tabs
A page with tabs. One segmented tab list pinned in a strip under the toolbar, and only the region under it scrolls. The selected tab is the caller's, so the app can remember it and open a named tab from a link.
Section Label
The small name over a group of rows or fields, 11 px at 600 in the tertiary tier. One recipe for the sidebar's groups, a grouped list's label and a block of fields.