TabbedShowLayout
Groups a show view's fields into labeled tabs that follow the URL. Each <TabbedShowLayout.Tab> takes a label, path, icon and count.
Installation
pnpm dlx shadcn@latest add @chelone/tabbed-show-layoutGroups a show view's fields into labeled tabs that follow the URL. Each <TabbedShowLayout.Tab> takes a label, path, icon and count.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | `<TabbedShowLayout.Tab>` elements, directly or inside Fragments. |
| className | string | — | |
| divider | ReactNode | — | Rendered between a tab's fields, not after the last. |
| spacing | number | — | The gap between a tab's fields, in units of 4px. Defaults to 4. |
| syncWithLocation | boolean | — | Follow the URL (default `true`): the active tab comes from the location under the show route and a change navigates there, keeping the query string. `false` keeps the active tab in local state. |
| tabs | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Replaces the default `<TabbedShowLayoutTabsList>`. |
| value | string | — | The active tab's URL segment. Overrides both modes. |