React Company Values Block

React company values with expandable quotes and word-level stagger animation using shadcn/ui, Tailwind CSS, and Framer Motion.

React and Next.js company values block built with TypeScript, shadcn/ui, and Tailwind CSS. Each value is a clickable row that expands to reveal a real team member quote that staggers in word by word with a blur-to-clear effect powered by Framer Motion's AnimatePresence. Perfect for culture pages, career sites, and about sections.

React Company Values Block preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/team-animated-values.json

npx shadcn@latest add https://www.shadcn.io/r/team-animated-values.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/team-animated-values.json

bunx shadcn@latest add https://www.shadcn.io/r/team-animated-values.json

Team Block Culture Values

Static expandable values with team quotes

Team Block Animated Quotes

Auto-cycling quote wall with word stagger

Team Block Founders Story

Narrative-driven founder spotlight

Team Block Animated Org Chart

Expandable animated hierarchy

Team Block Accordion Profiles

Expandable rows revealing full bios

Team Block Compact List

Dense list with department chips

FAQ

Last updated on March 17, 2026

Was this page helpful?

React Company Hiring Timeline Block

React animated hiring timeline with staggered entrance and pulsing dots using shadcn/ui, Tailwind CSS, and Framer Motion.

React Team Anniversaries Block

React work anniversary milestone section grouped by tenure with expandable rows using shadcn/ui and Tailwind CSS.

React Company Values Block