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
Excellent communication and professionalism from the start and throughout. Happily and calmly accepted and entertained a few additional out-of-scope requests as well. Good open-...

Henrik Söderlund

Former CTO at Creme Digital

A product by Aceternity
Building in public at @mannupaaji