Shadcn.io is not affiliated with official shadcn/ui
About Values Bento
An asymmetric bento grid values block for React and Next.js with featured value stories, colored left-border accents, nested example narratives, and staggered scale entrance animations built with shadcn/ui and Tailwind CSS
Showcase your company values in a visually striking asymmetric grid with this bento values block for React and Next.js. Features six value cells with two featured col-span-2 panels containing real example stories, colored left-border accents per value, and staggered scale entrance animations. Built with TypeScript, motion/react animations, and Tailwind CSS. Perfect for about pages, culture sections, and employer branding sites.
Related Components
Values Cloud
Values displayed as a tag cloud of varying sizes
Values Slider
Values shown one at a time with navigation
Principles
Numbered guiding principles list
Mission Pillars
Mission with supporting strategic pillars
Philosophy
Company philosophy and beliefs
Company DNA
Core company identity and culture markers
FAQ
Was this page helpful?
Sign in to leave feedback.
Use Cases
A bento grid use cases block for React and Next.js with asymmetric industry cards, customer count badges, key metric highlights, feature lists, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Values Cloud
A tag cloud values block for React and Next.js with varying pill sizes, hover state interactions, weighted primary values, explanatory paragraph, and fade entrance animations built with shadcn/ui and Tailwind CSS