# @videodock/tile-slider

> Performant and accessible React slider with virtualization.

Latest version **2.3.11** (published 2026-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @videodock/tile-slider
pnpm add @videodock/tile-slider
yarn add @videodock/tile-slider
bun add @videodock/tile-slider
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.3.11 |
| Published | 2026-09-24 |
| First published | 2021-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 236.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Maintainers | christiaan, baukefreiburg |

## Links

- npm: https://www.npmjs.com/package/@videodock/tile-slider
- Repository: https://github.com/Videodock/tile-slider
- Homepage: https://github.com/Videodock/tile-slider#readme
- Issues: https://github.com/Videodock/tile-slider/issues
- npm.io page: https://npm.io/package/@videodock/tile-slider

## Recent versions

- 2.3.11 (latest) — 2026-09-24
- 0.4.1 (v0.4.1) — 2022-11-28
- 0.3.0 (v0.3.0) — 2022-02-14
- 0.2.0 (v0.2.0) — 2022-01-13
- 2.3.9 — 2026-06-29
- 2.3.8 — 2026-03-18
- 2.3.6 — 2025-12-09
- 2.3.5 — 2025-12-09
- 2.3.4 — 2025-12-08
- 2.3.2 — 2025-07-07
- 2.3.0 — 2024-12-09
- 2.2.0 — 2024-11-06
- 2.1.1 — 2024-11-04
- 2.1.0 — 2024-11-04
- 2.0.1 — 2024-09-20
- … 15 more at https://npm.io/package/@videodock/tile-slider/versions

## README

# Tile Slider

Performant and accessible React slider with virtualization.

<img src="img/tile-slider.png" alt="TileSlider component on a dark background">

## Introduction

`@videodock/tile-slider` is a React component of a performant and accessible slider written in React.
It only renders the visible tiles, meaning that you can have thousands of items and still get a good performance.

TileSlider is fully written using React and doesn't have dependencies.

## Documentation

Visit the [documentation](https://videodock.github.io/tile-slider/) with examples

Using v1, see the [v1 branch](https://github.com/Videodock/tile-slider/tree/v1).

## Features

- Virtualized rendering
- Custom pagination
- Custom controls
- Custom slide transition
- Fully responsive using CSS
- Accessible
- First-class TypeScript support

## Requirements

- react >= 17
- react-dom >= 17

## Installation

Install this package via (P)NPM or Yarn:

```shell
$ yarn add @videodock/tile-slider
$ npm install @videodock/tile-slider
$ pnpm install @videodock/tile-slider
```

## Example usage

> Important: .css file import requirement (version 1.0.1 and above)
> Starting from version `1.0.1`, it's crucial to include the `.css` import explicitly, as demonstrated in the example
> below:

```tsx
import { TileSlider, CYCLE_MODE_RESTART } from '@videodock/tile-slider';
import '@videodock/tile-slider/lib/style.css';

type Data = { title: string; imageUrl: string };

const items: Data[] = Array.from({ length: 1000 }).map((_, index) => ({
  title: `Item #${index + 1}`,
  imageUrl: 'https://via.placeholder.com/350x150',
}));

const App: React.FC = () => {
  return (
    <TileSlider<Data>
      items={items}
      tilesToShow={6}
      spacing={8}
      cycleMode={CYCLE_MODE_RESTART}
      renderLeftControl={({ onClick, disabled }) => (
        <button onClick={onClick} disabled={disabled}>
          Slide left
        </button>
      )}
      renderRightControl={({ onClick, disabled }) => (
        <button onClick={onClick} disabled={disabled}>
          Slide right
        </button>
      )}
      renderTile={({ item, isVisible }) => {
        // you can do further performance optimizations for tiles that are not visible.
        return () => (
          <div style={{ width: 350, height: 120, backgroundImage: `url(${item.imageUrl})` }}>
            <p>{item.title}</p>
          </div>
        );
      }}
    />
  );
};

export default App;
```

## Release

To create a release, perform the following steps:

Create a new version using `pnpm version`. Follow [semver](https://semver.org/) rules to determine the next version.

When the script completes, a page is automatically opened to create a new GitHub release with all information filled in.

Before creating the GitHub release, the commit and tag must be pushed to GitHub. After doing so, refresh the new
release page so it detects the existing tag. After creating the GitHub release, the version is automatically published
to NPM.

```shell
$ pnpm version
```

## Documentation

Run the documentation app, which showcases all features of the TileSlider package:

```shell
cd docs
pnpm install
pnpm start
```

You can use the `--host 0.0.0.0` argument to make the dev server available on your local network:

```shell
pnpm start --host 0.0.0.0
```

---
_Source: https://npm.io/package/@videodock/tile-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._