Swipe Row

A swipe row for providing actions of swipe of left and right

Liam Patel

Swipe to see actions

import { Heart, Trash } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  SwipeLeftActions,
  SwipeRightActions,
  SwipeRow,
  SwipeRowContent,
} from "@/components/molecule-ui/swipe-row"

export function SwipeRowDemo() {
  return (
    <div className="w-full md:w-2/3">
      <SwipeRow className="bg-muted rounded-md">
        <SwipeLeftActions>
          <LeftActions />
        </SwipeLeftActions>
        <SwipeRowContent>
          <div className="flex items-center gap-4">
            <div>
              <Avatar>
                <AvatarImage
                  src="https://avatars.githubusercontent.com/u/1?v=4"
                  alt="MUI"
                />
                <AvatarFallback>LM</AvatarFallback>
              </Avatar>
            </div>
            <div>
              <h3>Liam Patel</h3>
              <p className="text-muted-foreground text-sm">
                Swipe to see actions
              </p>
            </div>
          </div>
        </SwipeRowContent>
        <SwipeRightActions>
          <RightActions />
        </SwipeRightActions>
      </SwipeRow>
    </div>
  )
}

function LeftActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-blue-500 px-6 text-white transition-colors">
        <Heart size={20} />
      </button>{" "}
    </>
  )
}

function RightActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-red-500 px-6 text-white transition-colors">
        <Trash size={20} />
      </button>
    </>
  )
}

Installation


pnpm dlx shadcn@latest add "https://moleculeui.design/r/swipe-row"

Usage

import { 
  SwipeRow, 
  SwipeLeftActions, 
  SwipeRightActions, 
  SwipeRowContent 
  } from "@/components/molecule-ui/swipe-row"

<SwipeRow>
  <SwipeLeftActions />
  <SwipeRowContent />
  <SwipeRightActions />
<SwipeRow>

Examples

Swipe row with left swipe actions

MUI

Molecule UI

Swipe to see actions

import { Heart, Trash } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  SwipeLeftActions,
  SwipeRow,
  SwipeRowContent,
} from "@/components/molecule-ui/swipe-row"

export function SwipeRowLeftDemo() {
  return (
    <div className="w-full md:w-2/3">
      <SwipeRow className="bg-muted rounded-md">
        <SwipeLeftActions>
          <LeftActions />
        </SwipeLeftActions>
        <SwipeRowContent>
          <div className="flex items-center gap-4">
            <div>
              <Avatar>
                <AvatarImage
                  src="https://avatars.githubusercontent.com/u/1?v=4"
                  alt="MUI"
                />
                <AvatarFallback>MUI</AvatarFallback>
              </Avatar>
            </div>
            <div>
              <h3>Molecule UI</h3>
              <p className="text-muted-foreground text-sm">
                Swipe to see actions
              </p>
            </div>
          </div>
        </SwipeRowContent>
      </SwipeRow>
    </div>
  )
}

function LeftActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-red-500 px-6 text-white transition-colors">
        <Trash size={20} />
      </button>
      <button className="flex h-full items-center justify-center bg-blue-500 px-6 text-white transition-colors">
        <Heart size={20} />
      </button>{" "}
    </>
  )
}

Swipe row with right swipe actions

MUI

Molecule UI

Swipe to see actions

import { Heart, Trash } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  SwipeRightActions,
  SwipeRow,
  SwipeRowContent,
} from "@/components/molecule-ui/swipe-row"

export function SwipeRowRightDemo() {
  return (
    <div className="w-full md:w-2/3">
      <SwipeRow className="bg-muted rounded-md">
        <SwipeRowContent>
          <div className="flex items-center gap-4">
            <div>
              <Avatar>
                <AvatarImage
                  src="https://avatars.githubusercontent.com/u/1?v=4"
                  alt="MUI"
                />
                <AvatarFallback>MUI</AvatarFallback>
              </Avatar>
            </div>
            <div>
              <h3>Molecule UI</h3>
              <p className="text-muted-foreground text-sm">
                Swipe to see actions
              </p>
            </div>
          </div>
        </SwipeRowContent>
        <SwipeRightActions>
          <RightActions />
        </SwipeRightActions>
      </SwipeRow>
    </div>
  )
}

function RightActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-blue-500 px-6 text-white transition-colors">
        <Heart size={20} />
      </button>{" "}
      <button className="flex h-full items-center justify-center bg-red-500 px-6 text-white transition-colors">
        <Trash size={20} />
      </button>
    </>
  )
}

Swipe row list

Ava Mitchell

Swipe to see actions

Liam Patel

Swipe to see actions

Sophia Nguyen

Swipe to see actions

import { Heart, Trash } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  SwipeLeftActions,
  SwipeRightActions,
  SwipeRow,
  SwipeRowContent,
} from "@/components/molecule-ui/swipe-row"

const dummyListData = [
  {
    id: 1,
    name: "Ava Mitchell",
    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
    fallback: "AM",
  },
  {
    id: 2,
    name: "Liam Patel",
    avatar: "https://randomuser.me/api/portraits/men/22.jpg",
    fallback: "LP",
  },
  {
    id: 3,
    name: "Sophia Nguyen",
    avatar: "https://randomuser.me/api/portraits/women/68.jpg",
    fallback: "SN",
  },
]

export function SwipeRowListDemo() {
  return (
    <div className="divide-input bg-muted w-full divide-y overflow-hidden rounded-md md:w-2/3">
      {dummyListData.map((item) => (
        <SwipeRow key={item.id}>
          <SwipeLeftActions>
            <LeftActions />
          </SwipeLeftActions>
          <SwipeRowContent>
            <div className="flex items-center gap-4">
              <div>
                <Avatar>
                  <AvatarImage src={item.avatar} alt={item.fallback} />
                  <AvatarFallback>{item.fallback}</AvatarFallback>
                </Avatar>
              </div>
              <div>
                <h3>{item.name}</h3>
                <p className="text-muted-foreground text-sm">
                  Swipe to see actions
                </p>
              </div>
            </div>
          </SwipeRowContent>
          <SwipeRightActions>
            <RightActions />
          </SwipeRightActions>
        </SwipeRow>
      ))}
    </div>
  )
}

function LeftActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-blue-500 px-6 text-white transition-colors">
        <Heart size={20} />
      </button>{" "}
    </>
  )
}

function RightActions() {
  return (
    <>
      <button className="flex h-full items-center justify-center bg-red-500 px-6 text-white transition-colors">
        <Trash size={20} />
      </button>
    </>
  )
}

Profile Menu Voice Input

On This Page

Installation Examples Swipe row with left swipe actions Swipe row with right swipe actions Swipe row list