Scroll Area

Layout

Área com scroll personalizado e estilização consistente.

Preview

Visualização do componente ScrollArea com diferentes configurações

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add scroll-area

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { ScrollArea } from "@scmposs/hollow-ui"

<ScrollArea className="h-72 w-full rounded-md border p-4">
  <div className="space-y-4">
    {items.map((item) => (
      <div key={item.id}>{item.content}</div>
    ))}
  </div>
</ScrollArea>

Exemplos

Scroll Vertical com Lista

Item da lista 1

Item da lista 2

Item da lista 3

Item da lista 4

Item da lista 5

Item da lista 6

Item da lista 7

Item da lista 8

Item da lista 9

Item da lista 10

Item da lista 11

Item da lista 12

Item da lista 13

Item da lista 14

Item da lista 15

Item da lista 16

Item da lista 17

Item da lista 18

Item da lista 19

Item da lista 20

Scroll Horizontal

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Scroll Vertical e Horizontal

Linha 1 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 2 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 3 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 4 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 5 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 6 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 7 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 8 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 9 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 10 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 11 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 12 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 13 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 14 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Linha 15 - Este conteúdo é largo o suficiente para requerer scroll horizontal além do vertical.

Lista de Tags Horizontal

ReactTypeScriptNext.jsTailwind CSSRadix UIVercelGitGitHubVS CodeNode.jsnpmpnpm

Props

Propriedades do componente ScrollArea

Prop	Tipo	Padrão	Descrição
`className`	string	-	Classes CSS adicionais
`children`	ReactNode	-	Conteúdo com scroll

ScrollBar Props

Prop	Tipo	Padrão	Descrição
`orientation`	"vertical" \| "horizontal"	"vertical"	Orientação da barra de scroll

Diretrizes de Uso

Quando usar

Para exibir conteúdo que excede o espaço disponível
Quando precisar de scrollbars estilizadas consistentes
Em listas longas ou conteúdo dinâmico
Para galerias horizontais de cards ou imagens

Evite usar quando

O conteúdo couber naturalmente no espaço disponível
Precisar de paginação ou carregamento incremental (use paginação)
O scroll principal da página já resolve o problema

Dicas

Sempre defina uma altura máxima para ScrollArea vertical
Use ScrollBar com orientation="horizontal" para scroll horizontal
Combine com border e rounded-md para melhor aparência
Adicione padding interno para melhor legibilidade

Acessibilidade

O componente ScrollArea é baseado no Radix UI ScrollArea e segue as melhores práticas de acessibilidade:

Navegação via teclado (setas, Page Up/Down, Home/End)
Suporte completo para leitores de tela
Compatível com todos os dispositivos de entrada
Respeita as preferências de movimento reduzido do sistema