# 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/testimonial47. 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. [Testimonial](/blocks/testimonial)
5. /
6. Reader Letters, Printed In Full

# Reader Letters, Printed In Full[PRO](/pricing)

Two long replies set as letters rather than pull quotes, each running at full length on a hairline and signed off with the sender's portrait, where they work and the date it arrived.

ViewCodeDocs

Base UI

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

## Testimonial47: Reader Letters, Printed In Full

Two long replies set as letters rather than pull quotes, each running at full length on a hairline and signed off with the sender's portrait, where they work and the date it arrived.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Testimonial47, testimonial47Demo } from "@/components/beste/block/testimonial47";

export default function RepliesPage() {
  return <Testimonial47 {...testimonial47Demo} />;
}
```

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

tsxCopy

```
import { Testimonial47 } from "@/components/beste/block/testimonial47";

export default function RepliesPage() {
  return (
    <Testimonial47
      eyebrow="Replies"
      heading="Letters we did not expect to get"
      description="These arrived as replies to an issue, not as testimonials."
      letters={[
        {
          body: "I did it your way for the last three quotes and two of them closed at the price on the page.",
          name: "Maria Santos",
          role: "Independent, Lisbon",
          received: "Received 12 March",
          avatar: { src: "/people/maria.jpg", alt: "Maria Santos" },
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type       | Default | Description                          |
| ----------- | ---------- | ------- | ------------------------------------ |
| eyebrow     | string     | –       | Badge6 label above the hairline rule |
| heading     | string     | –       | Section heading under the rule       |
| description | string     | –       | Supporting paragraph                 |
| letters     | Letter\[\] | \[\]    | One letter per column                |
| className   | string     | –       | Extra classes for the outer section  |

tsCopy

```
type Letter = {
  body: string;
  name: string;
  role: string;
  received: string;
  avatar?: Avatar;
};

type Avatar = {
  src: string;
  alt: string;
};
```

### Behavior notes

* The body is not truncated and carries no quotation marks of its own, which is what makes it read as a letter rather than as a pulled line.
* Each entry is a `figure` with a `blockquote` and a `figcaption`, so the attribution stays tied to the quote in the markup.
* `received` is free text, so it can carry a date, a channel or both.
* Two columns from `md` up. The layout is built for a small number of long replies rather than a wall of short ones.

## More Testimonial blocks

[View all Testimonial](/blocks/testimonial)

[](/block/testimonial34)

PRO

testimonial34

### Testimonial Marquee

Two rows of monochrome quote cards scrolling in opposite directions with edge fades.

[](/block/testimonial35)

PRO

testimonial35

### Oversized Pull-Quote Testimonial

A single dramatic pull-quote with a decorative mark, centered above a rounded avatar, name, and role.

[](/block/testimonial41)

PRO

testimonial41

### Editorial Quote Proof

An editorial testimonial with an eyebrow, a large light quote and author on the left, an image tile floating a proof stat on the right, and a centered trust cluster below a hairline rule.

[](/block/testimonial33)

PRO

testimonial33

### Split Quote Card

Centered parenthetical eyebrow and bold heading above a split card: a full-bleed portrait on the left and a large quote with author attribution on a muted panel to the right.

[](/block/testimonial43)

PRO

testimonial43

### Quote With Rating

A testimonial with an eyebrow over a hairline rule, pairing a large light quote and author on the left with an image tile that floats a live star-rating card on the right.

[](/block/testimonial44)

PRO

testimonial44

### Portrait Customer Story

A single customer story that sets a tall portrait with a gradient name card beside an oversized light quote, a hairline row of three proof figures, and a link into the full write-up.

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