Scroll Area

Container com rolagem estilizada, construído com o Radix Scroll Area.

Exemplos

Vertical

Item #1

Item #2

Item #3

Item #4

Item #5

Item #6

Item #7

Item #8

Item #9

Item #10

Item #11

Item #12

Item #13

Item #14

Item #15

Item #16

Item #17

Item #18

Item #19

Item #20

Horizontal

Conteúdo largo para demonstrar a rolagem horizontal (arraste para o lado)

Vertical e horizontal

Bloco 1

Bloco 2

Bloco 3

Bloco 4

Bloco 5

Bloco 6

Bloco 7

Bloco 8

Bloco 9

Bloco 10

Bloco 11

Bloco 12

Bloco 13

Bloco 14

Bloco 15

Bloco 16

Bloco 17

Bloco 18

Bloco 19

Bloco 20

Bloco 21

Bloco 22

Bloco 23

Bloco 24

API

ScrollArea

O ScrollArea já renderiza um ScrollBar vertical e um horizontal (cada um aparece só quando o eixo dele transborda), então você não precisa adicioná-los.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classe CSS para estilizar o container.
children	React.ReactNode	-	Conteúdo renderizado dentro do viewport.
...props	React.ComponentProps<typeof ScrollAreaPrimitive.Root>	-	Aceita todas as props do Root do Radix ScrollArea.

ScrollBar

Exportado para composições personalizadas construídas direto sobre as primitivas do Radix ScrollArea.

Propriedade	Tipo	Padrão	Descrição
orientation	"vertical" \| "horizontal"	"vertical"	Orientação da barra de rolagem.
className	string	-	Classe CSS para estilizar a barra.
...props	React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>	-	Aceita todas as props do Scrollbar do Radix.