# react-swipeable-views

> A React component for swipeable views

Latest version **0.14.2** (published 2026-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-swipeable-views
pnpm add react-swipeable-views
yarn add react-swipeable-views
bun add react-swipeable-views
```

## Health

**Score 58/100 (C)** — status: active.

Positive: has types package; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.14.2 |
| Published | 2026-06-22 |
| First published | 2015-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-swipeable-views) |
| Module format | CommonJS |
| Node | >=6.0.0 |
| Dependencies | 5 |
| Unpacked size | 59.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4468 |
| Author | Olivier Tassinari |
| Maintainers | oliviertassinari |
| Keywords | react, component, swipe, swipeable |

## Links

- npm: https://www.npmjs.com/package/react-swipeable-views
- Repository: https://github.com/oliviertassinari/react-swipeable-views
- Homepage: https://github.com/oliviertassinari/react-swipeable-views#readme
- Issues: https://github.com/oliviertassinari/react-swipeable-views/issues
- npm.io page: https://npm.io/package/react-swipeable-views

## Dependencies (5)

- [warning](https://npm.io/package/warning.md) ^4.0.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.4
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.0.0
- [react-swipeable-views-core](https://npm.io/package/react-swipeable-views-core.md) ^0.14.2
- [react-swipeable-views-utils](https://npm.io/package/react-swipeable-views-utils.md) ^0.14.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.14.2 (latest) — 2026-06-22
- 0.14.0-alpha.0 (alpha) — 2020-09-18
- 0.14.1 — 2025-09-20
- 0.14.0 — 2021-05-30
- 0.13.9 — 2020-02-10
- 0.13.8 — 2020-02-03
- 0.13.7 — 2020-02-01
- 0.13.6 — 2020-01-26
- 0.13.5-rc — 2020-01-22
- 0.13.5 — 2020-01-21
- 0.13.4 — 2020-01-15
- 0.13.4-rc.2 — 2020-01-10
- 0.13.4-rc.1 — 2020-01-10
- 0.13.4-rc.0 — 2020-01-09
- 0.13.3 — 2019-05-10
- … 89 more at https://npm.io/package/react-swipeable-views/versions

## README

# react-swipeable-views

> A React component for swipeable views.

| Package | Version | Download | Size (kB gzipped) |
|---------|:--------|:---------|:------------------|
| react-swipeable-views | [![npm version](https://img.shields.io/npm/v/react-swipeable-views.svg)](https://www.npmjs.com/package/react-swipeable-views) | [![npm downloads](https://img.shields.io/npm/dm/react-swipeable-views.svg)](https://www.npmjs.com/package/react-swipeable-views) | 5.08 |
| react-swipeable-views-utils | [![npm version](https://img.shields.io/npm/v/react-swipeable-views-utils.svg)](https://www.npmjs.com/package/react-swipeable-views-utils) | [![npm downloads](https://img.shields.io/npm/dm/react-swipeable-views-utils.svg)](https://www.npmjs.com/package/react-swipeable-views-utils) | 3.52 |
| react-swipeable-views-native | [![npm version](https://img.shields.io/npm/v/react-swipeable-views-native.svg)](https://www.npmjs.com/package/react-swipeable-views-native) | [![npm downloads](https://img.shields.io/npm/dm/react-swipeable-views-native.svg)](https://www.npmjs.com/package/react-swipeable-views-native) | ? |

[![Build Status](https://travis-ci.org/oliviertassinari/react-swipeable-views.svg?branch=master)](https://travis-ci.org/oliviertassinari/react-swipeable-views)
[![Dependencies](https://img.shields.io/david/oliviertassinari/react-swipeable-views.svg)](https://david-dm.org/oliviertassinari/react-swipeable-views)
[![DevDependencies](https://img.shields.io/david/dev/oliviertassinari/react-swipeable-views.svg)](https://david-dm.org/oliviertassinari/react-swipeable-views#info=devDependencies&view=list)
[![Donate](https://img.shields.io/badge/$-support-green.svg)](https://www.paypal.me/oliviertassinari/10)
[![TypeScript definitions on DefinitelyTyped](https://img.shields.io/badge/style-.d.ts-green.svg?style=flat&label=DefinitelyTyped)](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-swipeable-views)
[![Coverage Status](https://img.shields.io/codecov/c/github/oliviertassinari/react-swipeable-views/master.svg)](https://codecov.io/gh/oliviertassinari/react-swipeable-views/branch/master)

## Documentation
### Get started
- [Installation](https://react-swipeable-views.com/getting-started/installation/)
- [Usage](https://react-swipeable-views.com/getting-started/usage/)
- [Example projects](https://react-swipeable-views.com/getting-started/example-projects/)
- [Supported projects](https://react-swipeable-views.com/getting-started/example-projects/)
### Component API
- [Component API](https://react-swipeable-views.com/api/api/)
### More
- [Supported projects](https://react-swipeable-views.com/getting-started/example-projects/)
- [Demos](https://react-swipeable-views.com/demos/demos/)

## Installation

### Browser

```sh
npm install --save react-swipeable-views
```

### Native (experimental)

```sh
npm install --save react-swipeable-views-native
```

## The problem solved

Check out the [demos](https://react-swipeable-views.com/demos/demos/) from a mobile device (real or emulated).
It's tiny (<10 kB gzipped), it quickly renders the first slide, then lazy-loads the others.

## Simple example

![usage](/static/usage.gif)

### Browser

```jsx
import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      slide n°1
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      slide n°2
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      slide n°3
    </div>
  </SwipeableViews>
);

export default MyComponent;
```

### Native (experimental)

react-native support is experimental and I have no plan pushing it forward.
I start to think that lower level abstraction to share the implementation between the platforms are more appropriate.
We have two different implementations of the react-swipeable-views API.

```jsx
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import SwipeableViews from 'react-swipeable-views-native';
// There is another version using the scroll component instead of animated.
// I'm unsure which one give the best UX. Please give us some feedback.
// import SwipeableViews from 'react-swipeable-views-native/lib/SwipeableViews.scroll';

const styles = StyleSheet.create({
  slideContainer: {
    height: 100,
  },
  slide: {
    padding: 15,
    height: 100,
  },
  slide1: {
    backgroundColor: '#FEA900',
  },
  slide2: {
    backgroundColor: '#B3DC4A',
  },
  slide3: {
    backgroundColor: '#6AC0FF',
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

const MyComponent = () => (
  <SwipeableViews style={styles.slideContainer}>
    <View style={[styles.slide, styles.slide1]}>
      <Text style={styles.text}>
        slide n°1
      </Text>
    </View>
    <View style={[styles.slide, styles.slide2]}>
      <Text style={styles.text}>
        slide n°2
      </Text>
    </View>
    <View style={[styles.slide, styles.slide3]}>
      <Text style={styles.text}>
        slide n°3
      </Text>
    </View>
  </SwipeableViews>
);

export default MyComponent;
```

## Who's using react-swipeable-views?

- [Doctolib](https://github.com/doctolib)
- [mastodon](https://github.com/tootsuite/mastodon)
- [Material-UI](https://github.com/mui-org/material-ui)
- [Tinder](https://tinder.com)
- [Uber](https://www.uber.com)
- Are you using this library? Add your company or project.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/oliviertassinari/react-swipeable-views/blob/master/LICENSE).

---
_Source: https://npm.io/package/react-swipeable-views · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._