Draggable
A horizontal scroll container that can be scrolled by dragging with a mouse or touch.
Draggable is a horizontal scroll container. Drag the content left or right with a mouse, pen, or touch to scroll it. Native scrolling with a trackpad, mouse wheel, or scrollbar still works.
Installation
bunx --bun shadcn@latest add https://docs.danpoj.site/r/draggable.jsonRunning the command above installs the draggable component into your project. It also uses the cn helper from @/lib/utils, which the shadcn CLI adds if your project doesn't have it yet.
Examples
Pine Tree
A lone pine on a misty cliff.
Mist Field
Soft fog over an open field.
Lake Dawn
Pale pink sky reflected on water.
Hill Valley
Rolling green hills in the valley.
Coast Rocks
Rugged rocks along the shoreline.
Sunset Clouds
Warm clouds glowing at sunset.
Green Forest
Dense forest under a calm sky.
Misty Peak
A mountain peak wrapped in mist.
Quiet Lake
A still lake at the water's edge.
Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | The items to scroll horizontally. |
className | string | Extra classes merged with the default styles. Use it for gap, padding, and so on. |
...props | ComponentProps<'div'> | Any other div attributes are passed to the root element. |
Last updated on