Two complete settings screens: an organization console with a tabbed sidebar, members table, AI feature switches and a save bar that springs up when anything changes, and a personal workspace page with profile, billing and a notification matrix.
Organization
organization.tsxSidebar tabs for general, members (search, invite, role selects), AI features and publishing, with a save bar that slides up while there are unsaved changes.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | OrgSettings | — | { name, slug, description, members, ai, publishing }. The save bar appears once anything differs. |
onSave | (value: OrgSettings) => void | Promise<void> | — | Runs after validation. Throw to show the error in the save bar. |
baseUrl | string | "kestrel.app/" | Prefix shown before the slug. |
className | string | — | Classes for the outer container. |
Workspace
workspace.tsxUnderline tabs for profile, billing (plan card with usage meters, drawn payment card, plan picker, invoices) and a notification channel matrix, each with its own save row.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultTab | "profile" | "billing" | "notifications" | "profile" | Tab shown first. |
profile | { name; email; timezone; bio } | — | Starting profile values. |
billing | { planId; billingEmail; taxId } | — | Starting billing values. |
notifications | { matrix; digest; quietHours } | — | Starting notification preferences. |
plans | { id; name; price; blurb }[] | — | Plans in the picker; price is per month billed yearly. |
invoices | { id; date; amount; status: "Paid" | "Due" }[] | — | Invoice rows. |
card | { brand; last4; expires } | — | Card on file. |
usage | { label; used; limit; unit? }[] | — | Meters on the plan card. |
onSaveProfile / onSaveBilling / onSaveNotifications | (value) => void | Promise<void> | — | Per-section save handlers. Throw to show an error in that section. |
onDownloadInvoice | (id: string) => void | — | Invoice download handler. |
onUpdateCard | () => void | — | Update-card button handler. |
className | string | — | Classes for the outer container. |
Install the whole set
Installs every settings pages variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Section navigation is a tablist with arrow-key, Home and End support, tied to its tabpanel.
- Tables use captions, column headers and labelled per-row controls; owner-protection disables controls with an explanation.
- Save status (unsaved, saved, error) is announced through polite live regions; ⌘S / Ctrl+S saves the organization page.