A tight crew of designers, writers, and engineers who would rather ship something honest than something safe.
Identity systems, editorial sites, and product interfaces — built to feel inevitable and last for years.
Small teams, short loops, real prototypes. We make the work, test it in the open, and sharpen it together.
Because most brands sound the same. We exist to give the good ones a voice that actually carries.
Mara Quill
Founder & Creative Director
A type-led about with an oversized statement and a four-part Who/What/How/Why grid.
Type-led about section with no imagery: an oversized statement heading sits above a four-part Who/What/How/Why style grid, each entry auto-numbered from its position in the array, closing with an optional signature and CTA row.
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/about55?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about55?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about55.tsx, the badge6 component it uses for the eyebrow label, the button1 component it uses for the CTA, and its dependencies.
The installed file exports about55Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { About55, about55Demo } from "@/components/beste/block/about55";
export default function Page() {
return <About55 {...about55Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { About55 } from "@/components/beste/block/about55";
export default function Page() {
return (
<About55
label="About Polaris"
heading="We are a creative studio that builds <strong>brands worth believing in.</strong>"
parts={[
{ label: "Who", body: "A tight crew of designers, writers, and engineers." },
{ label: "What", body: "Identity systems, editorial sites, and product interfaces." },
{ label: "How", body: "Small teams, short loops, real prototypes." },
{ label: "Why", body: "Because most brands sound the same." },
]}
signature={{ name: "Mara Quill", role: "Founder & Creative Director" }}
button={{ label: "Start a Project", href: "/contact" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
label | string | – | Eyebrow text rendered in a Badge6 |
heading | string | – | Oversized statement heading; supports inline HTML (<strong>, entities) |
parts | PartItem[] | [] | Four-part grid entries, auto-numbered by array position |
signature | Signature | – | Optional name/role pair in the footer row |
button | ActionLink | – | Optional CTA rendered as a Button1 with an arrow icon in the footer row |
className | string | – | Extra classes for the outer <section> |
type PartItem = { label: string; body: string };
type Signature = { name: string; role: string };
type ActionLink = { label: string; href: string };parts entry's number (01, 02, 03, 04) is generated from its array index (String(index + 1).padStart(2, "0")), not a prop; reordering the array reorders the numbers automatically.heading and each part's body render through dangerouslySetInnerHTML, so both accept inline HTML: the demo uses <strong> in the heading and HTML entities (—) in a couple of body strings.md:grid-cols-4 and does not adapt column count to parts.length; passing fewer or more than four entries changes row wrapping rather than column width.signature and button) only renders its wrapper when at least one of the two is present, and each half renders independently if the other is omitted.