Before and After Columns

Feature295: Before and After Columns

Two columns that make the same argument twice: what an agent does today in muted paper, what it does after the install in ink, with the command sitting on the hairline between them.

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

Base UI flavor

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

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

Quick start

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

import { Feature295, feature295Demo } from "@/components/beste/block/feature295";

export default function Page() {
  return <Feature295 {...feature295Demo} />;
}

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

import { Feature295 } from "@/components/beste/block/feature295";

export default function Page() {
  return (
    <Feature295
      eyebrow="One line changes the workflow"
      heading="The same request, before and after."
      description="What changes is where the answer comes from."
      before={{
        label: "Before",
        title: "The agent improvises",
        items: ["Guesses a layout from memory", "Forgets the phone view"],
      }}
      after={{
        label: "After",
        title: "The agent chooses",
        items: ["Searches a library of finished sections", "Responsive from the first render"],
      }}
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
    />
  );
}

Props

type Column = {
  label: string;
  title: string;
  items: string[];
};

Behavior notes

• The two columns are the same component shape but deliberately not the same surface: paper against ink is what carries the argument before anyone reads a word of it.
• Minus and plus icons stand in for the usual cross and tick, which keeps the before column from reading as an error state.
• The plus markers use text-current rather than the accent, because the accent disappears against the ink panel. This is the same trap that hides a coloured icon on any dark surface in the set.
• The middle column collapses to just the pill below the large breakpoint, where the vertical hairlines above and below it are hidden.
• The command pill is filled ink so it reads as the hinge between the two columns rather than as part of either one.
• Columns arrive 0.2 seconds apart with the pill between them, so the eye lands on the problem, then the command, then the outcome.
• Both columns are optional. Passing only one gives a single list with the pill beside it.