Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Draggable Card

A tiltable, draggable card component that jumps on bounds.

Open in

If its your first day at Fight Club, you have to fight.

Tyler Durden

Tyler Durden

The Narrator

The Narrator

Iceland

Iceland

Japan

Japan

Norway

Norway

New Zealand

New Zealand

Canada

Canada

Installation

Run the following command

npx shadcn@latest add https://ui.aceternity.com/registry/draggable-card.json

Examples

Polaroid collection

Open in

If its your first day at Fight Club, you have to fight.

Tyler Durden

Tyler Durden

The Narrator

The Narrator

Iceland

Iceland

Japan

Japan

Norway

Norway

New Zealand

New Zealand

Canada

Canada

Grid

Open in
Some mountains

How

Some mountains

You

Some mountains

Doin

Single card

Open in
Some mountains

Switzerland

Props

DraggableCardBody Props

PropTypeDescriptionDefault
classNamestring?Additional CSS classes to apply to the card bodyundefined
childrenReact.ReactNode?Content to render inside the cardundefined

DraggableCardContainer Props

PropTypeDescriptionDefault
classNamestring?Additional CSS classes to apply to the containerundefined
childrenReact.ReactNode?Content to render inside the containerundefined

Build websites faster and 10x better than your competitors with Aceternity UI Pro

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro
Manu is the man! He is the best front-end developer I have worked with. He took the requirements and quite literally ran with them. We are super happy with the result and product we go...

John Shahawy

Founder at Rogue and Moonbeam

A product by Aceternity
Building in public at @mannupaaji