> ## Documentation Index
> Fetch the complete documentation index at: https://dnd-grid.blode.md/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

## Required styles

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

```tsx
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.

```css
: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:

```css
.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:

```tsx
<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`:

```tsx
<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:

```css
@media (prefers-reduced-motion: reduce) {
  .dnd-grid {
    --dnd-grid-transition-duration: 0ms;
  }
}
```

## Animation config

Use `animationConfig` to tune spring behavior and drag shadow timings:

```tsx
<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:

```tsx
<DndGrid
  animationConfig={{
    springs: { enabled: false },
    shadow: { enabled: false },
  }}
/>
```