Six Cell Grid

Feature290: Six Cell Grid

Six cells in a ruled grid that behaves like a table: icons above serif titles and short paragraphs, with vertical rules drawn only where the columns actually meet.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/feature290?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/feature290?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature290.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports feature290Demo alongside the block: the exact props behind the preview above. Spread it to get a working feature grid in one line.

import { Feature290, feature290Demo } from "@/components/beste/block/feature290";

export default function Page() {
  return <Feature290 {...feature290Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Feature290 } from "@/components/beste/block/feature290";

export default function Page() {
  return (
    <Feature290
      eyebrow="Everything, in one place"
      heading="Six things that come with every hour."
      button={{ label: "See how it works", href: "/how", tone: "outline" }}
      cells={[
        { icon: Ear, title: "Listening to the end", description: "Nobody is cut off." },
        { icon: BookOpen, title: "A note the next day", description: "A few lines from us within a day." },
        { icon: Moon, title: "Evening hours", description: "Sessions until nine, Monday to Thursday." },
      ]}
    />
  );
}

Props

type Cell = {
  icon: LucideIcon;
  title: string;
  description: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The rules are drawn with nth-child selectors rather than by giving every cell a border, so no double line ever appears where two cells meet and the outer edges stay clean.
• Those selectors are written twice over, once for the two-column layout at sm and once for three columns at md, with the sm rules explicitly unset at md (md:[&:nth-child(2n)]:border-l-0). That is what keeps the grid correct at both widths instead of inheriting a rule in the wrong place.
• The entry delay combines column and row, (index % 3) * 0.1 + Math.floor(index / 3) * 0.15, so the grid resolves left to right and top to bottom rather than as one long queue.
• icon takes the Lucide component itself, not a name string, so icons are tree-shaken with your bundle and there is no map to maintain.
• Icons are drawn bare here rather than in a circle, which suits a grid that is already ruled; a circled mark in every cell would be one shape too many.
• Cell titles are h3 under the section h2, and nothing in the grid is interactive.
• The grid is written for six cells in a three-column layout; a count that does not divide by three leaves the last row short rather than stretching, which is the intended shape.