Layout

Bento grid

Compound component: `BentoGrid` and `BentoGrid.Item`.

Server safeSource

Import

import { BentoGrid } from '@the_viveksingh/vivek-ui'

Feature mosaic

Cells claim column and row spans, so one grid produces the uneven layout a feature section wants. Spans are responsive objects, same as Grid cols.

One install

Components, charts and tokens arrive in a single package with no runtime dependencies.

40.5 kB

The whole library, minified and gzipped.

1268 tests

Every component has an axe assertion.

ESM + CJS

With correct types in all three resolution modes.

<BentoGrid cols={{ base: 1, sm: 2, lg: 4 }} gap={3} rowHeight="7rem">
  <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={2}>
    <Cell title="One install" body="Components, charts and tokens in a single package." />
  </BentoGrid.Item>
  <BentoGrid.Item colSpan={{ base: 1, sm: 2 }}>
    <Cell title="40.5 kB" body="The whole library, minified and gzipped." />
  </BentoGrid.Item>
  <BentoGrid.Item>
    <Cell title="1268 tests" body="Every component has an axe assertion." />
  </BentoGrid.Item>
  <BentoGrid.Item>
    <Cell title="ESM + CJS" body="Correct types in all three resolution modes." />
  </BentoGrid.Item>
</BentoGrid>

Dense packing

dense turns on grid-auto-flow: dense, which backfills the gaps a wide cell leaves behind. Visual order then diverges from DOM order, so keep it for decorative tiles.

Zero dependencies

Nothing to audit but React.

83 components

Plus six charts.

MIT

Free, forever.

Server-safe

Half the library needs no client boundary.

<BentoGrid cols={4} gap={3} rowHeight="6rem" dense>
  <BentoGrid.Item colSpan={2}>Zero dependencies</BentoGrid.Item>
  <BentoGrid.Item>83 components</BentoGrid.Item>
  <BentoGrid.Item>MIT</BentoGrid.Item>
  <BentoGrid.Item colSpan={3}>Server-safe</BentoGrid.Item>
</BentoGrid>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for BentoGrid
Prop	Type	Default	Description
`as`	`ElementType`	—	—
`cols`	`number \| ResponsiveCols`	—	Track count. A number is fixed at every width; an object is responsive. Defaults to `{ base: 1, sm: 2, lg: 4 }`.
`gap`	`StackGap`	—	—
`rowHeight`	`string`	—	Floor for every row, so a one-row tile still has presence and a `rowSpan={2}` tile is exactly twice it. Defaults to `10rem`.
`dense`	`boolean`	—	Let later tiles backfill the holes a wide or tall neighbour leaves behind. Off by default: `grid-auto-flow: dense` reorders tiles visually without touching DOM order, so a keyboard user can tab through a wall in an order that does not match what they see. Turn it on for decorative walls, leave it off when tiles contain controls.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

BentoGrid carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.