saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Scroll Area

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/scroll-area.json

Usage

import { ScrollArea } from "@/components/ui/scroll-area"
<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    {items.map((item) => (
      <div key={item}>{item}</div>
    ))}
  </div>
</ScrollArea>

API Reference

ScrollArea

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Content to render inside the scroll area.

ScrollBar

Automatically rendered inside ScrollArea. Provides custom styled scrollbar.

PropTypeDefaultDescription
orientation"vertical" | "horizontal""vertical"The orientation of the scrollbar.
PreviousRippleNextSelect

On This Page

  • Installation
  • Usage
  • API Reference
  • ScrollArea
  • ScrollBar

Items

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20