Gallery

Design a scrollbar component for a desktop-style interface. Include both vertical and horizontal versions, since the same pattern should work in lists, tables, and canvases.

Show the full interaction set: default, hover, active drag, and disabled. Make the thumb readable at a glance, with a hit area large enough to grab even when the visual thumb is slim.

Decide whether the scrollbar is always visible, auto-hides, or expands on hover, then apply that behavior consistently. If you include arrow buttons, show when they appear and how they behave; if you omit them, the track and thumb still need to feel complete.

The result should make scrolling obvious without stealing attention from content. It should work on light and dark surfaces, and the state changes should be clear without relying on color alone.