House components · Application UI
Section
A titled settings-style content block with an optional header action, rendering a labelled section heading above a bordered card body; ships with companion SettingsList and SettingRow compound components for building explain-everything config panels.
Feature showcase
Installation
Features
6 examples
Default, Inline Children, No Header, Setting Row Controls, Stacked Sections, With Action.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Section heading rendered as a small semibold label above the card. |
| description | string | - | Muted helper text displayed beneath the title. |
| action | React.ReactNode | - | Optional element (e.g. a button) right-aligned beside the title row. |
| children | React.ReactNode | - | Content rendered inside the bordered card body. |
| className | string | - | Extra Tailwind classes merged onto the outer <section> element. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/section.tsx |
| Default example | content/examples/section/default.tsx |
| Inline Children example | content/examples/section/inline-children.tsx |
| No Header example | content/examples/section/no-header.tsx |
| Setting Row Controls example | content/examples/section/setting-row-controls.tsx |
| Stacked Sections example | content/examples/section/stacked-sections.tsx |
| With Action example | content/examples/section/with-action.tsx |