Full company overview with panoramic image, story paragraph, key facts list, leadership quote, and stats row. A rich, multi-section layout for company landing pages.
The most content-dense About block in the set: a centered header, a full-width panoramic image, a three-column row combining a story paragraph, a divided key-facts list, and a leadership quote card, and a closing stats bar, all before an optional CTA row. Built as a single-section company overview for landing pages that need narrative, data, and social proof together.
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/about19?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about19?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about19.tsx and the avatar, badge, and button shadcn/ui primitives it depends on.
The installed file exports about19Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { About19, about19Demo } from "@/components/beste/block/about19";
export default function Page() {
return <About19 {...about19Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { About19 } from "@/components/beste/block/about19";
export default function Page() {
return (
<About19
badge={{ label: "About Us", variant: "secondary" }}
heading="The company behind the components"
description="We are a design infrastructure company on a mission to make the web faster."
image={{ src: "https://images.unsplash.com/photo-1772119044027-04e80adeda6b?w=1400&h=700&fit=crop", alt: "Our headquarters" }}
story="Founded in 2020 by a small team of designers and engineers, we set out to give developers a head start on interfaces they rebuild every project."
facts={[
{ label: "Founded", value: "2020" },
{ label: "Team Size", value: "22 people" },
{ label: "Funding", value: "Seed" },
]}
quote={{
text: "Beautiful, accessible interfaces should not be a luxury.",
author: "Sarah Chen",
role: "Co-Founder & CEO",
avatar: { src: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop", alt: "Sarah Chen" },
}}
stats={[
{ value: "80K+", label: "Active Developers" },
{ value: "99.9%", label: "Platform Uptime" },
{ value: "40+", label: "Countries Served" },
]}
buttons={[{ label: "Join Our 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 | – | Section intro text |
image | { src: string; alt: string } | – | Full-width panoramic photo below the header |
story | string | – | Paragraph under the "Our Story" heading |
facts | FactItem[] | [] | Key-facts list under the "Key Facts" heading |
quote | { text: string; author: string; role: string; avatar?: { src: string; alt: string } } | – | Leadership quote card |
stats | StatItem[] | [] | Numbers rendered in the closing stats bar |
buttons | ButtonItem[] | [] | CTAs centered at the very bottom |
className | string | – | Extra classes for the outer <section> |
type FactItem = { label: string; value: string };
type StatItem = { value: string; label: string };
type ButtonItem = {
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};lg:grid-cols-3, not a dynamic column count: it assumes all three of story, facts, and quote are supplied, and omitting one leaves the other two occupying only two of the three tracks rather than reflowing to fill the row.flex flex-col justify-center so its content sits vertically centered within the grid row, regardless of whether the story paragraph or facts list next to it is taller.aspect-[21/9] box; there is no portrait or square variant.grid-cols-2 sm:grid-cols-4 with its own bg-muted/50 fill, visually separate from the quote card's identical fill above it.quote.author.split(" ").map((n) => n[0]).join("") when no avatar image is supplied.about13
Asymmetric layout with company story and image on the left, and a vertical list of company details on the right. Great for press and investor pages.
about23
Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.
about20
Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.
about21
Two-column layout with checklist highlights on the left, featured image and testimonial quote on the right, plus a full-width stats row.
about1
Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.
about5
Side-by-side layout with a tall image on the left and company story, inline stats, and CTAs on the right.