# DropIndicator

> A thin bar rendered in the gap between two items of a reorderable list, marking where a dragged item will land.

```ts
import { DropIndicator } from "@sdxc/ui";
```

Renders a full-width, hairline-thick, fully rounded bar shaped for the gap
between two items in a reorderable list. The host's `data-drop-target`
attribute is what paints it: transparent without it, the primary solid color
with it.

## Examples

```tsx
<DropIndicator isDropTarget={dropTargetKey === item.id} />
```

```tsx
<DropIndicator
	isDropTarget={isCurrentTarget}
	mix={css({ position: "absolute", insetInline: "0", insetBlockStart: "-1px" })}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `isDropTarget?` | `boolean` | Whether this bar marks the pointer's current drop target. Renders the host's `data-drop-target` attribute when `true`, which is what draws the bar. Defaults to DEFAULT_IS_DROP_TARGET. |

Also accepts everything in `TagProps<"div">`.