components

TabPanel

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

PropTypeDefaultDescription
value *text