Draggable Card
Scattered photo cards you can fling around with inertia, tilt and bounds.
- 2.4 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Arrow keys move the card; Enter or Space brings it to the front.
Moraine Lake
Above the clouds
Northern lights
Red rock road
Forest light
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/draggable-card.jsonAdds components/velora/draggable-card.tsx, installs motion.
Examples
Moodboard
Six captioned photos pinned to a board, ready to be rearranged.
Cabin refresh — moodboard
Drag to rearrange
Arrow keys move the card; Enter or Space brings it to the front.
Warm oak, soft linen
Living room
Morning light
Bedroom
Terracotta & sage
Palette
Open shelving
Kitchen
Arched doorways
Details
A reading nook
Study
Props
DraggableCardContainer
| Prop | Type | Default |
|---|---|---|
children*`DraggableCard` elements | React.ReactNode | — |
Also accepts every <div> attribute, forwarded to the root element.
DraggableCard
| Prop | Type | Default |
|---|---|---|
labelAccessible name for the card, e.g. its caption | string | — |
rotateResting tilt in degrees (defaults to a seeded ±7° per card) | number | — |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- Cards still drag, but stop where they are released: no momentum, overshoot, lift or tilt.
- Keyboard
- Each card is focusable; arrow keys nudge it 12px (48px with Shift) without leaving the board, and Enter or Space brings it to the front.
- Screen readers
- Each card is a focusable group (aria-roledescription "draggable card") named by its label and described by a hidden hint listing the keyboard controls.