Company At a Glance shadcn/tailwind block

About this block

Company At a GlancePRO

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.

About19: Company At a Glance

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.

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.

Upgrade Now

Installation

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

bash

npx shadcn add "https://ui.beste.co/r/about19?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

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.

Quick start

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.

tsx

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:

tsx

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" }]}
    />
  );
}

Props

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";
};

Behavior notes

The story/facts/quote row is a fixed 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.
The quote card uses 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.
The panoramic image is a fixed aspect-[21/9] box; there is no portrait or square variant.
The closing stats bar is 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.
The quote's avatar falls back to initials computed from quote.author.split(" ").map((n) => n[0]).join("") when no avatar image is supplied.

More About blocks

View all About

PRO

about13

Company Profile

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.

PRO

about23

Story, Image & Team Row

Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.

PRO

about20

Team Photo & List

Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.

PRO

about21

Checklist & Image Split

Two-column layout with checklist highlights on the left, featured image and testimonial quote on the right, plus a full-width stats row.

PRO

about1

Team & Mission

Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.

PRO

about5

Image & Text Split

Side-by-side layout with a tall image on the left and company story, inline stats, and CTAs on the right.

Company At a Glance

The company behind the components

Our Story

Key Facts