We don't chase trends — we build brands with a spine. Every line, every pixel, every silence in the layout earns its place. Good work is quiet confidence made visible: it says less, means more, and refuses to blend into the feed. We make things that look inevitable, the way a good idea always does in hindsight.
Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature.
Two-column manifesto section: a narrow sticky left rail with a badge, kicker label, and founder signature, beside an oversized statement paragraph with inline emphasis and a row of principle chips.
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/agency11?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/agency11?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/agency11.tsx, the badge6 component it uses for the eyebrow label, and its dependencies.
The installed file exports agency11Demo alongside the block: the exact props behind the preview above. Spread it to get a working manifesto section in one line.
import { Agency11, agency11Demo } from "@/components/beste/block/agency11";
export default function AboutPage() {
return <Agency11 {...agency11Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Agency11 } from "@/components/beste/block/agency11";
export default function AboutPage() {
return (
<Agency11
label="Northwind Studio"
kicker="Manifesto"
statement="We build <strong>brands with a spine</strong>. Every pixel earns its place, and the work should look <strong>inevitable</strong>."
principles={["Substance over polish", "No filler, ever"]}
signature={{ name: "Alex Rivera", role: "Founder & Creative Director" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
label | string | – | Eyebrow label rendered via Badge6 |
kicker | string | – | Small bold line under the label |
statement | string | – | Large manifesto paragraph; supports inline <strong> for primary-colored emphasis |
principles | string[] | [] | Short phrases rendered as bordered chips |
signature | Signature | – | Name and role shown under a short accent rule |
className | string | – | Extra classes for the outer <section> |
type Signature = { name: string; role: string };statement is injected with dangerouslySetInnerHTML, so any HTML entity or tag in it renders as markup, not escaped text; <strong> spans pick up text-primary, unlike the muted-foreground emphasis used in the About blocks.lg:sticky lg:top-24, so on tall statements the label/kicker/signature rail stays pinned in view while the reader scrolls past the manifesto text.lg:grid-cols-[260px_1fr] two-column split; below lg both columns stack and the sticky behavior does not apply.principles renders as rounded-md bordered chips in a wrapping flex row, not a list, so short phrases (2-4 words) read best.signature is set, and always includes a short h-px w-12 bg-primary rule above the name regardless of other props.