Styling

Customise the look and feel of your grid.

Required styles

The @dnd-grid/react/styles.css file includes layout and interaction styles. Always import it.


import "@dnd-grid/react/styles.css";

CSS variables

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;
}

Reference

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.

Item styles

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;
}

State classes

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.

Custom resize handles

Replace the handle UI with a custom component:


<DndGrid resizeHandle={<div className="my-custom-handle" />} />

Reduced motion

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;
  }
}

Animation config

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 },
  }}
/>