Scrollbar
Token-driven native scrollbar styling. Not a component: a CSS utility class plus an app-wide provider option.
Load the Kikita stylesheet once. Scrollbar has no directive or component to import.
import '@kikita-labs/ui/styles/kikita-ui.css';Apply the kui-scroll class to the element that actually scrolls for local, per-container opt-in styling.
First paragraph of scrollable content.
Second paragraph of scrollable content.
Third paragraph of scrollable content.
Fourth paragraph of scrollable content.
Fifth paragraph of scrollable content.
<div class="kui-scroll local-scroll-container-example__region" tabindex="0">
<p>First paragraph of scrollable content.</p>
<p>Second paragraph of scrollable content.</p>
<p>Third paragraph of scrollable content.</p>
<p>Fourth paragraph of scrollable content.</p>
<p>Fifth paragraph of scrollable content.</p>
</div>Set scrollbars: 'styled' once in app config to style native scrollbars across application-owned scroll containers. Defaults to 'native'. Kikita-owned overlays (dropdown, dialog, drawer, command palette) already use Kikita scrollbar tokens regardless of this setting.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [provideKikitaUi({ scrollbars: 'styled' })],
};CSS custom properties and provider option verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| .kui-scroll | CSS class | — | Local opt-in for Kikita scrollbar token styling. Apply to the element that actually scrolls (the one with overflow: auto/scroll set), not a non-scrolling wrapper. |
| provideKikitaUi({ scrollbars }) | KuiScrollbarMode = 'native' | 'styled' | 'native' | App-wide scrollbar mode for application-owned scroll containers. Sets data-kui-scrollbars on the document root. Kikita-owned internal scroll areas (dropdown, dialog body, drawer body, command palette list) use Kikita scrollbar tokens automatically regardless of this option. |
| --kui-scrollbar-size | CSS custom property | — | Scrollbar thickness. |
| --kui-scrollbar-radius | CSS custom property | — | Corner radius of the scrollbar thumb. |
| --kui-scrollbar-track | CSS custom property | — | Scrollbar track background color. |
| --kui-scrollbar-thumb-min | CSS custom property | — | Minimum thumb length so short thumbs stay grabbable. |
| --kui-scrollbar-thumb-inset | CSS custom property | — | Inset spacing between the thumb and the track edge. |
| --kui-color-scrollbar-thumb | CSS custom property | — | Thumb color in the resting state. |
| --kui-color-scrollbar-thumb-hover | CSS custom property | — | Thumb color on hover. |
| --kui-color-scrollbar-thumb-active | CSS custom property | — | Thumb color while being dragged. |
Scrollbar only restyles native browser scrolling; it does not change scroll behavior or semantics.