Need private packages and team management tools?Check out npm Teams »

@reach/tabs

0.9.1 • Public • Published

@reach/tabs

Stable release MIT license

Docs | Source | WAI-ARIA

An accessible tabs component.

The Tab and TabPanel elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

You can render any other elements you want inside of Tabs, but TabList should only render Tab elements, and TabPanels should only render TabPanel elements.

import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
import "@reach/tabs/styles.css";
 
function Example() {
  return (
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
 
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
        <TabPanel>
          <p>three!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Keywords

none

Install

npm i @reach/tabs

DownloadsWeekly Downloads

27,005

Version

0.9.1

License

MIT

Unpacked Size

118 kB

Total Files

12

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar