Slider

Page through a row of items with arrows, dots, horizontal scroll, or swipe gestures.

Slider is a client component that lays its children out in a horizontal track and animates between pages with a motion spring. Use it for plan cards, testimonials and other short rows of items. Controls render below the track. It reads theme tokens and should render inside DesignSystemProvider.

Starter

Team

Business

Enterprise

Custom

Nonprofit

Import#

typescript

import { Slider } from "@reactberry/system/blocks";

Usage#

typescript

import { Slider } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

const plans = ["Starter", "Team", "Business", "Enterprise"];

export default function PlanSlider() {
  return (
    <Slider
      config={{ slidesToShow: 1, spacing: 8 }}
      responsiveConfig={[
        { breakpoint: 1024, settings: { slidesToShow: 3 } },
        { breakpoint: 640, settings: { slidesToShow: 2 } },
      ]}
    >
      {plans.map((plan) => (
        <Box key={plan} p="l" skin="surface" shape="rounded">
          <Text>{plan}</Text>
        </Box>
      ))}
    </Slider>
  );
}

Examples#

Arrows only#

Set dots: false to hide the page dots and keep the arrow controls.

“Setup took an afternoon.”Priya, Ops lead

“Our releases are calmer now.”Marco, CTO

“Support answers within the hour.”Lena, Founder

Responsive slides#

responsiveConfig merges settings when the window is wider than a breakpoint. List entries from largest to smallest breakpoint. Resize the window to see it change.

Release notes

Migration guide

Theming

Accessibility

Performance

Roadmap

API#

Slider#

Prop	Type	Default	Description
`config`	`SliderConfig`	—	Settings merged over the defaults. See `SliderConfig`.
`responsiveConfig`	`ResponsiveConfig[]`	`[]`	Breakpoint overrides, each `{ breakpoint: number; settings: SliderConfig }`.
`children*`	`ReactNode[]`	—	Slides. Must be an array; each element is wrapped in its own slide container.

No other props are accepted and nothing is spread.

SliderConfig#

Fields of config and of each responsiveConfig entry's settings:

Prop	Type	Default	Description
`slidesToShow`	`number`	`1`	Slides visible per page. Page count is `Math.ceil(children.length / slidesToShow)`.
`dots`	`boolean`	`true`	Shows one dot per page; clicking a dot jumps to that page.
`arrows`	`boolean`	`true`	Shows previous and next arrow controls.
`spacing`	`number`	`0`	Horizontal padding in pixels applied to each side of every slide.
`paddingX`	`number`	`0`	Horizontal padding in pixels on the root.
`paddingY`	`number`	`0`	Vertical padding in pixels on the root.
`maxItemWidth`	`number`	`300`	Maximum slide width in pixels, applied only when there are fewer children than `slidesToShow`.
`infinite`	`boolean`	`false`	Keeps both arrows enabled at all times. Navigation still stops at the first and last page.
`slidesToScroll`	`number`	`1`	Declared but not used; paging always moves by `slidesToShow` slides.

Accessibility#

Arrow controls and dots are div elements without a button role, accessible label, or keyboard focus.

Notes#

Controls render only when there is more than one page.
Navigation: arrow controls, dots, horizontal wheel or trackpad scroll (one page per gesture), and dragging. A drag changes page when it travels more than 50px with a velocity above 500.
responsiveConfig is evaluated on mount and on every window resize. The first entry whose breakpoint is less than window.innerWidth is merged into the current settings. Matched settings persist; they are not reverted when the viewport shrinks below every breakpoint.
The page transition is a spring (visualDuration 0.3, bounce 0.2). No reduced-motion check is performed.
The SliderConfig and ResponsiveConfig types and the internal SliderControls component are not exported from @reactberry/system/blocks.