Scroll Area

Changelog

v4.12.0Oct 2
Bulk edit for invoices and a new CSV importer.
v4.11.3Sep 26
Fixed rounding in multi-currency totals.
v4.11.2Sep 22
Faster search on workspaces with 10k+ documents.
v4.11.0Sep 15
Approval rules for expenses over a set amount.
v4.10.4Sep 8
Webhook retries now back off exponentially.
v4.10.0Sep 1
Dark mode for the mobile apps.
v4.9.2Aug 25
Audit log export to S3 and GCS.
v4.9.0Aug 18
Custom fields on vendors and customers.
v4.8.1Aug 11
SAML just-in-time provisioning.
v4.8.0Aug 4
Recurring invoices with proration.

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

const releases = [
  ["4.12.0", "Oct 2", "Bulk edit for invoices and a new CSV importer."],
  ["4.11.3", "Sep 26", "Fixed rounding in multi-currency totals."],
  ["4.11.2", "Sep 22", "Faster search on workspaces with 10k+ documents."],
  ["4.11.0", "Sep 15", "Approval rules for expenses over a set amount."],
  ["4.10.4", "Sep 8", "Webhook retries now back off exponentially."],
  ["4.10.0", "Sep 1", "Dark mode for the mobile apps."],
  ["4.9.2", "Aug 25", "Audit log export to S3 and GCS."],
  ["4.9.0", "Aug 18", "Custom fields on vendors and customers."],
  ["4.8.1", "Aug 11", "SAML just-in-time provisioning."],
  ["4.8.0", "Aug 4", "Recurring invoices with proration."],
];

