Interactive customer case study and ROI telemetry workbench with industry filters, verified customer metrics, tech stack tags, and autoplay navigation.
Also available for Vue ->$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/testimonials-01.json$npx shadcn@latest add https://uipkge.dev/r/react/testimonials-01.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/testimonials-01.json$bunx shadcn@latest add https://uipkge.dev/r/react/testimonials-01.jsonnpx shadcn@latest add @uipkge-react/testimonials-01Installs to:components/blocks/Type aliases exported from this item's source. Use these to shape the data you pass in.
Testimonialinterface Testimonial {
id: string
name: string
role: string
company: string
industry: 'saas' | 'healthtech' | 'fintech' | 'devtools'
initials: string
avatarBg: string
quote: string
subquote: string
rating: number
verifiedBadge: string
metrics: { label: string; value: string; trend: string }[]
stack: string[]
}'use client'
import * as React from 'react'
import { BadgeCheck, CheckCircle2, ChevronLeft, ChevronRight, Pause, Play, Quote, Star } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { cn } from '@/lib/utils'
interface Testimonial {
id: string
name: string
role: string
company: string
industry: 'saas' | 'healthtech' | 'fintech' | 'devtools'
initials: string
avatarBg: string
quote: string
subquote: string
rating: number
verifiedBadge: string
metrics: { label: string; value: string; trend: string }[]
stack: string[]
}
const testimonials: Testimonial[] = [
{
id: '1',
name: 'Aisha Rahman',
role: 'VP of People & Operations',
company: 'Northwind Global Logistics',
industry: 'saas',
initials: 'AR',
avatarBg: 'bg-info/10 text-info border-info/20',
quote:
'We replaced four legacy spreadsheets and two disjointed SaaS subscriptions with UIPKGE blocks. Onboarding time dropped from 6 days to under 4 hours.',
subquote:
'The unbundled registry architecture gave our engineers total ownership without ever dealing with broken npm updates or rigid vendor locks.',
rating: 5,
verifiedBadge: 'Verified Enterprise Customer · 2,400+ Seats',
metrics: [
{ label: 'Onboarding Velocity', value: '< 4 hours', trend: '-88% time' },
{ label: 'SaaS Tooling Spend', value: '$140k / yr', trend: 'Saved' },
{ label: 'Employee NPS', value: '+74', trend: 'Top Decile' },
],
stack: ['Vue 3.5', 'Tailwind CSS v4', 'PostgreSQL', 'SCIM Okta'],
},
{
id: '2',
name: 'Marco Vidal',
role: 'Director of Information Security',
company: 'Helio Health Systems',
industry: 'healthtech',
initials: 'MV',
avatarBg: 'bg-success/10 text-success border-success/20',
quote:
'SOC 2 and HIPAA evidence collection went from a grueling quarterly nightmare to a continuous, automated background audit trail.',
subquote:
'Our external auditors completed our Type II examination in record time because every UI state change is cryptographically verifiable.',
rating: 5,
verifiedBadge: 'Verified Healthcare Provider · HIPAA Tier 1',
metrics: [
{ label: 'Audit Prep Duration', value: '1.5 days', trend: 'Down from 3 wks' },
{ label: 'Compliance Adherence', value: '100.0%', trend: '142 Controls' },
{ label: 'Zero Trust Rollout', value: '14 Days', trend: '100% Org' },
],
stack: ['React 19', 'Reka UI Primitives', 'Cloudflare Workers', 'AuditLog API'],
},
{
id: '3',
name: 'Tomoko Saito',
role: 'Staff Infrastructure Architect',
company: 'Pixel & Co Engine Labs',
industry: 'devtools',
initials: 'TS',
avatarBg: 'bg-chart-1/10 text-chart-1 border-chart-1/20',
quote:
'My favourite part is how blazing fast it is. Sub-20ms P99 search latencies across 50,000 workforce records without a single loading spinner.',
subquote:
'Keyboard shortcuts for every workflow make our engineering managers feel like they are operating a sleek CLI rather than a web dashboard.',
rating: 5,
verifiedBadge: 'Verified DevTools Customer · 450+ Devs',
metrics: [
{ label: 'P99 Edge Latency', value: '18ms', trend: 'Global Edge' },
{ label: 'Daily Hotkey Actions', value: '42k / day', trend: '+310%' },
{ label: 'Memory Footprint', value: '< 12MB', trend: 'Zero bloat' },
],
stack: ['Vue 3.5', 'Vite', 'Turborepo', 'WebAssembly'],
},
{
id: '4',
name: 'Julian Montgomery',
role: 'Chief Financial Officer',
company: 'Vanguard FinTech Matrix',
industry: 'fintech',
initials: 'JM',
avatarBg: 'bg-warning/10 text-warning border-warning/20',
quote:
'Multi-currency payroll runs across 34 countries used to require 5 days of manual reconciliation. Now it settles automatically with zero FX fee slippage.',
subquote:
'Direct ledger sync and real-time tax calculations give our board instant visibility into gross-to-net runway.',
rating: 5,
verifiedBadge: 'Verified FinTech Customer · $800M+ Volume',
metrics: [
{ label: 'Payroll Settlement', value: 'Instant', trend: 'FedNow / SEPA' },
{ label: 'FX Reconciliation', value: '0.00%', trend: 'Zero error' },
{ label: 'Tax Auto-filing', value: '34 Regs', trend: 'Statutory' },
],
stack: ['React 19', 'Next.js', 'Tailwind v4', 'Stripe Treasury'],
},
]
export function Testimonials01() {
const [activeIndex, setActiveIndex] = React.useState(0)
const [activeIndustry, setActiveIndustry] = React.useState<'all' | 'saas' | 'healthtech' | 'fintech' | 'devtools'>(
'all',
)
const [isAutoPlaying, setIsAutoPlaying] = React.useState(true)
const filteredTestimonials = React.useMemo(() => {
if (activeIndustry === 'all') return testimonials
return testimonials.filter((t) => t.industry === activeIndustry)
}, [activeIndustry])
const next = React.useCallback(() => {
setActiveIndex((prev) => (prev + 1) % filteredTestimonials.length)
}, [filteredTestimonials.length])
const prev = React.useCallback(() => {
setActiveIndex((prev) => (prev - 1 + filteredTestimonials.length) % filteredTestimonials.length)
}, [filteredTestimonials.length])
React.useEffect(() => {
if (!isAutoPlaying) return
const timer = setInterval(() => {
next()
}, 6500)
return () => clearInterval(timer)
}, [isAutoPlaying, next])
const activeTestimonial = filteredTestimonials[activeIndex] ?? filteredTestimonials[0]
return (
<section
data-slot="testimonials-01"
className="bg-background border-border relative w-full overflow-hidden border-y py-16 lg:py-24"
>
<div className="mx-auto max-w-7xl space-y-12 px-4 sm:px-6 lg:px-8">
{/* Section Header */}
<div className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
<div className="max-w-2xl space-y-3">
<div className="inline-flex items-center gap-2">
<Badge
variant="outline"
className="border-primary/30 text-primary bg-primary/5 gap-1.5 px-2.5 py-1 font-mono text-xs tracking-wide uppercase"
>
<BadgeCheck className="size-3.5" />
Verified Case Studies
</Badge>
<span className="text-muted-foreground font-mono text-xs">Real-World Customer Telemetry</span>
</div>
<h2 className="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
Trusted by the Teams Building the Future.
</h2>
<p className="text-muted-foreground text-base leading-relaxed sm:text-lg">
See how high-growth scaleups and enterprise leaders accelerate engineering velocity and operational
clarity.
</p>
</div>
{/* Industry Filter Switcher */}
<div className="bg-muted/60 border-border flex flex-wrap items-center gap-1.5 rounded-lg border p-1">
{[
{ id: 'all', label: 'All Industries' },
{ id: 'saas', label: 'Enterprise SaaS' },
{ id: 'healthtech', label: 'HealthTech' },
{ id: 'devtools', label: 'Developer DX' },
{ id: 'fintech', label: 'FinTech' },
].map((cat) => (
<button
key={cat.id}
type="button"
className={cn(
'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
activeIndustry === cat.id
? 'bg-background text-foreground font-semibold shadow-xs'
: 'text-muted-foreground hover:text-foreground',
)}
onClick={() => {
setActiveIndustry(cat.id as any)
setActiveIndex(0)
}}
>
{cat.label}
</button>
))}
</div>
</div>
{/* Featured Testimonial Canvas */}
<Card className="bg-card border-border overflow-hidden shadow-md">
<div className="grid grid-cols-1 lg:grid-cols-12">
{/* Left Main Quote Area (7 cols) */}
<div className="flex flex-col justify-between space-y-8 p-6 sm:p-10 lg:col-span-7">
<div className="space-y-6">
{/* Rating & Badge */}
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="text-warning flex items-center gap-1">
{Array.from({ length: activeTestimonial.rating }).map((_, s) => (
<Star key={s} className="fill-warning size-4" />
))}
</div>
<Badge
variant="outline"
className="border-success/20 bg-success/10 text-success gap-1.5 font-mono text-xs"
>
<CheckCircle2 className="size-3" />
{activeTestimonial.verifiedBadge}
</Badge>
</div>
{/* Quote Content */}
<div className="relative space-y-3">
<Quote className="text-primary/20 absolute -top-4 -left-3 -z-10 size-8" />
<p className="text-foreground text-xl leading-relaxed font-medium tracking-tight sm:text-2xl">
“{activeTestimonial.quote}”
</p>
<p className="text-muted-foreground text-sm leading-relaxed">{activeTestimonial.subquote}</p>
</div>
</div>
{/* Author Info & Controls */}
<div className="border-border flex flex-col justify-between gap-4 border-t pt-6 sm:flex-row sm:items-center">
<div className="flex items-center gap-3.5">
<div
className={cn(
'flex size-11 items-center justify-center rounded-full border text-sm font-bold',
activeTestimonial.avatarBg,
)}
>
{activeTestimonial.initials}
</div>
<div>
<h4 className="text-foreground text-sm font-semibold">{activeTestimonial.name}</h4>
<p className="text-muted-foreground text-xs">
{activeTestimonial.role} ·{' '}
<span className="text-foreground font-medium">{activeTestimonial.company}</span>
</p>
</div>
</div>
{/* Navigation Buttons */}
<div className="flex items-center gap-2">
<Button
variant="outline"
size="icon"
className="size-8 rounded-lg"
aria-label="Previous customer story"
onClick={prev}
>
<ChevronLeft className="size-4" />
</Button>
<Button
variant="outline"
size="icon"
className="size-8 rounded-lg"
aria-label={isAutoPlaying ? 'Pause rotation' : 'Resume rotation'}
onClick={() => setIsAutoPlaying(!isAutoPlaying)}
>
{isAutoPlaying ? <Pause className="text-primary size-3.5" /> : <Play className="size-3.5" />}
</Button>
<Button
variant="outline"
size="icon"
className="size-8 rounded-lg"
aria-label="Next customer story"
onClick={next}
>
<ChevronRight className="size-4" />
</Button>
</div>
</div>
</div>
{/* Right Telemetry & Metrics Sidebar (5 cols) */}
<div className="bg-muted/20 border-border flex flex-col justify-between space-y-6 border-t p-6 sm:p-8 lg:col-span-5 lg:border-t-0 lg:border-l">
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-muted-foreground font-mono text-xs tracking-wider uppercase">
Impact Telemetry
</span>
<span className="text-success font-mono text-xs">Production Validated</span>
</div>
{/* Metrics Grid */}
<div className="space-y-3">
{activeTestimonial.metrics.map((m) => (
<div
key={m.label}
className="border-border bg-card/80 flex items-center justify-between rounded-lg border p-3.5 shadow-xs"
>
<div>
<p className="text-muted-foreground text-xs">{m.label}</p>
<p className="text-foreground mt-0.5 text-lg font-bold tracking-tight">{m.value}</p>
</div>
<Badge variant="secondary" className="bg-success/10 text-success font-mono text-xs font-semibold">
{m.trend}
</Badge>
</div>
))}
</div>
{/* Stack Tags */}
<div className="space-y-2 pt-2">
<p className="text-muted-foreground font-mono text-xs tracking-wider uppercase">
Tech Stack Architecture
</p>
<div className="flex flex-wrap gap-1.5">
{activeTestimonial.stack.map((tech) => (
<Badge key={tech} variant="outline" className="bg-background font-mono text-xs">
{tech}
</Badge>
))}
</div>
</div>
</div>
{/* Story Navigation Dots */}
<div className="border-border/60 flex items-center justify-between border-t pt-4">
<div className="flex items-center gap-1.5">
{filteredTestimonials.map((t, i) => (
<button
key={t.id}
type="button"
aria-label={`Jump to testimonial ${i + 1}`}
className={cn(
'h-1.5 rounded-full transition-colors duration-300',
i === activeIndex
? 'bg-primary w-6'
: 'bg-muted-foreground/30 hover:bg-muted-foreground/60 w-2',
)}
onClick={() => setActiveIndex(i)}
/>
))}
</div>
<span className="text-muted-foreground font-mono text-xs">
{activeIndex + 1} of {filteredTestimonials.length} Stories
</span>
</div>
</div>
</div>
</Card>
</div>
</section>
)
}
export default Testimonials01
Raw manifest:https://uipkge.dev/r/react/testimonials-01.json
