AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Styling
Customise the look and feel of your grid.
dnd-grid uses CSS variables for theming. Override them in global CSS or on a grid container.
:root {
--dnd-grid-radius: 24px;
--dnd-grid-placeholder-bg: rgba(0, 0, 0, 0.05);
--dnd-grid-handle-bg: #ffffff;
}| Variable | Default | Description |
|---|---|---|
--dnd-grid-radius | 24px | Border radius for grid items and the placeholder. |
--dnd-grid-placeholder-bg | rgba(0,0,0,0.012) | Background colour of the drop placeholder. |
--dnd-grid-handle-bg | #ffffff | Colour of the default resize handle. |
Grid items use .dnd-grid-item for layout. Non-placeholder items also include
.dnd-grid-item-content so you can target visuals without affecting the placeholder:
.dnd-grid-item-content {
background: white;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.dnd-grid-item.dnd-draggable-dragging {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
z-index: 10;
}Use these classes for states and placeholders:
.dnd-draggable-dragging: Item being dragged..resizing: Item being resized..dnd-grid-placeholder: Placeholder during drag/resize..is-hovered: Hover state.Replace the handle UI with a custom component:
<DndGrid resizeHandle={<div className="my-custom-handle" />} />DndGrid respects prefers-reduced-motion for spring and WAAPI effects. You can
override the behavior with reducedMotion:
<DndGrid reducedMotion="always" />Accepted values:
"system" (default): use the OS preference."always": disable motion."never": always allow motion.true/false: aliases for "always"/"never".To disable CSS transitions as well, set the transition variables in a media query:
@media (prefers-reduced-motion: reduce) {
.dnd-grid {
--dnd-grid-transition-duration: 0ms;
}
}Use animationConfig to tune spring behavior and drag shadow timings:
<DndGrid
animationConfig={{
springs: {
rotation: { stiffness: 120, damping: 12 },
scale: { stiffness: 600, damping: 35 },
position: { stiffness: 240, damping: 24 },
},
shadow: {
dragStartDuration: 160,
dragStopDuration: 120,
},
}}
/>Disable springs or shadow animations entirely:
<DndGrid
animationConfig={{
springs: { enabled: false },
shadow: { enabled: false },
}}
/>