ScrollArea

Guidelines#

Use it for bounded lists inside panels, popovers and cards (members, history, logs). Whole pages scroll natively.

What you provide: a fixed height (className="h-44") and the content; ScrollBar orientation="horizontal" for wide content.

Facts#

API#

TypeScript declarations emitted from src/components/ui/scroll-area.tsx (the module also exports its other parts).

declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): any;
declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): any;
export { ScrollArea, ScrollBar };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
var NAMES = ["Axel Moreau", "Clara Bennett", "Emma Laurent", "Hugo Silva", "Iris Chen", "Jade Lin", "Leo Mercer", "Maya Brooks", "Nolan Park", "Nora Hale", "Orion Reed", "Simon Keller"];
function App() {
  return h(DC.ScrollArea, { className: "h-44 w-72 rounded-md border" },
    h("div", { className: "p-4" },
      h("h4", { className: "mb-3 text-sm font-medium leading-none" }, "Crew"),
      NAMES.map(function (n) { return h("div", { key: n }, h("div", { className: "text-sm py-1.5" }, n), h(DC.Separator, null)); })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Layout#