Scroll Area

Core Idea

Estiliza a rolagem nativa do navegador com uma barra de rolagem customizada e consistente entre browsers. Built on Base UI Scroll Area.

Key Concepts

• ScrollArea: container que envolve o conteúdo rolável; define altura/largura fixas (ex. h-72 w-48).
• ScrollBar: barra de rolagem customizada; orientation="horizontal" habilita rolagem horizontal (padrão é vertical, implícita).

Code Examples

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

<ScrollArea className="w-96 rounded-md border whitespace-nowrap">
  <div className="flex w-max space-x-4 p-4">
    {works.map((artwork) => (
      <figure key={artwork.artist} className="shrink-0">
        {/* ... */}
      </figure>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

• O que demonstra: rolagem horizontal de uma galeria com whitespace-nowrap + flex w-max no conteúdo interno + ScrollBar orientation="horizontal" explícito.

Reference Tables

Composição:

ScrollArea
└── ScrollBar

Key Takeaways

1. Sem ScrollBar orientation="horizontal" explícito, ScrollArea só rola verticalmente.
2. Para rolagem horizontal funcionar, o conteúdo interno precisa de whitespace-nowrap e flex w-max (não deixar quebrar linha nem encolher).
3. Instalação manual requer npm install @base-ui/react.
4. Combina bem com Separator para dividir itens dentro da área rolável.

Connects To

• Separator: usado nos exemplos oficiais para dividir itens dentro do ScrollArea.