# 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/about73. 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. [About](/blocks/about)
5. /
6. Colophon Definition Rows

# Colophon Definition Rows[PRO](/pricing)

A colophon written as a definition list, each hairline row naming one part of how the site is made, the choice itself, why it was made, and an optional link into the detail.

ViewCodeDocs

Base UI

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

## About73: Colophon Definition Rows

A colophon written as a definition list, each hairline row naming one part of how the site is made, the choice itself, why it was made, and an optional link into the detail.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { About73, about73Demo } from "@/components/beste/block/about73";

export default function ColophonPage() {
  return <About73 {...about73Demo} />;
}
```

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

tsxCopy

```
import { About73 } from "@/components/beste/block/about73";

export default function ColophonPage() {
  return (
    <About73
      eyebrow="Colophon"
      heading="How this site is made"
      description="People ask often enough that it is easier to write it down."
      rows={[
        {
          label: "Publishing",
          value: "A folder of text files",
          note: "Every piece is a plain file in version control, edits included.",
          link: { label: "See the repository", href: "https://example.com/repo" },
        },
        {
          label: "Measurement",
          value: "Page counts only",
          note: "No cookies, no profiles and nothing that follows anyone.",
        },
      ]}
      note="Last revised in March 2026."
    />
  );
}
```

### Props

| Prop        | Type            | Default | Description                          |
| ----------- | --------------- | ------- | ------------------------------------ |
| eyebrow     | string          | –       | Badge6 label above the hairline rule |
| heading     | string          | –       | Section heading under the rule       |
| description | string          | –       | Supporting paragraph                 |
| rows        | ColophonRow\[\] | \[\]    | One hairline row per decision        |
| note        | string          | –       | Single line under the list           |
| className   | string          | –       | Extra classes for the outer section  |

tsCopy

```
type ColophonRow = {
  label: string;
  value: string;
  note?: string;
  link?: ColophonLink;
};

type ColophonLink = {
  label: string;
  href: string;
};
```

### Behavior notes

* The list is a real `dl` with `dt` and `dd` pairs, so the label and its answer stay associated for anyone reading the markup rather than the columns.
* The label column is fixed at `12rem` from `md` up, which keeps the answers aligned down the page; below that the pair stacks.
* `note` and `link` are both optional per row, so a decision can be a bare statement, a statement with a reason, or either with somewhere to check it.
* Rows carry hairlines with no trailing rule, and the column is capped at `max-w-4xl` to keep the reasons readable.

## More About blocks

[View all About](/blocks/about)

[](/block/about70)

FREE

about70

### Company History Rows

A company story told as hairline rows keyed by a light year figure, set against a media column that sticks while they scroll and stacks an image tile floating a live growth metric over a captioned photograph.

[](/block/about66)

PRO

about66

### About with Stats Grid

Two-column about with a tall image on one side and an eyebrow, heading, description, and 2x2 stats grid on the other.

[](/block/about8)

PRO

about8

### Stats with Descriptions

Four-column stats grid with large numbers, titles, and supporting descriptions. Perfect for impact and results sections.

[](/block/about23)

PRO

about23

### Story, Image & Team Row

Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.

[](/block/about47)

PRO

about47

### Split Panel About

A hard light/dark split about panel: dark statement side and a light image-and-facts side.

[](/block/about24)

PRO

about24

### Company Heritage & Features

Company story with image, border-accented feature highlights, and stats row. Great for craft, heritage, and product-focused brands.

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