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.
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.about60
Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role).
about16
Three-column cards for vision, mission, and values with labeled headers. Clean editorial layout for company positioning.
about20
Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.
about64
Principles section with a header and a three-column grid of six bordered cards, each pairing a circular icon with a title and description.
about2
Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling.
about1
Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.