Scroll

Scroll area with custom scrollbars for overflow.

import { Scroll } from 'ui-lab-components/scroll';
import { Scroll } from 'ui-lab-components/scroll';
import { Skeleton } from 'ui-lab-components/skeleton';
 
const lineWidths = [
  '92%',
  '78%',
  '85%',
  '60%',
  '95%',
  '70%',
  '88%',
  '55%',
  '90%',
  '75%',
  '82%',
  '65%',
  '93%',
  '58%',
  '87%',
  '72%',
  '80%',
  '63%',
  '91%',
  '77%',
];
 
export default function Example() {
  return (
    <div className="h-full w-full overflow-hidden rounded-sm">
      <Scroll direction="vertical" inline fade-y fade-distance={8} fade-size={5}>
        <div className="flex flex-col gap-3 p-4">
          {lineWidths.map((width, index) => (
            <Skeleton.Text key={index} lines={1} w={width} />
          ))}
        </div>
      </Scroll>
    </div>
  );
}

scroll/01-basic-scroll

Vertically scrollable list of skeleton rows with a fade mask to hint at overflow content.

Loading interactive preview
import { Scroll } from 'ui-lab-components/scroll';
import { Skeleton } from 'ui-lab-components/skeleton';
 
const LINE_WIDTHS = ['92%', '78%', '85%', '60%', '95%', '70%', '88%', '55%', '90%', '75%'];
 
export default function Example() {
  return (
    <div className="overflow-hidden rounded-sm">
      <Scroll max-height="200px" fade-y fade-distance={8} fade-size={5}>
        <div
          className="flex flex-col gap-3 p-4"
          style={{ '--background': 'var(--background-700)' } as React.CSSProperties}
          aria-hidden="true"
        >
          {LINE_WIDTHS.map((w, i) => (
            <Skeleton.Text key={i} lines={1} w={w} />
          ))}
        </div>
      </Scroll>
    </div>
  );
}

scroll/02-settings-panel-scroll

Constrained-height list of skeleton settings rows with a custom scrollbar shown on hover.

Loading interactive preview
import { Scroll } from 'ui-lab-components/scroll';
import { Skeleton } from 'ui-lab-components/skeleton';
 
const ITEMS = Array.from({ length: 14 }, (_, i) => i);
 
export default function Example() {
  return (
    <div className="overflow-hidden rounded-sm border border-background-700/40 bg-background-950">
      <div className="border-b border-background-700/40 px-4 py-3" aria-hidden="true">
        <Skeleton.Text w={120} scale={0.9} />
      </div>
      <Scroll max-height="240px">
        <div className="flex flex-col" aria-hidden="true">
          {ITEMS.map((i) => (
            <div
              key={i}
              className="flex items-center gap-3 border-b border-background-700/30 px-4 py-2.5 last:border-b-0"
            >
              <Skeleton w={32} h={32} className="rounded-full" />
              <div className="flex flex-1 flex-col gap-1.5">
                <Skeleton.Text w={100} scale={0.8} />
                <Skeleton.Text w={160} scale={0.65} />
              </div>
            </div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}

scroll/03-horizontal-tags

Horizontally scrollable row of skeleton tag pills that overflow their container.

Loading interactive preview
import { Scroll } from 'ui-lab-components/scroll';
import { Skeleton } from 'ui-lab-components/skeleton';
 
const TAGS = Array.from({ length: 12 }, (_, i) => 40 + ((i * 17) % 60));
 
export default function Example() {
  return (
    <div className="flex flex-col gap-2">
      <Skeleton.Text w={90} scale={0.8} />
      <Scroll direction="horizontal" max-width="420px" hide={false} inline>
        <div className="flex gap-2 py-0.5" aria-hidden="true">
          {TAGS.map((w, i) => (
            <Skeleton key={i} w={w} h={22} className="shrink-0 rounded-full" />
          ))}
        </div>
      </Scroll>
    </div>
  );
}