Draggable Card
A tiltable, draggable card component that jumps on bounds.
If its your first day at Fight Club, you have to fight.
Tyler Durden
The Narrator
Iceland
Japan
Norway
New Zealand
Canada
Installation
Run the following command
npx shadcn@latest add @aceternity/draggable-cardExamples
Polaroid collection
If its your first day at Fight Club, you have to fight.
Tyler Durden
The Narrator
Iceland
Japan
Norway
New Zealand
Canada
Grid
How
You
Doin
Single card
Switzerland
Props
DraggableCardBody Props
| Prop | Type | Description | Default |
|---|---|---|---|
className | string? | Additional CSS classes to apply to the card body | undefined |
children | React.ReactNode? | Content to render inside the card | undefined |
DraggableCardContainer Props
| Prop | Type | Description | Default |
|---|---|---|---|
className | string? | Additional CSS classes to apply to the container | undefined |
children | React.ReactNode? | Content to render inside the container | undefined |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
