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.

Default

Notifications

Choose which events trigger an email or push alert.

Email digest

Receive a daily summary of activity in your account.

Security alerts

Get notified immediately when a new device signs in.

Product updates

Hear about new features and improvements.

Inline Children

Webhook endpoints

Configure URLs that receive event payloads when activity occurs.

Production endpoint

Receives all events from your live environment.

https://api.example.com/webhooks/prod
Active
Staging endpoint

Receives only test-mode events. Safe to point at an internal service.

https://staging.example.com/webhooks
Paused

Connected accounts

Third-party services linked to your account for sign-in or data sync.

GitHub

Used for single sign-on and repository access.

Connected as @jsmith · 42 repositories accessible.

Google Workspace

Enables calendar sync and single sign-on for your organisation.

No Header
Compact mode

Reduce spacing in lists and tables to show more content at once.

High contrast

Increase text and border contrast for improved readability.

Reduce motion

Disable animated transitions for users who prefer reduced motion.

The following items are read-only and managed by your organisation's administrator.

Single sign-on

SSO is enforced for all members of your organisation.

Enforced
Audit log retention

Logs are retained for 365 days per your organisation policy.

365 days

Danger zone

Destructive actions in this section are irreversible. Contact support if you need help recovering data.
Setting Row Controls

Preferences

These settings apply to your personal account only.

Two-factor authentication

Require a second verification step when signing in.

Display name

Shown on comments, activity feeds, and shared reports.

Account plan

Your current subscription tier and billing cycle.

Pro
Session timeout

Automatically sign out after 30 minutes of inactivity.

Delete account

Permanently remove your account and all associated data. This cannot be undone.

Stacked Sections

Profile

Public information shown to collaborators and in shared views.

Full name

Your real name or a preferred display name.

Email address

Used for sign-in, notifications, and billing receipts.

alex@example.comVerified

Security

Manage passwords, sessions, and authentication options.

Two-factor authentication

Add a second factor so a stolen password alone cannot access your account.

Passkey login

Sign in with a device passkey — no password required.

Active sessions

You are signed in on 3 devices.

Billing

Your plan, payment method, and invoice history.

Current plan

Renews on July 1, 2025.

Pro · $29 / mo
Payment method

Visa ending in 4242 · Expires 08 / 27.

Danger zone

Transfer ownership

Move this workspace to another account. You will lose owner privileges.

Delete workspace

Permanently delete this workspace and all its data. This action cannot be undone.

With Action

Custom domain

Send from your own domain instead of the shared sending pool.

docs.example.com

Added 3 days ago · All DNS records verified.

Active
mail.example.com

Added 7 days ago · One DNS record is still propagating.

Pending

API keys

Keys grant programmatic access to your account. Revoke unused keys promptly.

Production key

Last used 2 hours ago · Created Jan 12, 2025.

Staging key

Last used 5 days ago · Created Dec 3, 2024.

Invite team members

Invite colleagues by email. They will receive an invite link.

alice@example.com

Member · Joined 14 days ago.

Admin
bob@example.com

Member · Joined 2 days ago.

Viewer

Installation

npx shadcn@latest add @byronwade/section

Props

PropTypeDefaultDescription
titlestringSection heading rendered as a small semibold label above the card.
descriptionstringMuted helper text displayed beneath the title.
actionReact.ReactNodeOptional element (e.g. a button) right-aligned beside the title row.
childrenReact.ReactNodeContent rendered inside the bordered card body.
classNamestringExtra Tailwind classes merged onto the outer <section> element.