Shadcn.io is not affiliated with official shadcn/ui
About 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
Present your company values one at a time with this interactive slider block for React and Next.js. Features five values with prev/next arrow navigation, directional horizontal slide animations via AnimatePresence, a practical example for each value, a supporting metric, and dot pagination. Built with TypeScript, shadcn/ui Button component, motion/react AnimatePresence animations, and Tailwind CSS. Perfect for about pages, onboarding flows, and culture presentations.
Related Components
Values Bento
Asymmetric bento grid of company values
Values Cloud
Values displayed as a tag cloud of varying sizes
Principles
Numbered guiding principles list
Philosophy
Company philosophy and beliefs
Mission Pillars
Mission with supporting strategic pillars
Commitments
Company commitments and pledges
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Video Split
A split-panel video block for React and Next.js with video placeholder area, PlayCircle icon, key topics list, duration badge, watch now CTA, and divide-x layout built with shadcn/ui and Tailwind CSS