Proper UI

Scroll area components

Free and open-source React scroll area components with token-styled scrollbars, fade edges and native, accessible scrolling. Styled with Tailwind CSS.

Scroll area example

BoltStackBlitzv0

Releases

  • v1.40.0
  • v1.39.0
  • v1.38.0
  • v1.37.0
  • v1.36.0
  • v1.35.0
  • v1.34.0
  • v1.33.0
  • v1.32.0
  • v1.31.0
  • v1.30.0
  • v1.29.0
  • v1.28.0
  • v1.27.0
  • v1.26.0
  • v1.25.0
  • v1.24.0
  • v1.23.0
  • v1.22.0
  • v1.21.0
  • v1.20.0
  • v1.19.0
  • v1.18.0
  • v1.17.0
  • v1.16.0
  • v1.15.0
  • v1.14.0
  • v1.13.0
  • v1.12.0
  • v1.11.0
  • v1.10.0
  • v1.9.0
  • v1.8.0
  • v1.7.0
  • v1.6.0
  • v1.5.0
  • v1.4.0
  • v1.3.0
  • v1.2.0
  • v1.1.0

Installation

npx properui@latest add scroll-area

Horizontal

Horizontal

BoltStackBlitzv0
  • Olivia Rhye
  • Phoenix Baker
  • Lana Steiner
  • Demi Wilkinson
  • Candice Wu
  • Natali Craig
  • Drew Cano
  • Orlando Diggs
  • Andi Lane
  • Kate Morrison
  • Koray Okumus
  • Ava Wright

Both axes

Both axes

BoltStackBlitzv0
InvoiceCustomerStatusIssuedDueAmountTaxTotalCurrencyOwner
INV-0001Customer 1Status 1Issued 1Due 1Amount 1Tax 1Total 1Currency 1Owner 1
INV-0002Customer 2Status 2Issued 2Due 2Amount 2Tax 2Total 2Currency 2Owner 2
INV-0003Customer 3Status 3Issued 3Due 3Amount 3Tax 3Total 3Currency 3Owner 3
INV-0004Customer 4Status 4Issued 4Due 4Amount 4Tax 4Total 4Currency 4Owner 4
INV-0005Customer 5Status 5Issued 5Due 5Amount 5Tax 5Total 5Currency 5Owner 5
INV-0006Customer 6Status 6Issued 6Due 6Amount 6Tax 6Total 6Currency 6Owner 6
INV-0007Customer 7Status 7Issued 7Due 7Amount 7Tax 7Total 7Currency 7Owner 7
INV-0008Customer 8Status 8Issued 8Due 8Amount 8Tax 8Total 8Currency 8Owner 8
INV-0009Customer 9Status 9Issued 9Due 9Amount 9Tax 9Total 9Currency 9Owner 9
INV-0010Customer 10Status 10Issued 10Due 10Amount 10Tax 10Total 10Currency 10Owner 10
INV-0011Customer 11Status 11Issued 11Due 11Amount 11Tax 11Total 11Currency 11Owner 11
INV-0012Customer 12Status 12Issued 12Due 12Amount 12Tax 12Total 12Currency 12Owner 12
INV-0013Customer 13Status 13Issued 13Due 13Amount 13Tax 13Total 13Currency 13Owner 13
INV-0014Customer 14Status 14Issued 14Due 14Amount 14Tax 14Total 14Currency 14Owner 14
INV-0015Customer 15Status 15Issued 15Due 15Amount 15Tax 15Total 15Currency 15Owner 15
INV-0016Customer 16Status 16Issued 16Due 16Amount 16Tax 16Total 16Currency 16Owner 16

Fade edges

Fade edges

BoltStackBlitzv0

Proper UI components are copied into your project, so you own every line and can change anything.

Every interactive component is built on React Aria, which handles keyboard navigation, focus management and screen reader announcements.

Styles use semantic tokens only. Switching the theme repoints the tokens, so a component written once is correct in light and dark mode.

Directional spacing uses logical properties, which means right-to-left layouts work without a separate stylesheet.

The scroll area keeps native scrolling: wheel, touch, keyboard and find-in-page all behave exactly as they do on any other element.

Its scrollbars are decoration on top of that. They are hidden from assistive technology, because the viewport already exposes everything they do.

Usage notes

The viewport is a normal scrolling element: wheel, touch, keyboard and find-in-page all work, and it is focusable (tabIndex={0}) and exposed as a labelled region, so pass aria-label or aria-labelledby. The custom scrollbars are drawn on top and hidden from assistive technology. type="hover" shows them while the pointer is over the area or it is scrolling, type="auto" whenever the content overflows, and type="always" all the time.