Skip to content
dnd-grid

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

VariableDefaultDescription
--dnd-grid-radius24pxBorder radius for grid items and the placeholder.
--dnd-grid-placeholder-bgrgba(0,0,0,0.012)Background colour of the drop placeholder.
--dnd-grid-handle-bg#ffffffColour 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 },
  }}
/>