# 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/feature271. 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. Format Anatomy Tabs

# Format Anatomy Tabs[PRO](/pricing)

A tabbed breakdown of what each publishing format commits to, pairing a stated position with a specification list on one side and a real example card on the other.

ViewCodeDocs

Base UI

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

## Feature271: Format Anatomy Tabs

A tabbed breakdown of what each publishing format commits to, pairing a stated position with a specification list on one side and a real example card on the other.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/feature271.tsx`, the `badge6` component used for the eyebrow, and the shadcn/ui `tabs` primitive that drives the switcher.

### Quick start

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

tsxCopy

```
import { Feature271, feature271Demo } from "@/components/beste/block/feature271";

export default function AboutPage() {
  return <Feature271 {...feature271Demo} />;
}
```

Then replace the demo with your own props. Written out with two formats, it looks like this:

tsxCopy

```
import { Feature271 } from "@/components/beste/block/feature271";

export default function AboutPage() {
  return (
    <Feature271
      eyebrow="Everything we publish"
      heading="Four formats, and how each one is made"
      description="Pick a format to see what it commits us to."
      exampleLabel="A recent one"
      formats={[
        {
          name: "Essays",
          summary: "One argument, written until it holds.",
          specs: [
            { label: "Length", value: "1,500 to 3,000 words" },
            { label: "Cadence", value: "When it is finished" },
          ],
          example: {
            image: { src: "/covers/042.jpg", alt: "A printed estimate" },
            meta: "Essay · 18 March",
            title: "The quote we lost on purpose",
            href: "/letters/042",
          },
        },
        {
          name: "Talks",
          summary: "Recorded sessions in one take, published the same week.",
          specs: [{ label: "Edited", value: "Not at all" }],
          example: {
            image: { src: "/covers/talk.jpg", alt: "A team at a whiteboard" },
            meta: "Talk · 26 March",
            title: "Reading a brief out loud",
            href: "/talks/briefs",
          },
        },
      ]}
    />
  );
}
```

### Props

| Prop         | Type       | Default | Description                                      |
| ------------ | ---------- | ------- | ------------------------------------------------ |
| eyebrow      | string     | –       | Badge6 label above the hairline rule             |
| heading      | string     | –       | Section heading under the rule                   |
| description  | string     | –       | Supporting paragraph, capped at max-w-3xl        |
| exampleLabel | string     | –       | Small label over the example card in every panel |
| formats      | Format\[\] | \[\]    | One tab and one panel per entry                  |
| className    | string     | –       | Extra classes for the outer section              |

tsCopy

```
type Format = {
  name: string;
  summary: string;
  specs: SpecRow[];
  example: Example;
};

type SpecRow = {
  label: string;
  value: string;
};

type Example = {
  image: { src: string; alt: string };
  meta: string;
  title: string;
  href: string;
};
```

### Behavior notes

* The switcher is the shadcn/ui `Tabs` primitive rather than local state, so keyboard support comes with it: arrow keys move between formats and only the active panel is exposed to assistive technology.
* `defaultValue` is `formats[0]?.name`, so the first entry is open on load. Tab values are the format names themselves, which means two formats must not share a name.
* The triggers wrap. On a narrow screen they flow onto a second line instead of scrolling or shrinking, and the active one is filled `bg-foreground text-background`.
* Panels are a two column grid from `lg` up, the position and specification list on the left and the example on the right. Below that they stack in the same order.
* The specification list is a real `dl`, one hairline row per entry, with the label column fixed at `10rem` from `sm` up so values line up down the panel.
* The example card links out on its own. Hovering it moves the title to the accent colour and eases the image up in scale, and the image holds still for anyone who asked for reduced motion.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature223)

PRO

feature223

### Tabbed Phase Showcase

Header with a tabbed showcase where each tab pairs a rounded image with a phase title and description.

[](/block/feature112)

FREE

feature112

### Tabbed Feature Cards

Tab-based interface showing 3 cards per tab, with button toggles at top. Excellent for segmented features by department, plan, or use case.

[](/block/feature213)

PRO

feature213

### Tabbed Features

Tabbed feature showcase with copy, checklist and screenshot per workstream.

[](/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/feature214)

PRO

feature214

### Feature Tabs Explorer

Centered header above a bordered explorer: a vertical icon tab rail switches between feature panels, each pairing a preview image with a benefit checklist and CTA.

[](/block/feature122)

PRO

feature122

### Stacked List with Dividers

Vertical stacked list of linked topics with titles, subtitles, and chevron indicators. Perfect for documentation navigation, topic browsing, or content index.

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