SnapScroller

Overview

SnapScroller styling is mostly structural: scroll container layout, snap behavior, and hidden scrollbar treatment. SnapScrollerContent adds snap alignment and shrink behavior.

Public CSS Variables

There are no component-local CSS variables in the current implementation.

Part-Level Variables

Root

The root uses flex layout, scroll-snap-type: x mandatory, smooth scrolling, and hidden scrollbars.

Content

Each content item uses scroll-snap-align: start, scroll-snap-stop: always, and flex-shrink: 0.

State And Variant Interaction

• There are no built-in visual variants.
• Layout behavior depends on container width, gap, and each content item’s width.

Examples

Peek at the next card

Cards are narrower than the viewport so the next one peeks in. paddingInline on the scroller insets the row, and the matching scrollPaddingInline keeps snapping aligned to that inset; the snap hook reads scroll padding, so the committed index stays correct.

import { Heading, SnapScroller, SnapScrollerContent, Text } from '@vega-ui/react';
import type { CSSProperties } from 'react';

const articles = [
  { title: 'Migrating to v3', minutes: 6 },
  { title: 'Theming with tokens', minutes: 4 },
  { title: 'Building a date range form', minutes: 9 },
  { title: 'Testing overlays in the browser', minutes: 7 },
];

const cardStyle: CSSProperties = {
  display: 'grid',

Do Not Override

• changing snap alignment casually without revalidating navigation behavior
• relying on unstable item widths if precise snapping is required