Settings Section

A card-style section for settings pages: a bordered container with a header, body, and optional footer bar with save/cancel actions.

Profile

Update your personal details.

Display name

import { SettingsSection } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add settings-section

Import

import.tsx

import { SettingsSection } from "@aetherstack/patterns"

Usage

settings-section.tsx

<SettingsSection
  title="Profile"
  description="Update your personal details."
  footer={
    <>
      <Button variant="outline">Cancel</Button>
      <Button>Save changes</Button>
    </>
  }
>
  <div className="space-y-4">
    <div className="space-y-1.5">
      <Label htmlFor="display-name">Display name</Label>
      <Input id="display-name" defaultValue="Jane Smith" />
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" defaultValue="jane@acme.com" />
    </div>
  </div>
</SettingsSection>

Props

Prop	Type	Default	Description
title*	string	—	Section heading.
description	string	—	Subtext in the header.
headerAction	ReactNode	—	Optional action in the header row.
footer	ReactNode	—	Footer bar content — right-aligned. Typically Save/Cancel buttons.
children*	ReactNode	—	Section body content.
className	string	—	Additional classes on the outer section element.

* Required