Question And Answer Ledger

Feature273: Question And Answer Ledger

A two-column ledger pairing the question a reader sent on the left with the thing that was built in response on the right, under column labels that only appear on desktop.

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

Base UI flavor

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

This installs the block to components/beste/block/feature273.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { Feature273, feature273Demo } from "@/components/beste/block/feature273";

export default function AskedPage() {
  return <Feature273 {...feature273Demo} />;
}

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

import { Feature273 } from "@/components/beste/block/feature273";

export default function AskedPage() {
  return (
    <Feature273
      eyebrow="Asked and answered"
      heading="Everything here started as a reader's question"
      questionLabel="What we were asked"
      answerLabel="What we made"
      rows={[
        {
          question: "How do you price a project you have never done before?",
          answer: "A chapter on estimating unfamiliar work, with the sheet we quote from.",
          link: { label: "Read the chapter", href: "/guide/estimates" },
        },
      ]}
    />
  );
}

Props

type LedgerRow = {
  question: string;
  answer: string;
  link?: AnswerLink;
};

type AnswerLink = {
  label: string;
  href: string;
};

Behavior notes

• The column heads are hidden md:grid. On a phone the two halves stack, where a floating label above a stack would read as a heading for the whole list rather than for one column.
• The question is set larger than the answer, so a reader scanning the left column alone still gets the shape of the section.
• link is optional per row, which lets an entry stand as an answer with nothing to click.
• Rows are separated by hairlines with no trailing rule, and the section sits on a bg-muted/40 band to separate it from ordinary prose.