Negocios

Scroll Area

Área de scroll customizada com scrollbar estilizada e consistente entre browsers.

Visão geral

O ScrollArea adiciona uma scrollbar visualmente integrada ao design system em qualquer container.

Vertical

Horizontal

Import

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

Padrão de implementação

Snippets para uso do ScrollArea.

Scroll vertical com altura fixa

<ScrollArea className="h-72 w-full">
  {items.map((item) => (
    <div key={item.id} className="py-2 border-b last:border-0">
      {item.name}
    </div>
  ))}
</ScrollArea>

Scroll horizontal

<ScrollArea className="w-full whitespace-nowrap">
  <div className="flex gap-4 pb-4">
    {chips.map((chip) => (
      <div key={chip} className="shrink-0 bg-muted rounded-full px-4 py-1.5">
        {chip}
      </div>
    ))}
  </div>
</ScrollArea>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter