About
A horizontally (or vertically) scrollable container that lets users pan content by dragging with the mouse on desktop while still supporting native touch scroll on mobile, useful for chip rows, card carousels, and galleries.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Drag Scroll to your project and fits it to your theme.
Code
How Drag Scroll is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { DragScroll } from "@/components/ui/drag-scroll";
import { Badge } from "@/components/ui/badge";
const chips = [
"همه",
"فرمها",
"داشبورد",
"پرداخت",
"احراز هویت",
"نمودار",
"تقویم",
"جداول",
"اعلانها",
"تنظیمات",
];
export default function DragScrollDemo() {
return (
<div className="w-full max-w-md space-y-2 p-4" dir="rtl" lang="fa">
<p className="text-muted-foreground text-xs">
روی دسکتاپ بکشید؛ روی موبایل با لمس اسکرول کنید.
</p>
<DragScroll className="rounded-lg border bg-muted/30 p-3">
<div className="flex w-max gap-2 pe-1">
{chips.map((chip) => (
<Badge
key={chip}
variant="outline"
className="shrink-0 cursor-pointer px-3 py-1.5 text-sm"
>
{chip}
</Badge>
))}
</div>
</DragScroll>
</div>
);
}
Dependencies
More by miladjoodi
View all
Image Diff Slider
1
Card
Context Menu