A small but mighty leadership team with decades of combined experience in design, engineering, and product strategy.
CEO & Co-Founder
Former design lead at Stripe. Passionate about making complex tools feel simple and accessible to everyone.
CTO & Co-Founder
Previously an infrastructure engineer at Vercel. Obsessed with performance, developer experience, and open source.
Head of Design
Award-winning designer who led design systems at Figma. Believes great design is invisible and inclusive by default.
Head of Engineering
Full-stack veteran with a background in distributed systems. Runs our platform team and mentors junior engineers.
Head of Product
Product strategist who spent five years at Notion shaping their collaboration features. Data-driven and user-obsessed.
Head of Growth
Growth leader who scaled multiple B2B SaaS products from zero to millions in ARR. Community builder at heart.
Three-column grid of team member cards with avatars, roles, and short bios. Great for leadership and team pages.
Three-column grid of team member cards, each a muted panel pairing an avatar, name, and role with a short bio paragraph. Built for leadership pages that need more detail per person than a bare avatar 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/about7?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about7?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about7.tsx, along with the shadcn/ui badge, button, and avatar components it depends on.
The installed file exports about7Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { About7, about7Demo } from "@/components/beste/block/about7";
export default function AboutPage() {
return <About7 {...about7Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { About7 } from "@/components/beste/block/about7";
export default function AboutPage() {
return (
<About7
badge={{ label: "Leadership", variant: "secondary" }}
heading="Meet the minds shaping our vision"
description="A small but mighty leadership team with decades of combined experience."
team={[
{
name: "Sarah Chen",
role: "CEO & Co-Founder",
bio: "Former design lead at Stripe, focused on making complex tools feel simple.",
avatar: { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop", alt: "Sarah Chen" },
},
{
name: "Marcus Johnson",
role: "CTO & Co-Founder",
bio: "Previously an infrastructure engineer at Vercel.",
},
{
name: "Elena Rodriguez",
role: "Head of Design",
bio: "Award-winning designer who led design systems at Figma.",
},
]}
buttons={[{ label: "See Open Positions", 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 |
team | TeamMember[] | [] | Cards rendered in the three-column grid |
buttons | ButtonItem[] | [] | CTA row at the bottom |
className | string | – | Extra classes for the outer <section> |
type TeamMember = {
name: string;
role: string;
bio?: string;
avatar?: { src: string; alt: string };
};
type ButtonItem = {
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};sm:grid-cols-2 lg:grid-cols-3. With the demo's 6 members that fills two even rows, but a count that isn't a multiple of 3 leaves a short last row instead of rebalancing to a different column count.bio is optional per member; a member without one renders just the header row (avatar, name, role) with no paragraph beneath it.text-xs md:text-sm, one size below the name, inside the same header row as the avatar rather than on its own line.name, joined together.