Voronoi Bento

Arrange content in a geometric, irregular grid.

@sigil-ui/componentsReact

Preview

Import

import { VoronoiBento, VoronoiCell } from "@sigil-ui/components";

Usage

<VoronoiBento seeds={3} height={260} className="w-full">
  <VoronoiCell>Design</VoronoiCell>
  <VoronoiCell>Build</VoronoiCell>
  <VoronoiCell>Ship</VoronoiCell>
</VoronoiBento>

Sub-components

This component includes the following parts:

<VoronoiCell>

Props

Prop	Type	Default	Description
`seeds`	`number`	`8`	Number of Voronoi cells.
`gap`	`number`	`8`	Gutter between cells in px. Falls back to --s-bento-gap.
`rounded`	`number`	`0`	Border-radius on the outer container.
`width`	`number`	—	Container width in px. Uses 100% when omitted.
`height`	`number`	`500`	Container height in px.

Token integration

CSS Variable	Purpose
`--s-surface`	Surface
`--s-bg-elevated`	Bg elevated
`--s-border`	Border

Stack

Arrange children vertically or horizontally with consistent gaps.

ContainerQuery

Adapt child layouts to the width of their container.