Discover what it's like to work here through the voices of the people who make it all happen.
“The engineering culture here is incredible. We ship fast, learn from mistakes, and celebrate wins together. I've grown more in two years than in my entire previous career.”
Alex Turner
Senior Engineer, Engineering
“What sets this company apart is the genuine investment in people. My manager actively helps me work toward my career goals, not just sprint goals.”
Maria Santos
Product Designer, Design
“I joined as a junior and within 18 months I was leading my own project. The growth opportunities here are real, not just talk.”
Jordan Lee
Software Engineer, Engineering
“The flexibility to work remotely while still feeling connected to the team is something I haven't experienced anywhere else.”
Priya Sharma
Content Strategist, Marketing
“Cross-team collaboration happens naturally here. I regularly work with engineering, design, and data — it makes the work so much richer.”
Tom Nakamura
Product Manager, Product
“The onboarding experience was the best I've ever had. By week two, I was already contributing meaningfully to the codebase.”
Emma Larsson
Frontend Engineer, Engineering
Employee testimonial cards with quotes, avatars, and roles. Social proof grid showcasing team member experiences and company culture.
A centered header (optional badge, <strong>-aware heading, and description) above a responsive one-to-three-column grid of employee testimonial cards, each rendering an italic quote, an avatar with initials fallback, the member's name, and a combined role/department line.
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/careers16?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/careers16?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/careers16.tsx, plus the badge and avatar shadcn/ui primitives it uses for the section eyebrow and the per-card member photos.
The installed file exports careers16Demo alongside the block: the exact props behind the preview above. Spread it to get a working testimonial grid in one line.
import { Careers16, careers16Demo } from "@/components/beste/block/careers16";
export default function CareersPage() {
return <Careers16 {...careers16Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Careers16 } from "@/components/beste/block/careers16";
export default function CareersPage() {
return (
<Careers16
badge={{ label: "Life at Company", variant: "secondary" }}
heading="Hear from our <strong>team members</strong>"
description="Discover what it's like to work here."
items={[
{
quote: "The engineering culture here is incredible.",
name: "Alex Turner",
role: "Senior Engineer",
department: "Engineering",
avatar: { src: "/team/alex.jpg", alt: "Alex Turner" },
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Centered eyebrow badge above the heading |
heading | string | – | Section heading, supports inline <strong> |
description | string | – | Supporting paragraph under the heading |
items | TestimonialItem[] | [] | Cards rendered in the grid |
className | string | – | Extra classes for the outer <section> |
type TestimonialItem = {
quote: string;
name: string;
role?: string;
department?: string;
avatar?: { src: string; alt: string };
};badge, heading, or description is provided; with all three omitted the grid renders on its own.heading is injected via dangerouslySetInnerHTML, and any inline <strong> inside it is recolored to text-primary, so it accepts raw HTML rather than plain text.badge.variant falls back to "default" when omitted, even though the demo passes "secondary".AvatarFallback is computed by splitting item.name on spaces and joining the first letter of every part, so it shows as many initials as there are words in the name; AvatarImage only mounts when item.avatar is present.role or department exists, joining the two present values with ", " via [item.role, item.department].filter(Boolean).join(", ").sm, and three at lg; cards use justify-between so the attribution row is pinned to the bottom regardless of quote length.useState and no click handlers.