Tabs show one panel at a time, chosen from a row of tabs that the arrow keys move along, built on Radix Tabs with Material Design 3 styling.
Examples of v0.1.1 are shown as code; only the latest version runs live. Open the live examples →
Two tabs, each showing its own panel. The arrow keys move between the tabs.
Basic Tabs
1const BasicTabs = () => (2 <Tabs defaultValue="choose">3 <TabList aria-label="Add an image">4 <Tab value="choose">Choose</Tab>5 <Tab value="upload">Upload</Tab>6 </TabList>7 <TabPanel value="choose">Pick an image from the library.</TabPanel>8 <TabPanel value="upload">Upload a new image.</TabPanel>9 </Tabs>10);1112render(<BasicTabs />);