Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

BlockReactregistry:block5 dependencies

Tabs page

tabs-page

A tabbed settings page with account, notifications, and security panels.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

A tabbed settings page with account, notifications, and security panels. Do: Keep each TabsTrigger's `value` identical to its TabsContent's `value` when you rename a section (here, `account`/`notifications`), so the tab a user lands on always has a panel to show. Don't: Rename a TabsTrigger's `value` (e.g. Notifications → Alerts) without updating its TabsContent to match — the renamed tab still highlights as active since its own value is valid, but the panel underneath renders empty because no content shares that value anymore. Use settings when everything fits on one page without needing to split into separate tabbed sections. Use wizard when the sections are sequential setup steps completed once, not independent settings a user revisits and edits freely.
@quill

More from @quill