Section Header

Framed header row for settings and control panels with optional actions.

Components / Section Header

Layoutheadersettingsactions

Framed header row for settings and control panels with optional actions.

Preview

Loading preview…

Usage

Framed header row for settings and control panels with optional actions.

<SectionHeader
  title="Appearance Configuration"
  description="Configure avatar rendering and expressions."
  actions={<Button variant="secondary">Save</Button>}
/>

Files

components/steez/SectionHeader.tsxcomponent

components/steez/SectionHeader.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { SectionHeader } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/section-header.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { SectionHeader } from "<project-root>/components/steez/SectionHeader";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/section-header.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Section

Simple content section with optional monospace title treatment.

Page Header

Neutral page header with title, brand slot, and optional controls.