A diverse group of thinkers, makers, and problem solvers building tools that developers actually enjoy using.
We set out to prove that beautiful, accessible design does not have to be complicated. Five years later, our community of builders has turned that belief into reality every single day.
Sarah Chen
CEO & Co-Founder
CTO & Co-Founder
Head of Design
Head of Engineering
Head of Product
Lead Developer
Design Lead
Founder blockquote with avatar, followed by a horizontal team member row. Ideal for leadership pages and company introductions.
About section built around a single founder blockquote, complete with a large quote icon and avatar, followed by a compact horizontal grid of team member avatars and roles. There are no bios here; pair it with About7 when a longer per-person description is needed.
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/about4?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about4?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about4.tsx, along with the shadcn/ui badge, button, and avatar components it depends on.
The installed file exports about4Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { About4, about4Demo } from "@/components/beste/block/about4";
export default function AboutPage() {
return <About4 {...about4Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { About4 } from "@/components/beste/block/about4";
export default function AboutPage() {
return (
<About4
badge={{ label: "Meet the Team", variant: "secondary" }}
heading="The people behind the product"
description="A diverse group of thinkers, makers, and problem solvers."
founder={{
quote: "We set out to prove that beautiful, accessible design does not have to be complicated.",
name: "Sarah Chen",
role: "CEO & Co-Founder",
avatar: { src: "https://images.unsplash.com/photo-1602668573961-452caa3c827d?w=300&fit=crop", alt: "Sarah Chen" },
}}
team={[
{ name: "Marcus Johnson", role: "CTO & Co-Founder" },
{ name: "Elena Rodriguez", role: "Head of Design" },
{ name: "David Kim", role: "Head of Engineering" },
]}
buttons={[{ label: "View All Team", href: "https://beste.co" }]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Small label above the heading |
heading | string | – | Section heading |
description | string | – | Intro paragraph under the heading |
founder | FounderQuote | – | Blockquote panel with quote, name, role, and avatar |
team | TeamMember[] | [] | Team member row rendered below the founder quote |
buttons | ButtonItem[] | [] | CTA row at the bottom |
className | string | – | Extra classes for the outer <section> |
type FounderQuote = {
quote: string;
name: string;
role: string;
avatar?: { src: string; alt: string };
};
type TeamMember = {
name: string;
role: string;
avatar?: { src: string; alt: string };
};
type ButtonItem = {
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 regardless of how many members are passed. The demo ships exactly 6 members so the row fills evenly, but a count that isn't a multiple of 6 leaves a visibly short last row rather than rebalancing to a different column count.name on spaces and joining the first letter of each part, so it works for any number of name segments, not just a first and last name.founder is passed; there is no default founder object if it's omitted.avatar is independently optional: without it, only the name and role text render next to the quote.