export default function ScrollAreaDemo() {
  return (
    <div className="w-full max-w-sm rounded-xl border bg-card">
      <h3 className="border-b px-4 py-3 font-medium text-sm">Changelog</h3>
      <ScrollArea className="h-64" aria-label="Changelog">
        <ul className="divide-y">
          {releases.map(([version, date, note]) => (
            <li key={version} className="px-4 py-3">
              <div className="flex items-baseline justify-between gap-2">
                <span className="font-medium font-mono text-xs">
                  v{version}
                </span>
                <span className="text-muted-foreground text-xs">{date}</span>
              </div>
              <p className="mt-1 text-muted-foreground text-sm">{note}</p>
            </li>
          ))}
        </ul>
      </ScrollArea>
    </div>
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/scroll-area

The CLI installs dependencies and any other components this one uses.

Usage

tsx

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

tsx

<ScrollArea className="h-64" aria-label="Changelog">
  {/* long content */}
</ScrollArea>

Give the scroll area a fixed height (or width for horizontal scrolling), or put it in a flex or grid parent that limits its size.

When to use

Scroll Area: a region inside a page that scrolls on its own, such as a list in a card, a row of cards, or a wide table, where the default scrollbar looks heavy.
Let the page scroll when the content is the main thing on the page. Nested scrolling regions are harder to use, especially on touch devices.
Carousel: horizontally scrolling slides with previous and next buttons.

Anatomy

tsx

<ScrollArea>   {/* the scroll container, tabIndex=0 */}
  {children}
</ScrollArea>

Part	Renders	Notes
`ScrollArea`	`<div>`	`overflow: auto` on the chosen axes, a thin scrollbar via `scrollbar-width` and `scrollbar-color` (with `::-webkit-scrollbar` styles for older WebKit), and `overscroll-behavior: contain`. Focusable, with a focus ring.

There's no custom scrollbar element: the browser draws the scrollbar, so platform behaviors like overlay scrollbars on macOS and momentum scrolling are kept.

Examples

Horizontal

orientation="horizontal" scrolls sideways. Give the content w-max (or a fixed width) so it doesn't wrap.

Linen bedding
24 products
Stoneware
41 products
Wool throws
12 products
Oak furniture
18 products
Ceramic lamps
9 products
Rugs
33 products
Glassware
27 products

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

const collections = [
  { name: "Linen bedding", count: 24, hue: 30 },
  { name: "Stoneware", count: 41, hue: 200 },
  { name: "Wool throws", count: 12, hue: 350 },
  { name: "Oak furniture", count: 18, hue: 80 },
  { name: "Ceramic lamps", count: 9, hue: 260 },
  { name: "Rugs", count: 33, hue: 150 },
  { name: "Glassware", count: 27, hue: 190 },
];

export default function ScrollAreaHorizontal() {
  return (
    <ScrollArea
      orientation="horizontal"
      aria-label="Collections"
      className="w-full max-w-lg"
    >
      <ul className="flex w-max gap-3 pb-3">
        {collections.map((c) => (
          <li key={c.name} className="w-36 shrink-0">
            <div
              className="aspect-[4/5] rounded-lg"
              style={{
                background: `linear-gradient(160deg, oklch(0.9 0.05 ${c.hue}), oklch(0.75 0.08 ${c.hue}))`,
              }}
            />
            <p className="mt-2 font-medium text-sm">{c.name}</p>
            <p className="text-muted-foreground text-xs">{c.count} products</p>
          </li>
        ))}
      </ul>
    </ScrollArea>
  );
}

fade masks the edges that have more content beyond them, and updates as you scroll and when the content resizes. Pass a number for the fade size in px (default 24). The mask covers everything on the element, borders included, so put borders and backgrounds on a wrapper.

1. Acceptance

By creating an account you agree to these terms and to our privacy policy. If you use the service on behalf of a company, you confirm you can bind it to these terms.

2. Your account

Keep your password secure and tell us right away about any unauthorized use. You're responsible for activity under your account.

3. Billing

Paid plans renew automatically each month or year. You can cancel at any time; access continues until the end of the current period.

4. Your content

You own what you upload. You give us permission to host and process it only to run the service for you.

5. Acceptable use

Don't use the service to break the law, send spam, or interfere with other customers. We may suspend accounts that do.

6. Termination

You can close your account from settings. We'll keep an export of your data available for 30 days.

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

const terms = [
  [
    "1. Acceptance",
    "By creating an account you agree to these terms and to our privacy policy. If you use the service on behalf of a company, you confirm you can bind it to these terms.",
  ],
  [
    "2. Your account",
    "Keep your password secure and tell us right away about any unauthorized use. You're responsible for activity under your account.",
  ],
  [
    "3. Billing",
    "Paid plans renew automatically each month or year. You can cancel at any time; access continues until the end of the current period.",
  ],
  [
    "4. Your content",
    "You own what you upload. You give us permission to host and process it only to run the service for you.",
  ],
  [
    "5. Acceptable use",
    "Don't use the service to break the law, send spam, or interfere with other customers. We may suspend accounts that do.",
  ],
  [
    "6. Termination",
    "You can close your account from settings. We'll keep an export of your data available for 30 days.",
  ],
];

export default function ScrollAreaFade() {
  return (
    // The mask fades everything on the scroll element, so the border lives on a wrapper.
    <div className="w-full max-w-md rounded-lg border bg-card">
      <ScrollArea fade aria-label="Terms of service" className="h-60">
        <div className="flex flex-col gap-4 p-4 text-sm leading-relaxed">
          {terms.map(([title, body]) => (
            <section key={title}>
              <h4 className="font-medium">{title}</h4>
              <p className="mt-1 text-muted-foreground">{body}</p>
            </section>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}

Both directions

orientation="both" scrolls on both axes. Sticky headers and columns work as usual, since the scroll area is the scroll container.

Region ($k)	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
North America	40	96	62	118	84	140	106	72	128	94	150	116
South America	77	43	99	65	121	87	143	109	75	131	97	153
Western Europe	114	80	46	102	68	124	90	146	112	78	134	100
Eastern Europe	61	117	83	49	105	71	127	93	149	115	81	137
Middle East	98	64	120	86	52	108	74	130	96	152	118	84
Africa	45	101	67	123	89	55	111	77	133	99	155	121
South Asia	82	48	104	70	126	92	58	114	80	136	102	158
East Asia	119	85	51	107	73	129	95	61	117	83	139	105
Oceania	66	122	88	54	110	76	132	98	64	120	86	142
Caribbean	103	69	125	91	57	113	79	135	101	67	123	89
Central America	50	106	72	128	94	60	116	82	138	104	70	126
Nordics	87	53	109	75	131	97	63	119	85	141	107	73

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

const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];
const regions = [
  "North America",
  "South America",
  "Western Europe",
  "Eastern Europe",
  "Middle East",
  "Africa",
  "South Asia",
  "East Asia",
  "Oceania",
  "Caribbean",
  "Central America",
  "Nordics",
];

function revenue(r: number, m: number) {
  return Math.round(40 + ((r * 37 + m * 53) % 90) + m * 3);
}

export default function ScrollAreaBoth() {
  return (
    <ScrollArea
      orientation="both"
      aria-label="Revenue by region"
      className="h-64 w-full max-w-lg rounded-lg border bg-card"
    >
      <table className="w-max border-separate border-spacing-0 text-sm">
        <thead>
          <tr>
            <th className="sticky top-0 left-0 z-20 border-b bg-card px-3 py-2 text-left font-medium">
              Region ($k)
            </th>
            {months.map((m) => (
              <th
                key={m}
                className="sticky top-0 z-10 border-b bg-card px-3 py-2 text-right font-medium"
              >
                {m}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {regions.map((r, ri) => (
            <tr key={r}>
              <th className="sticky left-0 z-10 border-b bg-card px-3 py-2 text-left font-normal whitespace-nowrap">
                {r}
              </th>
              {months.map((m, mi) => (
                <td
                  key={m}
                  className="border-b px-3 py-2 text-right text-muted-foreground tabular-nums"
                >
                  {revenue(ri, mi)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollArea>
  );
}

Scrollbar visibility

scrollbar="thin" (default) is always visible, hover shows it only while the pointer is over the area or it has keyboard focus, and hidden removes it while keeping wheel, touch and keyboard scrolling.

scrollbar="thin"

AllDesignEngineeringMarketingSalesSupportFinanceLegalPeopleOperationsSecurityData

scrollbar="hover"

AllDesignEngineeringMarketingSalesSupportFinanceLegalPeopleOperationsSecurityData

scrollbar="hidden"

AllDesignEngineeringMarketingSalesSupportFinanceLegalPeopleOperationsSecurityData

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

const tags = [
  "All",
  "Design",
  "Engineering",
  "Marketing",
  "Sales",
  "Support",
  "Finance",
  "Legal",
  "People",
  "Operations",
  "Security",
  "Data",
];

function Row({ scrollbar }: { scrollbar: "thin" | "hover" | "hidden" }) {
  return (
    <div className="flex flex-col gap-1.5">
      <span className="font-mono text-muted-foreground text-xs">
        scrollbar="{scrollbar}"
      </span>
      <ScrollArea
        orientation="horizontal"
        scrollbar={scrollbar}
        aria-label={`Teams (${scrollbar} scrollbar)`}
        className="w-full"
      >
        <div className="flex w-max gap-2 pb-2">
          {tags.map((t) => (
            <span
              key={t}
              className="rounded-full border bg-card px-3 py-1 text-sm"
            >
              {t}
            </span>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}

export default function ScrollAreaScrollbar() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Row scrollbar="thin" />
      <Row scrollbar="hover" />
      <Row scrollbar="hidden" />
    </div>
  );
}

Accessibility

The scroll area has tabIndex={0} by default, so keyboard users can focus it and scroll with the arrow keys, Page Up/Down, Home and End. Pass tabIndex={-1} if the content is already fully reachable by tabbing through focusable children.
Because it's focusable, give it a name with aria-label or aria-labelledby, and consider role="region" for large, landmark-like areas.
With scrollbar="hidden", nothing shows that the area scrolls. Use it only when the content makes it obvious (a cut-off row of chips, a fade edge).
Fades are visual only and respect the content beneath them; they don't block pointer events.

Styling

Data attributes

Attribute	On	Values
`data-slot="scroll-area"`	Root	Always
`data-orientation`	Root	`vertical` · `horizontal` · `both`

Scrollbar color

The thumb color is the --scroll-thumb variable (35% of --muted-foreground). Override it on the scroll area or any ancestor:

tsx

<ScrollArea className="[--scroll-thumb:var(--brand)]">…</ScrollArea>

`scrollAreaVariants`

The tailwind-variants function behind ScrollArea. Apply it to any element to get the same scrollbars without the fade logic, for example a <pre> or a <table> wrapper.

API Reference

Prop

Type

Also accepts every prop of <div>, including ref and onScroll.

Carousel: slides with navigation.
Table: wide tables inside a scroll area.
Card: a frame around a scrolling list.