# Minimal About with Stats

> Plain about section: a heading beside two paragraphs, then a row of three figures with labels. Theme tokens only, light and dark.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/minimal-about-02).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/minimal-about-02
- Screenshot: https://shadcn.exchange/shot/01orbital/minimal-about-02/light.png
- Registry item: https://01orbital.dev/r/minimal-about-02.json
- Categories: about
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/minimal-about-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@01orbital/heading`, `@01orbital/section`, `@01orbital/stats`

## Files

### `blocks/about/minimal-about-02/index.tsx`

```tsx
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionColumns,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import {
  Stat,
  StatGroup,
  StatLabel,
  StatValue,
} from "@/components/editorial/stats"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Our story",
} as const

const PARAGRAPHS = [
  "Orbcore began in 2019 with four people and one rule: a plan is only useful if the whole team can read it.",
  "Today the same small group answers support, writes the docs and ships every release, with customers in more than forty countries.",
] as const

const STATS = [
  { value: "3,400+", body: "Teams planning their releases in Orbcore." },
  { value: "42", body: "Countries our customers work from." },
  { value: "99.98%", body: "Uptime over the last twelve months." },
] as const

export default function MinimalAbout02() {
  return (
    <Section>
      <SectionContent>
        <SectionColumns>
          <SectionHeader>
            <SectionTitleGroup>
              <Heading>{COPY.title}</Heading>
            </SectionTitleGroup>
          </SectionHeader>
          <SectionDescription
            render={<div />}
            className="flex max-w-md flex-col gap-6"
          >
            {PARAGRAPHS.map((text) => (
              <p key={text}>{text}</p>
            ))}
          </SectionDescription>
        </SectionColumns>
        <StatGroup cols={3} className="pt-8 md:gap-12 lg:pt-16">
          {STATS.map((stat) => (
            <Stat key={stat.value}>
              <StatValue className="text-4xl/10 @2xl/section:text-5xl/12">
                {stat.value}
              </StatValue>
              <StatLabel>{stat.body}</StatLabel>
            </Stat>
          ))}
        </StatGroup>
      </SectionContent>
    </Section>
  )
}
```