Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn inset-grouped settings screen with account, switch and navigation rows, a destructive sign-out row and footer help text. Use this when you build a settings or account screen on a phone with a mix of toggles, values and links.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when you build a settings or account screen on a phone with a mix of toggles, values and links.
Do not use it for forms with many fields (use a form) or for a single toggle.
It composes switch, @tealmac/list-row, which the CLI installs for you.
import { SettingsGroupedList } from "@/components/settings-grouped-list"<div className="w-full max-w-sm">
<SettingsGroupedList
user={{ name: "Ada Lovelace", email: "ada@example.com" }}
notifications={on}
onNotificationsChange={setOn}
onSignOut={() => setOut(true)}
/>
<p role="status" className="text-muted-foreground mt-2 text-sm">
{out ? "Signed out" : "Signed in"}
</p>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
user | { name: string; email: string } | required | Shown in the first row. |
notifications | boolean | required | Switch state. |
onNotificationsChange | (on: boolean) => void | required | Switch handler. |
onSignOut | () => void | required | Sign out handler. |
aria-label.The pattern ships with a Testing Library test (settings-grouped-list.test.tsx) that drives it through roles and the keyboard.