Scroll Area: HextaUI und shadcn/ui

Scroll area von HextaUI behält die Namen und Theme-Tokens von shadcn/ui und wird mit derselben CLI installiert. Diese Seite listet die Unterschiede auf, aus dem Code beider gelesen. Die shadcn/ui-Seite ist das base-vega-Registry mit Stand 2026-10-16.

Auf einen Blick

Kennzahl	HextaUI	shadcn/ui
Exportierte Teile	2	2
Props, die der Wrapper verarbeitet	5	1
Codezeilen	256	54
npm-Abhängigkeiten	`@base-ui/react@^1.8.0class-variance-authoritycn`	`cn`
Aufgebaut aus	`theme`	–

Mehr Code ist für sich genommen nicht besser. Die meisten zusätzlichen Zeilen in HextaUI behandeln Zustände, Bewegung und Randfälle, die du sonst selbst schreiben würdest.

Props, die HextaUI ergänzt

Props, die der HextaUI-Wrapper selbst verarbeitet und der shadcn/ui-Wrapper nicht. Props, die direkt an Base UI oder die zugrunde liegende Bibliothek gehen, fehlen hier, weil beide Versionen sie annehmen.

Prop	Was sie bewirkt
`scrollbars`ScrollArea	Siehe API-Referenz
`fade`ScrollArea	Blende die Ränder aus, die mehr Inhalt haben.
`peek`ScrollArea	Kürze die Höhe, sodass das letzte sichtbare Item halb abgeschnitten ist. Markiere Items mit data-scroll-area-item, um zu wählen, welche Elemente zählen.

Die HextaUI-Version

1. Olivia MartinDesign
2. Jackson LeeEngineering
3. Isabella NguyenProduct
4. William KimSupport
5. Sofia DavisDesign
6. Liam PatelEngineering
7. Emma GarciaProduct
8. Noah WilsonSupport
9. Olivia MartinDesign
10. Jackson LeeEngineering
11. Isabella NguyenProduct
12. William KimSupport
13. Sofia DavisDesign
14. Liam PatelEngineering
15. Emma GarciaProduct
16. Noah WilsonSupport
17. Olivia MartinDesign
18. Jackson LeeEngineering
19. Isabella NguyenProduct
20. William KimSupport
21. Sofia DavisDesign
22. Liam PatelEngineering
23. Emma GarciaProduct
24. Noah WilsonSupport
25. Olivia MartinDesign
26. Jackson LeeEngineering
27. Isabella NguyenProduct
28. William KimSupport
29. Sofia DavisDesign
30. Liam PatelEngineering
31. Emma GarciaProduct
32. Noah WilsonSupport
33. Olivia MartinDesign
34. Jackson LeeEngineering
35. Isabella NguyenProduct
36. William KimSupport
37. Sofia DavisDesign
38. Liam PatelEngineering
39. Emma GarciaProduct
40. Noah WilsonSupport

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>
  )
}

Alle Zustände, die Tastaturbelegung und die API-Referenz stehen auf der Komponentenseite.

10 seiner Beispiele haben auch eine eigene Seite.

Eine Komponente wechseln

Führe den add-Befehl mit --overwrite aus, um die shadcn/ui-Datei in @/components/ui zu ersetzen, und prüfe den Diff in git, bevor du ihn behältst. Die Imports bleiben gleich, und Komponenten, die du nicht ersetzt, funktionieren weiter.

pnpm dlx shadcn@latest add https://hextaui.com/r/scroll-area.json --overwrite

Jede Prop in der Tabelle oben ist neu, daher übergeben Aufrufe, die für shadcn/ui geschrieben wurden, sie noch nicht.
Prüfe vor dem Wechsel jeden Teil und jede Variante, die nur bei shadcn/ui steht, und ordne sie dem nächsten HextaUI-Gegenstück zu.

Scroll Area: HextaUI und shadcn/ui

Auf einen Blick

Props, die HextaUI ergänzt

Die HextaUI-Version

Eine Komponente wechseln

Weitere verglichene Komponenten

Weitere Vergleiche