Swipe actions

Reveal row actions with a swipe, or from the same actions in a menu.

npx shadcn@latest add @silicon-ui/swipe-actions
swipegesturelist
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/swipe-actions

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-dropdown-menu lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/swipe-actions/swipe-actions.tsx
    • components/silicon-ui/swipe-actions/swipe-actions.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { SwipeActions } from "@/components/silicon-ui/swipe-actions/swipe-actions";

API reference

SwipeActions

PropTypeDefault
label*string—
children*ReactNode—
classNamestring—

SwipeActionsRow

PropTypeDefault
label*

Names the row in its menu button, for example the message subject.

string—
children*ReactNode—
leadingSwipeAction[][]
trailingSwipeAction[][]
fullSwipe

Lets a long swipe commit the outermost action without a tap. On by default.

booleantrue
classNamestring—

Dependencies

npm
@radix-ui/react-dropdown-menulucide-reactmotion
Registry
silicon-motion-tokens