# Scrollable Tabslist Basic - Horizontal scrolling tabs

> TabsList scrolls horizontally inside ScrollableTabsList.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/scrollable-tabslist-scrollable-tabslist-basic).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/scrollable-tabslist-scrollable-tabslist-basic
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/scrollable-tabslist-scrollable-tabslist-basic-light-18699beebf93813a.png
- Registry item: https://shadcnblocks.com/r/scrollable-tabslist-scrollable-tabslist-basic.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/scrollable-tabslist-scrollable-tabslist-basic.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`
- Registry items: `scroll-area`, `tabs`

## Files

### `example/scrollable-tabslist/scrollable-tabslist-basic.tsx`

```tsx
import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
import { ScrollBar } from "@/components/ui/scroll-area";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

const ScrollableTabslistExample = () => {
  return (
    <Tabs
      defaultValue="efficiency"
      className="grid grid-cols-1 gap-8 rounded-4xl border border-border p-4 lg:grid-cols-2 lg:p-8 xl:gap-20"
    >
      <ScrollableTabsList>
        <TabsList className="mx-auto h-12 rounded-4xl p-2 lg:mx-0">
          <TabsTrigger
            value="efficiency"
            className="h-full rounded-4xl px-4 py-2"
          >
            Efficiency
          </TabsTrigger>
          <TabsTrigger
            value="collaboration"
            className="h-full rounded-4xl px-4 py-2"
          >
            Collaboration
          </TabsTrigger>
          <TabsTrigger
            value="insights"
            className="h-full rounded-4xl px-4 py-2"
          >
            Insights
          </TabsTrigger>
          <TabsTrigger value="vision" className="h-full rounded-4xl px-4 py-2">
            Vision
          </TabsTrigger>
        </TabsList>
        <ScrollBar orientation="horizontal" className="h-2" />
      </ScrollableTabsList>
    </Tabs>
  );
};

export default ScrollableTabslistExample;
```

### `components/shadcnblocks/scrollable-tabslist.tsx`

```tsx
import type { ReactNode } from "react";
import { cn } from "cn";

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

interface ScrollableTabsListProps {
  children: ReactNode;
  className?: string;
}

const ScrollableTabsList = ({ children, className }: ScrollableTabsListProps) => {
  return (
    <div className={cn("overflow-hidden rounded-full", className)}>
      <ScrollArea className="whitespace-nowrap">
        {children}
        <ScrollBar orientation="horizontal" className="h-2" />
      </ScrollArea>
    </div>
  );
};

export { ScrollableTabsList };
```