Swipeable Tabs

A swipeable Tabs component with CSS scroll snapping, scroll-driven animations, and anchor positioning.

Home

Files

Settings

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.

Files

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.

Settings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.

Example

TabSelectionIndicator.tsx

TabPanelCarousel.tsx

Tabs.tsx

TabList.tsx

Tab.tsx

TabPanel.tsx

import {Tabs} from './tabs/Tabs';
import {TabList} from './tabs/TabList';
import {Tab} from './tabs/Tab';
import {TabPanel} from './tabs/TabPanel';
import {TabSelectionIndicator} from './tabs/TabSelectionIndicator';
import {TabPanelCarousel} from './tabs/TabPanelCarousel';

<Tabs className="w-[400px] mt-8 mx-auto">
  <TabList aria-label="Tabs">
    <Tab id="home">Home</Tab>
    <Tab id="files">Files</Tab>
    <Tab id="search">Search</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabSelectionIndicator />
  <TabPanelCarousel>
    <TabPanel id="home" shouldForceMount>
      <p className="font-bold">Home</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
    <TabPanel id="files" shouldForceMount>
      <p className="font-bold">Files</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
    <TabPanel id="search" shouldForceMount>
      <p className="font-bold">Search</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
    <TabPanel id="settings" shouldForceMount>
      <p className="font-bold">Settings</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
  </TabPanelCarousel>
</Tabs>

Components

Tabs