Tabs

Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.

Made by imskyleen

Edit on GitHub

Open in

Make changes to your account here. Click save when you're done.

Name

Username

Installation

Usage

<TabGroup>
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
    <Tab index={2}>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Tab 1 Content</TabPanel>
    <TabPanel>Tab 2 Content</TabPanel>
    <TabPanel>Tab 3 Content</TabPanel>
  </TabPanels>
</TabGroup>

Props

Docs API Reference

Animate UI props

Credits

We use Headless UI for the tabs component.
We take our inspiration from Shadcn UI for the tabs style.

Switch

Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.

Copy Button

A button with a copy to clipboard animation.