Marketing

Bento grid

Editorial bento layout for showcasing a platform narrative.

Platform

A bento grid for product capabilities.

Lightning fast

Optimized rendering and zero-runtime styling keep every interaction instant.

Themeable by design

Swap a palette and every surface, border, and gradient updates live.

Secure by default

SOC 2 compliant infrastructure with end-to-end encryption on every request.

Composable primitives

Build complex layouts from small, predictable, accessible building blocks.

Production ready

Compose, theme, and ship from one registry.

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Feature Grid to your app with its source-owned dependencies.

bash

npx cooud-ui add feature-grid

Manual

Install the Cooud UI packages, then paste the block below.

pnpm add @cooud-ui/ui @cooud-ui/tokens @cooud-ui/theme

Usage

Copy the source for Bento grid. Every class is a semantic token, so it re-themes with your app.

tsx

import { Badge, Card, CardDescription, CardHeader, CardTitle } from "@cooud-ui/ui";
import { BarChart3, Layers, Lock, Palette, Zap } from "lucide-react";

export function BentoFeatureBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <Badge variant="secondary">Platform</Badge>
        <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
          A bento grid for product capabilities.
        </h2>
      </div>
      <div className="mx-auto mt-12 grid max-w-5xl gap-4 md:grid-cols-6">
        {/* Use md:col-span-* and md:row-span-* to shape the bento layout */}
      </div>
    </section>
  );
}