Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA settings dialog split into tabs with one shared footer, a steady panel height so it does not jump, and a reset to the first tab each time it opens.
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 this when a few related settings do not fit one screen but are small enough for a dialog: notification channels, workspace profile and billing contact.
Do not use it for more than four or five tabs or for tabs with long forms: use a settings page with a sidebar.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | - | Opens the dialog. |
tabs | { value, label, content }[] | - | The tabs and panels. |
defaultTab | string | first tab | Tab shown on every opening. |
onSave | () => void | Promise<void> | - | Save for all tabs; the dialog closes afterwards. |
title, description | ReactNode | - | Dialog text. |
tablist, tab and tabpanel roles with a roving tabindex and arrow-key navigation.| Key | Action |
|---|---|
| ArrowLeft / ArrowRight on the tab list | change tab |
| Tab | from the tab list into the panel |
| Escape | closes |
The pattern ships a Testing Library test (dialog-with-tabs.test.tsx) that covers arrow-key tab changes, the shared Save and the reset to the first tab.