The content shown for one Tab inside
Tabs. Only the selected panel's children actually render — the
others stay hidden, not unmounted.
tsx
Panel content.
<TabPanel value="a">
...
</TabPanel>value
Examples
value must match the Tab it corresponds to — matching values is what connects a tab button to
the panel it shows, not DOM position or array index:
tsx
Recent activity would render here.
<TabPanel value="activity">
<ActivityFeed />
</TabPanel>Because inactive panels stay mounted (just hidden), avoid putting anything expensive to run on
every render inside one that's rarely visible — it still renders on every parent update, active
tab or not.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value * | text | — | — |