`), not globally. ## Usage Add the `wk-scrollbar` class to any element with overflow scrolling: ```blade

``` Works on any scrollable container — `overflow-auto`, `overflow-x-auto`, `overflow-y-auto`, or `overflow-scroll`. ### API Surface Scrollbar is a **CSS-only utility class**, not a Blade component — there are no props to pass, no PHP class, and no Blade tag. You apply `.wk-scrollbar` to any HTML element that scrolls. All customization happens via the CSS variables listed under "Design Tokens" below. | What you configure | How | | --- | --- | | Width / color / hover color | Design tokens (CSS variables) | | Which element gets styled | Add `class="wk-scrollbar"` to the element | | Orientation (horizontal / vertical) | Standard `overflow-x-*` / `overflow-y-*` Tailwind utilities | | Conditional styling | Combine with any other Tailwind class, responsive variants, etc. | ## Examples ### Vertical Scroll :::preview{title="Vertical scrollable container"}

Line 1 — scroll down to see more Line 2 — keyboard navigation works (PageDown, End) Line 3 — Firefox uses scrollbar-width: thin Line 4 — Chrome and Safari use ::-webkit-scrollbar Line 5 — thumb color: --color-wk-scrollbar-thumb Line 6 — track color: --color-wk-scrollbar-track Line 7 — hover color: --color-wk-scrollbar-thumb-hover Line 8 — width: --size-wk-scrollbar (6px default) Line 9 — fully themable via CSS variables Line 10 — auto-switches with .dark class on ancestor Line 11 — works on overflow-auto / scroll / x / y Line 12 — opt-in: add wk-scrollbar to any element Line 13 — never applied globally to body or html Line 14 — preserves OS accessibility affordances Line 15 — high-contrast modes still work as expected Line 16 — touch handles remain available on mobile Line 17 — combine with Tailwind responsive variants Line 18 — pair with overflow-y: auto + max-height Line 19 — perfect for sidebars, panels, chat history Line 20 — last line — congratulations, you scrolled!

::: ### Horizontal Scroll :::preview{title="Horizontal scrollable container"}

→ scroll horizontally: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

::: ### Textarea ```blade Long content that overflows vertically... ``` ## How It Works The class provides cross-browser scrollbar styling: | Browser | Mechanism | Support | | --- | --- | --- | | **Firefox** | `scrollbar-width: thin` + `scrollbar-color` | Native thin scrollbar API | | **Chrome / Edge** | `::-webkit-scrollbar` pseudo-elements | Full width, color, radius control | | **Safari** | `::-webkit-scrollbar` pseudo-elements | Full width, color, radius control | ## Without the Class The `.wk-scrollbar` class is opt-in. Elements without it use the browser's default scrollbar. WireKit does **not** override scrollbars globally — you choose where to apply the styling. ::: tip The WireKit docs site applies scrollbar styling globally to all scrollable elements. If you want the same behavior in your own app, apply `.wk-scrollbar` to your `` or main container — or use the CSS variables directly in your own scrollbar styles. ::: ## Accessibility - Custom scrollbars do not alter keyboard behavior — `Tab` focuses the scrollable element if it is keyboard-focusable, and the browser handles Arrow, PageUp/Down, Home/End, Space scrolling natively - No ARIA attributes are added — scrollbars are browser chrome; announcing them via ARIA would be redundant - When a scrollable region contains **important content that is off-screen on load**, wrap it in a landmark so screen readers can locate it: `

…

` - Firefox's `scrollbar-width: thin` respects OS-level "always show scrollbars" accessibility settings — this component does not force-hide scrollbars - WCAG 2.1 requires that content remain operable at 200% zoom ([WCAG 1.4.10: Reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html)) — avoid capping `max-height` on containers that users need to scroll through on zoomed viewports ## Keyboard Interaction This component is purely presentational and does not respond to keyboard input. ## Design Tokens All scrollbar properties are customizable via CSS variables: | Variable | Light Default | Dark Default | Description | | --- | --- | --- | --- | | `--color-wk-scrollbar-thumb` | neutral-300 | neutral-600 | Thumb (draggable part) color | | `--color-wk-scrollbar-thumb-hover` | neutral-400 | neutral-500 | Thumb color on hover | | `--color-wk-scrollbar-track` | transparent | transparent | Track (background) color | | `--size-wk-scrollbar` | 6px | 6px | Width and height of the scrollbar | ## Customization Override the tokens in your `app.css` to match your brand: ```css @layer base { :root { /* Wider scrollbar with visible track */ --size-wk-scrollbar: 8px; --color-wk-scrollbar-track: var(--color-wk-bg-subtle); /* Accent-colored thumb */ --color-wk-scrollbar-thumb: var(--color-wk-accent); --color-wk-scrollbar-thumb-hover: var(--color-wk-accent-hover); } } ```