Shadcn.io is not affiliated with official shadcn/ui
About Principles
A company principles block for React and Next.js with vertical numbered timeline, connecting lines between principle nodes, test questions in italic, expandable details, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Define how your team operates with this principles timeline block for React and Next.js. Features seven numbered principles in a vertical timeline layout with connecting lines between nodes, principle titles and descriptions, italic test questions that make each principle actionable, and staggered entrance animations. Built with TypeScript, shadcn/ui Badge component, motion/react staggered animations, and Tailwind CSS. Perfect for about pages, culture sections, and employee handbooks.
Related Components
Operating Principles
Detailed operating principles with examples
Philosophy
Company beliefs and worldview
Manifesto
Bold company declarations
Mission Pillars
Mission with supporting pillars
Company DNA
Founding principles and core identity
Commitments
Company commitments and pledges
FAQ
Was this page helpful?
Sign in to leave feedback.
Pricing Philosophy
A pricing philosophy block for React and Next.js with numbered principles, left-accent colored cards, expandable real-world examples, and slide-from-left entrance animations built with shadcn/ui and Tailwind CSS
Problem Solution
A problem-solution split panel block for React and Next.js with matched pain point and solution pairs, red X and green check icons, impact badges per solution, connecting arrows between pairs, and staggered entrance animations built with shadcn/ui and Tailwind CSS