ScrollArea

import { ScrollArea } from "@grassroot/ui-react";
 
const rows = [
  { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
  { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
];
 
 
<ScrollArea maxHeight={168} className="w-full max-w-[340px]">
  {rows.map(([name, value]) => (
    <div key={name} className="flex justify-between border-b px-[14px] py-2.5">
      {name}
      <span className="font-mono text-muted">{value}</span>
    </div>
  ))}
</ScrollArea>

import { ScrollArea } from "@grassroot/ui-solid";
 
const rows = [
  { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
  { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
];
 
export function Example() {
  return (
    <>
      <ScrollArea
        maxHeight={168}
        className="w-full max-w-[340px]"
      >
        {rows.map(([name, value]) => (
          <div key={name} className="flex justify-between border-b px-[14px] py-2.5">
            {name}
            <span className="font-mono text-muted">{value}</span>
          </div>
        ))}
      </ScrollArea>
    </>
  );
}