Scroll Strip

Scroll Strip — a CSS-first, fully-tokened Scroll Strip component from SilicaUI. Accessible by default via Base UI, themeable with color × variant × size × shape props, and available in React, framework-neutral HTML, and a zero-dependency vanilla runtime. No runtime CSS-in-JS, no safelist.

Real use · a tab strip in a pane you can drag narrow

Overview

Drag it narrow: the pair of controls appears the moment a tab falls off the edge, and each one disables at its end rather than disappearing — so the strip never jumps sideways.

Edge fade — a second, quieter signal

AllOpenPending reviewBlockedScheduledArchivedDraft

The controls say the strip can scroll; the fade says the content continues right there. It clears itself at each end, so a strip that fits is never dimmed.

Control sizes

xs
AllOpenPending reviewBlockedScheduledArchivedDraft
sm
AllOpenPending reviewBlockedScheduledArchivedDraft
md
AllOpenPending reviewBlockedScheduledArchivedDraft
lg
AllOpenPending reviewBlockedScheduledArchivedDraft
xl
AllOpenPending reviewBlockedScheduledArchivedDraft

Content that fits — no controls at all

OneTwoThree

Right-to-left

AllOpenPending reviewBlockedScheduledArchivedDraft