Scroll Area

Recipe CSS

This is the exact CSS your kit ships for Scroll Area — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Scroll area =========================================================
 * An overflow container with a slim, token-tinted scrollbar (the browser default
 * is heavy + off-palette). Thumb sits on a surface-coloured ring so it reads on
 * any plane; track stays invisible. Set a max-height/height on the element. */
.scroll-area { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--k-border) transparent; }
.scroll-area::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--k-border); border-radius: 999px; border: 2px solid var(--k-surface); }
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--k-fg-faint); }