Draggable Card
Card component that can be physically dragged around the viewport with spring physics.
Preview
Draggable Card
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Interactive demos and playful onboarding experiences.
Why this component matters
Draggability creates a tactile, memorable interaction that breaks the typical scroll pattern.
Usage guidance
Use sparingly for one or two highlighted elements. The drag should feel like it has purpose (e.g., drag to dismiss, drag to reorder).
Installation
bash
npx shadcn@latest add @aceternity/draggable-cardUsage
example.tsxtsx
import { DraggableCard } from "@/components/ui/draggable-card";
export default function Example() {
return (
<DraggableCard>
{/* Your content here */}
</DraggableCard>
);
}Source
draggable-card.tsx
components/ui/draggable-card.tsx