AppSettings
Settings page layout: a stack of groups, each pairing a title + description column with a card of form controls (two columns on ≥lg, stacked below). Presentational and theme-driven — pass your own fields and submit handling.
Profile
How your account appears across the workspace.
Notifications
Choose what we email you about.
Installation
pnpm dlx @hex-core/cli add app-settingsAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
groupsrequired | object | — | ReadonlyArray<{ title: ReactNode; description?: ReactNode; children: ReactNode }>. Each group renders a heading/description column beside a card of form controls. |
className | string | — | Additional classes applied to the root wrapper. |
AI Guidance
When to use
Use for account / workspace settings pages. Each group is one topic (Profile, Notifications, Billing). Put Label + control pairs in children and own the form submission.
When not to use
Don't use for a single field (just render the field). Don't use for a multi-step wizard (use the stepper). Don't put navigation here — that's the sidebar.
Common mistakes
- Pairing inputs without <Label htmlFor> — the block lays out fields but doesn't wire labels for you.
- One giant group with every setting — split by topic so each card stays scannable.
- Wiring submit inside the block — submission lives in the form you pass as children.
Accessibility
Each group title is an <h3>. The block is layout only — accessible names depend on the Label/control pairing in the children you supply. Group description sits adjacent to the controls for context.
Token budget: 600
Verified against @hex-core/components@1.12.0