# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/feature273. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Feature](/blocks/feature)
5. /
6. Question And Answer Ledger

# Question And Answer Ledger[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/feature273`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop          | Type          | Default | Description                            |
| ------------- | ------------- | ------- | -------------------------------------- |
| eyebrow       | string        | –       | Badge6 label above the hairline rule   |
| heading       | string        | –       | Section heading under the rule         |
| questionLabel | string        | –       | Head of the left column, desktop only  |
| answerLabel   | string        | –       | Head of the right column, desktop only |
| rows          | LedgerRow\[\] | \[\]    | One hairline row per question          |
| className     | string        | –       | Extra classes for the outer section    |

tsCopy

```
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.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature246)

PRO

feature246

### Switchable Capability Ledger

Capability section with a row of pill filters that swap the list below: each entry becomes a ruled three-column row holding the title, an explanation and the typical duration pinned right.

[](/block/feature254)

PRO

feature254

### Photographic Year Ledger

Timeline where every ruled row lines up a year, a photograph from that moment and the explanation of what forced the change, headed by a pill CTA on the heading line and stacking to a readable block on mobile.

[](/block/feature200)

PRO

feature200

### Feature with Two-Column Checklist and Image

Two-column feature section with badge, heading, description, a 2-column checklist of icon items (defaults to check icon), and CTA on one side, with a square image on the other. Image position is configurable.

[](/block/feature202)

PRO

feature202

### Feature with Side Heading and Custom Tabs

Two-column feature section with badge, heading, and multi-paragraph copy on the left, plus a custom tab strip and panel on the right.

[](/block/feature34)

FREE

feature34

### Numbered Reasons List

Two-column grid of numbered items (01, 02, etc.) with circular badges, titles, and descriptions. Perfect for why-choose-us sections, benefits lists, or key differentiators.

[](/block/feature199)

PRO

feature199

### Feature with Side Heading and Icon Grid

Two-column feature section with a large heading on the left and a 2x2 grid of feature cards on the right, each with a large badge icon, title, and description.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.