Segmented Tabs

Navigation 37

About

A segmented tab control with a sliding selected-tab background and a fluid hover highlight that follows the cursor, used to switch between grouped panels of content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Segmented Tabs to your project and fits it to your theme.

Code

How Segmented Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Tabs, TabsList, TabItem, TabPanel } from "@/components/ui/tabs-base";

export default function TabsDemo() {
  return (
    <Tabs defaultValue="library" className="w-[360px]">
      <TabsList>
        <TabItem value="library" label="Library" />
        <TabItem value="recents" label="Recents" />
        <TabItem value="favorites" label="Favorites" />
        <TabItem value="settings" label="Settings" />
      </TabsList>
      <TabPanel value="library">
        <p className="text-sm text-muted-foreground pt-3">Library content.</p>
      </TabPanel>
      <TabPanel value="recents">
        <p className="text-sm text-muted-foreground pt-3">Recents content.</p>
      </TabPanel>
      <TabPanel value="favorites">
        <p className="text-sm text-muted-foreground pt-3">Favorites content.</p>
      </TabPanel>
      <TabPanel value="settings">
        <p className="text-sm text-muted-foreground pt-3">Settings content.</p>
      </TabPanel>
    </Tabs>
  );
}