When Marcus and I left our jobs in 2018, people thought we were crazy. We were walking away from comfortable roles at top tech companies to solve a problem most people did not even recognize: developers were spending far too much time rebuilding the same UI patterns over and over again.
We had both experienced this frustration firsthand — the hours lost to pixel-pushing, the inconsistent designs across projects, the accessibility gaps that slipped through because there was never enough time to get everything right.
So we built the tool we always wished existed. A library of production-ready components that look beautiful out of the box, work for everyone, and can be customized to fit any brand. No lock-in, no proprietary formats — just clean, ownable code.
Six years later, over 200,000 developers use our blocks every month. We have a team of 45 people across 12 countries, all united by the same belief: great design should be accessible to everyone who builds for the web.
We are just getting started. Thank you for being part of this journey.
Sarah Chen
CEO & Co-Founder
Editorial-style open letter with paragraphs, a personal signature with avatar, and a call-to-action. Great for founder stories.
Editorial open letter centered in a narrow column: a badge and heading sit above a multi-paragraph letter, followed by a signature row with an avatar, name, and role, and an optional set of CTA buttons. Built for founder stories that read like an actual letter rather than a bulleted pitch.
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/about15?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about15?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about15.tsx and the badge, button, and avatar shadcn/ui primitives it depends on.
The installed file exports about15Demo alongside the block: the exact props behind the preview above. Spread it to get a working letter section in one line.
import { About15, about15Demo } from "@/components/beste/block/about15";
export default function Page() {
return <About15 {...about15Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { About15 } from "@/components/beste/block/about15";
export default function Page() {
return (
<About15
badge={{ label: "A Note from Our CEO", variant: "secondary" }}
heading="Why we started this company"
letter={
"When we left our jobs, people thought we were crazy.\n\n" +
"We had both felt the same frustration: rebuilding the same interfaces over and over.\n\n" +
"So we built the tool we wished existed."
}
signature={{
name: "Sarah Chen",
role: "CEO & Co-Founder",
avatar: { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop", alt: "Sarah Chen" },
}}
buttons={[{ label: "Join Our Mission", href: "https://beste.co" }]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Small label above the heading |
heading | string | – | Section heading, centered |
letter | string | – | Full letter text; paragraphs are separated by a blank line (\n\n) |
signature | { name: string; role: string; avatar?: { src: string; alt: string } } | – | Sign-off row under the letter |
buttons | ButtonItem[] | [] | CTAs centered under the signature |
className | string | – | Extra classes for the outer <section> |
type ButtonItem = {
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};letter is a single string, not an array: the component calls letter.split("\n\n") and renders one <p> per resulting chunk, so paragraph breaks must be authored as literal double newlines in the prop value, not as separate array items.signature.name.split(" ").map((n) => n[0]).join("") whenever signature.avatar is omitted or fails to load.max-w-3xl column; there is no left-aligned or two-column variant.signature still renders the paragraphs, and a letter with no buttons simply omits the CTA row.about79
An about section written as a letter: a portrait drifting inside its frame on the left, and on the right a serif opening line that settles in word by word, three paragraphs, a ruled signature with the founder's name and role, and a sliding-marker pill.
about71
A long-form company letter set in a wide reading column with an accent-ruled pull quote and signed off by avatar bylines, beside a narrower column of captioned portraits.
about67
Founder statement with a large blockquote followed by an avatar, name, role, and a monospace signature line.
about4
Founder blockquote with avatar, followed by a horizontal team member row. Ideal for leadership pages and company introductions.