104Get started

Scroll Area: HextaUI and shadcn/ui

The HextaUI Scroll area keeps the shadcn/ui names and theme tokens and installs with the same CLI. This page lists what differs, read from the source of both. The shadcn/ui side is its base-vega registry as of 2026-10-16.

At a glance

MeasureHextaUIshadcn/ui
Exported parts22
Props the wrapper handles51
Lines of source25654
npm dependencies@base-ui/react@^1.8.0class-variance-authoritycncn
Built fromtheme–

More source is not better on its own. Most of the extra lines in HextaUI handle states, motion and edge cases that you would otherwise write yourself.

Props HextaUI adds

Props the HextaUI wrapper handles itself that the shadcn/ui wrapper does not. Props passed straight through to Base UI or the underlying library are left out, because both versions accept them.

PropWhat it does
scrollbarsScrollAreaSee the API reference
fadeScrollAreaFade the edges that have more content.
peekScrollAreaTrim the height so the last visible item is cut partway. Mark items with data-scroll-area-item to choose which elements count.

The HextaUI version

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

const names = [
  "Olivia Martin",
  "Jackson Lee",
  "Isabella Nguyen",
  "William Kim",
  "Sofia Davis",
  "Liam Patel",
  "Emma Garcia",
  "Noah Wilson",
]
const roles = ["Design", "Engineering", "Product", "Support"]

const people = Array.from({ length: 40 }, (_, index) => ({
  id: index + 1,
  name: names[index % names.length],
  role: roles[index % roles.length],
}))

export function ScrollAreaDemo() {
  return (
    <ScrollArea peek className="h-80 w-full max-w-sm rounded-lg border">
      <ul className="flex flex-col gap-1 p-2">
        {people.map((person) => (
          <li
            key={person.id}
            className="flex items-center justify-between gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-muted"
          >
            <span className="truncate font-medium">
              {person.id}. {person.name}
            </span>
            <span className="text-muted-foreground">{person.role}</span>
          </li>
        ))}
      </ul>
    </ScrollArea>
  )
}

Every state, the keyboard map and the API reference are on the component page.

10 of its examples also have a page of their own.

Switch one component

Run the add command with --overwrite to replace the shadcn/ui file in @/components/ui, then review the diff in git before you keep it. Imports stay the same, and components you don’t replace keep working.

pnpm dlx shadcn@latest add https://hextaui.com/r/scroll-area.json --overwrite
  • Every prop in the table above is an addition, so call sites written for shadcn/ui don’t pass it yet.
  • Check any part or variant listed only for shadcn/ui before you switch, and map it to the closest HextaUI one.

Other components compared

More comparisons