# better-scrollbar > Highly customizable, high-performance virtual scrollbar component. This package re-exports @better-scrollbar/react for backward compatibility. Latest version **2.0.2** (published 2026-06-25) · MIT license · 0 weekly downloads ## Install ```sh npm install better-scrollbar pnpm add better-scrollbar yarn add better-scrollbar bun add better-scrollbar ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.0.2 | | Published | 2026-06-25 | | First published | 2023-12-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=18 | | Dependencies | 2 | | Unpacked size | 12.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 8 | | Author | biubiukam | | Maintainers | kampiu | | Keywords | react, vue, virtual-scroll, virtual-list, virtualization, scrollbar, custom-scrollbar, infinite-scroll, large-list, dynamic-height, scroll-anchoring, high-performance, monorepo | ## Links - npm: https://www.npmjs.com/package/better-scrollbar - Repository: https://github.com/biubiukam/better-scrollbar - Homepage: https://biubiukam.github.io/better-scrollbar/ - Issues: https://github.com/biubiukam/better-scrollbar/issues - npm.io page: https://npm.io/package/better-scrollbar ## Dependencies (2) - [@better-scrollbar/core](https://npm.io/package/@better-scrollbar/core.md) 2.0.2 - [@better-scrollbar/react](https://npm.io/package/@better-scrollbar/react.md) 2.0.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.2 (latest) — 2026-06-25 - 2.0.0 (alpha) — 2026-06-23 - 1.1.5 — 2026-06-23 - 1.1.4 — 2026-06-23 - 1.1.3 — 2026-06-23 - 1.1.2 — 2026-06-23 - 1.1.0 — 2026-06-23 - 1.0.2 — 2024-02-03 - 1.0.1 — 2024-02-02 - 1.0.0 — 2024-01-27 - 0.0.4 — 2024-01-11 - 0.0.3 — 2024-01-11 - 0.0.2 — 2024-01-11 - 0.0.1 — 2023-12-06 ## README # better-scrollbar [![NPM Version](https://img.shields.io/npm/v/better-scrollbar)](https://www.npmjs.com/package/better-scrollbar) [![NPM License](https://img.shields.io/npm/l/better-scrollbar)](./LICENSE) [![Coverage Status](https://coveralls.io/repos/github/biubiukam/better-scrollbar/badge.svg?branch=master)](https://coveralls.io/github/biubiukam/better-scrollbar?branch=master) A highly customizable, high-performance virtual scrollbar for rendering large data sets. Ships framework-specific adapters for **React** and **Vue 3**, built on a shared framework-agnostic core. ## Packages | Package | Description | Version | | ------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | [`@better-scrollbar/core`](packages/core) | Framework-neutral algorithms and utilities | [![npm](https://img.shields.io/npm/v/@better-scrollbar/core)](https://www.npmjs.com/package/@better-scrollbar/core) | | [`@better-scrollbar/react`](packages/react) | React adapter (component, hooks, render props) | [![npm](https://img.shields.io/npm/v/@better-scrollbar/react)](https://www.npmjs.com/package/@better-scrollbar/react) | | [`@better-scrollbar/vue`](packages/vue) | Vue 3 adapter (component, composables) | [![npm](https://img.shields.io/npm/v/@better-scrollbar/vue)](https://www.npmjs.com/package/@better-scrollbar/vue) | | [`better-scrollbar`](.) | Compatibility wrapper — re-exports `@better-scrollbar/react` | [![npm](https://img.shields.io/npm/v/better-scrollbar)](https://www.npmjs.com/package/better-scrollbar) | > **Migrating from v1?** The `better-scrollbar` package continues to export the > same React API. No changes are required unless you want to switch to the > scoped `@better-scrollbar/react` import. ## Features - **Children mode** for regular lists with familiar JSX / slot syntax. - **Indexed rendering** with `itemCount` + `renderItem` / scoped slot for massive data sets (millions of rows). - **Dynamic height measurement** via a shared `ResizeObserver` with LRU cache. - **Custom scrollbar** tracks, thumbs, and view wrappers through render props (React) or slots (Vue). - **Scroll anchoring** that preserves visible position during prepend and resize. - **Bottom-following output** for log and chat-style views. - **Sticky rows** and group headers with `stickyIndices` / `groupCounts`. - **Native scroll mode** that delegates to the browser when possible. - **Scroll seek** placeholders during fast scrolling for expensive row renderers. - **Adaptive overscan** that expands pre-rendering toward the scroll direction. - **Accessibility** with built-in `role="list"` / `role="listitem"` and ARIA position metadata. ## Quick Start ### React ```bash pnpm add @better-scrollbar/react @better-scrollbar/core ``` ```tsx import ScrollBar from "@better-scrollbar/react" import "@better-scrollbar/react/styles/ScrollBar.less" export default function BasicList() { return (
Row A
Row B
Row C
 ) } ``` ### Vue 3 ```bash pnpm add @better-scrollbar/vue @better-scrollbar/core ``` ```vue ``` ## Documentation - [React API Reference](packages/react/README.md) — full props, types, and ref API. - [Vue API Reference](packages/vue/README.md) — props, events, exposed methods, and composables. - [Core API Reference](packages/core/README.md) — algorithms, virtual height index, and shared types. - [Detailed API Reference](docs/virtual-scrollbar-api.md) — comprehensive props table with defaults. - [Optimization Practices](docs/virtual-list-optimization.md) — design decisions and industry references. - [Contributing](CONTRIBUTING.md) — development setup and pull request guidelines. - [Security Policy](SECURITY.md) — vulnerability reporting. - [Changelog](CHANGELOG.md) — release history. ## Monorepo Structure ``` better-scrollbar/ ├── packages/ │ ├── core/ # @better-scrollbar/core — algorithms, types, utilities │ ├── react/ # @better-scrollbar/react — React component & hooks │ └── vue/ # @better-scrollbar/vue — Vue 3 component & composables ├── apps/ │ └── site/ # Documentation site (React) ├── build/ # Compatibility package entry (re-exports @better-scrollbar/react) └── docs/ # Design docs and detailed API reference ``` ## Local Development This repository uses [pnpm](https://pnpm.io/) workspaces and [Turborepo](https://turbo.build/) for task orchestration. ```bash corepack enable pnpm install --frozen-lockfile ``` | Command | Description | | --------------------- | --------------------------------------- | | `pnpm run build` | Build all packages via Turborepo | | `pnpm run dev` | Start dev mode for all packages | | `pnpm run typecheck` | Type-check all packages | | `pnpm run lint` | Lint all source files with ESLint | | `pnpm run test` | Run tests with coverage | | `pnpm run clean` | Remove all build artifacts | | `pnpm run site:dev` | Start the documentation site dev server | | `pnpm run site:build` | Build the documentation site | ## Browser Support Any browser that supports [ResizeObserver](https://caniuse.com/resizeobserver) (Chrome 64+, Firefox 69+, Safari 13.1+, Edge 79+). A polyfill is included as a fallback for older environments. ## License [MIT](./LICENSE) --- _Source: https://npm.io/package/better-scrollbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._