BricksLab Catalog

@brickslab/ui-web

CSS Grid layout component for bento-style interfaces. Cards span multiple columns and rows to create rich, asymmetric layouts. Propagates reduced-motion preference to all children via context.

Aperçu

Bento layout — 3 colonnes, cellules asymétriques

Performance

Lightning-fast components with zero runtime overhead and tree-shakable exports.

Type-safe

Full TypeScript support.

Design tokens

Consistent visual language.

Open Source

Free forever — MIT license.

Dense packing — cartes de hauteurs variées

Layout

Speed

Code

Zap

Shield

Star

Auto-responsive — colonnes fluides

Performance

Optimized bundle

Code

Clean APIs

Layout

Flexible grid

Speed

Fast renders

BentoGrid Props

Prop	Type	Défaut	Requis	Description
`children`	`React.ReactNode`	—	✓	Child elements (typically BentoCard components).
`columns`	`number \| "auto"`	`"auto"`	—	Number of columns. "auto" uses auto-fit with minWidth minimum.
`minWidth`	`number \| string`	`250`	—	Minimum card width in auto mode. E.g. 200 → "200px", or "15rem".
`gap`	`number \| string`	`var(--space-4)`	—	Gap between grid items. Accepts CSS tokens or pixel values.
`dense`	`boolean`	`false`	—	Enable CSS Grid dense packing to fill gaps automatically.
`autoRows`	`string`	`"auto"`	—	CSS value for grid-auto-rows. E.g. "180px", "1fr", "minmax(120px, auto)".
`style`	`React.CSSProperties`	—	—	Inline styles merged onto the grid container.
`as`	`React.ElementType`	`"div"`	—	HTML element or component to render as.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Controls motion reduction. Propagated to child BentoCards via context.

BentoCard Props

Prop	Type	Défaut	Requis	Description
`name`	`string`	—	✓	Card title.
`description`	`string`	—	—	Card body text.
`Icon`	`React.ElementType`	—	—	Icon component (e.g. from react-icons).
`colSpan`	`number`	—	—	Number of grid columns this card spans.
`rowSpan`	`number`	—	—	Number of grid rows this card spans.
`hoverEffect`	`"lift" \| "glow" \| "none"`	`"none"`	—	Hover animation.
`href`	`string`	—	—	Makes the card a link.
`cta`	`string`	—	—	Call-to-action label shown at bottom.
`background`	`React.ReactNode`	—	—	Decorative background layer.
`interactive`	`boolean`	`false`	—	Adds pointer cursor.
`style`	`React.CSSProperties`	—	—	Inline styles merged onto the card.
`reducedMotion`	`"auto" \| "always" \| "never"`	—	—	Per-card override. Inherits from BentoGrid context if omitted.

Usage

tsx

import { BentoGrid, BentoCard } from "@brickslab/ui-web";
import { FiZap, FiCode, FiLayout } from "react-icons/fi";

<BentoGrid columns={3} autoRows="180px" gap="var(--space-4)" dense>
  {/* Hero card — spans 2 cols × 2 rows */}
  <BentoCard
    name="Performance"
    description="Lightning-fast components, zero runtime overhead."
    Icon={FiZap}
    colSpan={2}
    rowSpan={2}
    hoverEffect="lift"
  />
  {/* Regular cards */}
  <BentoCard name="Clean Code" Icon={FiCode} hoverEffect="lift" />
  <BentoCard name="Design System" Icon={FiLayout} hoverEffect="lift" />
  {/* Banner — spans full width */}
  <BentoCard
    name="Open Source"
    description="Free forever."
    colSpan={3}
    hoverEffect="glow"
  />
</BentoGrid>