Settings shell, preference rows, integrations, API keys, team and audit rows. Every sample is exhaustive across variants and states, with Sundanese sample people.
Two-column settings scaffold with a sidenav (icons, badges, active item), header title, description, and actions.
Manage your profile, notifications, and integrations.
How you appear to your team.
<SettingsLayout title="Account settings" nav={<SettingsNav items={…} activeId="notifications" />}>…</SettingsLayout>Heading + body group. Every variant — default, bordered, card.
Group body renders rows below the heading.
Group body renders rows below the heading.
Group body renders rows below the heading.
<SettingsGroup variant="card" title="Theme">…</SettingsGroup>Label + description + control row. Both layouts plus the disabled state.
<PreferenceRow label="Time zone" description="…"><Select>…</Select></PreferenceRow>Switch control with label and description. Every state.
<ToggleRow label="Two-factor auth" defaultChecked />Dropdown control with label and description. Default and disabled states.
<SelectRow label="Default project view" options={…} defaultValue="board" />Keyboard shortcut preference. Chord array, single-key string, editable and read-only.
<KeybindRow label="Open command menu" shortcut={["⌘", "K"]} editable />Active session with device metadata. Current session plus every device kind and the revoke action.
<SessionRow device={{ name: "MacBook Air", kind: "desktop" }} current />Third-party integration tile. Every state — connected, disconnected, coming soon.
Send notifications to your Slack channels.
Connected as idinstudio.slack.com
Link PRs and issues from your repositories.
Sync tasks between Linear and Idin Studio.
<IntegrationCard name="Slack" connected connectedAs="idinstudio.slack.com" onDisconnect={() => {}} />Outgoing webhook with event list. Every delivery status plus active/inactive toggle.
<WebhookRow url="https://hooks…/projects" events={[…]} active lastStatus="success" />API key row with reveal, copy, and revoke. Full and read-scope variants.
sk-idin-••••••••abc123sk-idin-••••••••xyz987<APIKeyRow name="Production" maskedKey="sk-idin-••••abc123" scopes={["read", "write"]} onReveal={…} />Team member row with role select. Every membership status.
<TeamMemberRow user={{ name: "Ahmad Muhyidin" }} role="admin" status="active" canEdit canRemove />Bulk-invite form with role select and optional message.
<InviteMemberForm allowBulk showMessage defaultRole="editor" roles={…} onSubmit={…} />Structured audit log entry. Every severity.
<AuditLogRow actor={{ name: "Ahmad Muhyidin" }} action="Updated billing email" severity="info" />