Six Gains Ruled Grid

Feature294: Six Gains Ruled Grid

A ruled two by three grid of thin icons and short paragraphs, with the install command sitting at the right end of the heading rather than below it.

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/feature294?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/feature294.tsx plus the text1 word stagger it uses.

Quick start

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

import { Feature294, feature294Demo } from "@/components/beste/block/feature294";

export default function Page() {
  return <Feature294 {...feature294Demo} />;
}

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

import { Feature294 } from "@/components/beste/block/feature294";

export default function Page() {
  return (
    <Feature294
      eyebrow="What the command gives your agent"
      heading="Six things it no longer has to invent."
      description="After one line in the terminal the agent stops improvising layouts."
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      items={[
        { icon: LayoutGrid, title: "1,500 finished sections", description: "Heroes, pricing, footers and the rest." },
        { icon: Palette, title: "Your theme, carried through", description: "Sections read the colors your project uses." },
      ]}
    />
  );
}

Props

import type { LucideIcon } from "lucide-react";

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

Behavior notes

• Icons are passed as Lucide components rather than names, so the block imports nothing it does not draw and tree shaking keeps the bundle honest.
• They are drawn at strokeWidth={1.5} rather than the default 2, which is what keeps them quiet enough to sit beside a serif title.
• The rules come from borders on the cells themselves, using nth-child selectors to suppress the left border on every third cell, so no separator ever dangles at the edge of a row.
• Cells settle in one after another with a 0.1 second stagger read from the array index, so the grid fills in reading order.
• This is the only block in the set with no pill action: the command at the top is the whole call to action.
• The grid steps from one column to two to three, so the ruling reflows without leaving an orphan cell on a tablet.
• Six items is what the layout is tuned for. More will still render, but the last row will be short.