Docs

Data feedback

ScrollArea

Custom scrollbar container with smooth cross-browser styling.

5 examplesPrimitive ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { ScrollArea } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Vertical Scroll List

A scrollable vertical list with a custom scrollbar.

Vertical Scroll List rendered preview

Releases

v1.2.0
v1.2.1
v1.2.2
v1.2.3
v1.2.4
v1.2.5
v1.2.6
v1.2.7
v1.2.8
v1.2.9
v1.2.10
v1.2.11
v1.2.12
v1.2.13
v1.2.14
v1.2.15
v1.2.16
v1.2.17
v1.2.18
v1.2.19
v1.2.20
v1.2.21
v1.2.22
v1.2.23

Horizontal Gallery Scroll

Scroll a row of items horizontally.

Horizontal Gallery Scroll rendered preview

Featured Hardware Collection

Swipe or scroll horizontally to browse inventory.

Pro Wireless HeadphonesAudio
Pro Wireless Headphones
$299.00In Stock
Minimalist Smart WatchWearables
Minimalist Smart Watch
$199.00In Stock
Ergonomic Mechanical KeyboardPeripherals
Ergonomic Mechanical Keyboard
$149.00In Stock
Studio Monitor SpeakersAudio
Studio Monitor Speakers
$449.00In Stock
Ultra-Wide Curved DisplayDisplays
Ultra-Wide Curved Display
$799.00In Stock

Notification Stream List

Scrollable activity log with custom scrollbar track.

Notification Stream List rendered preview

Recent Activity Stream
U1

User #1 pushed a commit to main

5 minutes ago

U2

User #2 pushed a commit to main

10 minutes ago

U3

User #3 pushed a commit to main

15 minutes ago

U4

User #4 pushed a commit to main

20 minutes ago

U5

User #5 pushed a commit to main

25 minutes ago

Build Console Log Viewer

Scrollable terminal output log view.

Build Console Log Viewer rendered preview

build.log
[16:14:02] info  Building @quinkit/ui ESM bundle...
[16:14:05] info  Compiling 38 React Server/Client Components...
[16:14:08] info  Generating TypeScript declaration files...
[16:14:10] info  Running Vitest unit and integration suites...
[16:14:12] success Built successfully in 10.42s (0 errors).

Overview

ScrollArea is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Accessibility Details

  • Uses semantic HTML or Radix primitives where applicable.
  • Interactive components expose keyboard/focus behavior through native controls or Radix.
  • ARIA roles, states, and labels are applied where relevant.

Styling

  • Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
  • Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

ScrollArea adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/scroll-area.json