ScrollArea

Área con scroll custom (scrollbar estilizado) sin afectar el layout del contenedor.

---

Import

import { ScrollArea, ScrollBar } from '@imansi/ui';

---

Uso básico

<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  {Array.from({ length: 50 }, (_, i) => (
    <div key={i} className="text-sm">
      Item {i + 1}
    </div>
  ))}
</ScrollArea>

---

Horizontal

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max gap-4 p-4">
    {Array.from({ length: 20 }, (_, i) => (
      <div key={i} className="h-24 w-32 rounded-md bg-muted flex items-center justify-center">
        Card {i + 1}
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

---

Lista de tags (caso típico)

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium">Tags</h4>
    {tags.map((tag) => (
      <div key={tag} className="text-sm border-t py-2">
        {tag}
      </div>
    ))}
  </div>
</ScrollArea>

---

Props

ScrollArea

Prop	Tipo	Default	Descripción
className	string	—	Clases adicionales
type	'auto' | 'always' | 'scroll' | 'hover'	'hover'	Cuándo mostrar el scrollbar

ScrollBar

Prop	Tipo	Default	Descripción
orientation	'vertical' | 'horizontal'	'vertical'	Dirección

---

Accesibilidad

• Navegable con teclado (flechas, Page Up/Down, Home/End)
• Compatible con scroll del trackpad y rueda del mouse
• El contenido mantiene su semántica original