Tabs

Each child of <Tabs.Container> is a <Tabs.Tab>. The name is the tab’s permanent identity — scroll memory and jumpToTab key off it — while label is what the user sees. Keeping name ASCII-simple avoids the sync bugs other libraries hit with localized tab text.

Wrapping Tabs.Tab in your own component

The container detects children by their name prop, not by element type. So you can wrap Tabs.Tab in your own component — just forward name (and children) to the element you return.

function MyTab({ name, label, children }) {
  return (
    <Tabs.Tab name={name} label={label}>
      {children}
    </Tabs.Tab>
  );
}