Shadcn.io is not affiliated with official shadcn/ui
About 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
Display your company values as an organic tag cloud with this values cloud block for React and Next.js. Features 12 value pills of varying sizes with a weighted primary value, subtle hover interactions, and an explanatory paragraph highlighting the top three values. Built with TypeScript, shadcn/ui Badge component, motion/react fade entrance animations, and Tailwind CSS. Perfect for about pages, culture sections, and brand identity pages.
Related Components
Values Bento
Asymmetric bento grid of company values
Values Slider
Values shown one at a time with navigation
Principles
Numbered guiding principles list
Commitments
Company commitments and pledges
Mission Pillars
Mission with supporting strategic pillars
Design Principles
Product design philosophy and values
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Values Slider
An interactive values slider block for React and Next.js with prev/next navigation, directional horizontal slide animations, practice examples, value metrics, and dot pagination built with shadcn/ui and Tailwind CSS