A lightweight, unstyled, and fully accessible swipe-to-action button for React. Built with zero dependencies.
npm install swipe-button


A lightweight, unstyled, and fully accessible swipe-to-action button for modern React applications. Built from scratch with zero dependencies.
---
https://github.com/user-attachments/assets/5ee1e676-4061-4e67-b976-c0178d6ce3af
This component was built to provide a flexible and robust foundation for any "swipe-to-action" feature. Unlike other libraries, it ships with zero styles, giving you complete control over the look and feel. It's perfect for design systems, custom UIs, and scenarios where you don't want to fight with pre-existing CSS.
* ✅ Zero Dependencies: Incredibly lightweight with no other packages to manage.
* 🎨 Completely Unstyled: Bring your own styles. Works perfectly with standard CSS, CSS Modules, CSS-in-JS (like Styled Components), or utility-class frameworks (like Tailwind CSS).
* 📱 Modern & Smooth: Built with React hooks for a fluid, touch-friendly experience on any device.
* 🎛️ Highly Customizable: Control text, icons, colors, swipe direction, and trigger sensitivity through a simple prop API.
* ♿️ Accessibility in Mind: Designed with aria attributes for screen reader support.
Choose your favorite package manager:
``bashPNPM
pnpm add swipe-button
Basic Usage
The component works out-of-the-box with a beautiful default dark theme. Simply compose the parts you need inside the
SwipeButton.Root.`jsx
import React from 'react';
import { SwipeButton } from 'swipe-button';
import { ChevronRight } from 'lucide-react'; // Example using a popular icon libraryconst App = () => {
const handleSuccess = () => {
console.log('Action Confirmed!');
};
return (
Swipe to Confirm
Confirmed!
);
};export default App;
`API Reference (Props)
$3
This is the main container that manages the state and logic. It accepts the following props:
| Prop | Type | Default | Description |
| -------------- | ------------ | ---------- | ---------------------------------------------------------------------- |
|
onSuccess | () => void | _Required_ | Callback function triggered on a successful swipe. |
| onFail | () => void | undefined| Optional callback triggered when a swipe fails to meet the threshold. |
| disabled | boolean | false | If true, the button is inactive and visually disabled. |
| reverseSwipe | boolean | false | If true, the swipe direction is from right to left. |
| delta | number | undefined| The pixel distance to trigger success. Defaults to the full width. |It also accepts all standard
div props like className and style.$3
The following components are used to build the UI and accept all standard
div props (className, style, children, etc.).*
: The background track.
* : The colored layer that is revealed on swipe.
* : The draggable handle.Customization
The power of this component comes from its lack of styling. Here's how you can customize it.
$3
The easiest way to theme the component is by overriding the default CSS custom properties.
`css
/ Your custom stylesheet, e.g., App.css /
.light-theme {
--sw-background: 0 0% 98%;
--sw-foreground: 240 10% 3.9%;
--sw-muted-foreground: 240 3.8% 46.1%;
--sw-border: 240 5.9% 90%;
--sw-slider: 240 10% 3.9%;
--sw-success: 221.2 83.2% 53.3%;
}
``jsx
// In your component
import './App.css';
{/ ... child components ... /}
`$3
Here are all the variables you can override:
`css
/ Color Palette (HSL format) /
--sw-background: 240 10% 3.9%;
--sw-foreground: 0 0% 98%;
--sw-muted-foreground: 240 5% 64.9%;
--sw-border: 240 3.7% 15.9%;
--sw-slider: 240 5.9% 90%;
--sw-success: 142.1 76.2% 36.3%;/ Structural Properties /
--sw-height: 48px;
--sw-slider-width: 40px;
--sw-border-radius: 9999px;
--sw-font-size: 14px;
--sw-transition-duration: 150ms;
`$3
The compound API works perfectly with CSS-in-JS libraries.
`jsx
import styled from 'styled-components';
import { SwipeButton } from 'swipe-button';const StyledSlider = styled(SwipeButton.Slider)
;const StyledRoot = styled(SwipeButton.Root)
;// Later in your app...
Swipe with Style
Done!
``Contributions are welcome! If you have a feature request, bug report, or want to improve the code, please feel free to open an issue or submit a pull request.
Please read our CONTRIBUTING.md guide for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.