Styling

Grid items can be styled using class, activeClass, and previewClass props. The active class applies during drag/resize, and the preview class styles the drop target indicator.

Code

svelte

<GridItem
  x={0}
  y={0}
  class="bg-gradient-to-br from-primary/30 to-primary/10 border rounded-lg"
  activeClass="opacity-50 scale-[1.02] shadow-lg"
  previewClass="bg-primary/20 border-2 border-dashed border-primary rounded-lg"
>
  {#snippet children()}
    <div>Content</div>
  {/snippet}
</GridItem>