Pick a format to see what it commits us to. The rules hold whether anyone is reading that week or not.
One argument, written until it holds. Published when it is ready rather than on a day of the week.
A recent one
Essay · 18 MarchThe quote we lost on purposeA 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.
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.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/feature271?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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",
},
},
]}
/>
);
}| 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 |
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;
};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.bg-foreground text-background.lg up, the position and specification list on the left and the example on the right. Below that they stack in the same order.dl, one hairline row per entry, with the label column fixed at 10rem from sm up so values line up down the panel.