Shadcn.io is not affiliated with official shadcn/ui
About Operating Principles
An operating principles block for React and Next.js with colored left-accent card stack, monospace numbering, decision test questions, expandable detail sections, and staggered slide-from-left animations built with shadcn/ui and Tailwind CSS
Define how your company operates with this left-accent card stack block for React and Next.js. Features six operating principles as individually bordered cards with colored left accents, monospace numbering, italic decision-test questions, and expandable detail sections with real examples. Built with TypeScript, shadcn/ui Badge component, motion/react from-left staggered entrance animations with AnimatePresence, and Tailwind CSS. Perfect for company handbooks, about pages, and onboarding documentation.
Related Components
Company DNA
Core founding beliefs and values
Principles
Numbered company principles list
Philosophy
Company philosophy and beliefs
Decision Framework
How we make decisions
Commitments
Company commitments and pledges
Culture Behaviors
Do and don't behavioral contrasts
FAQ
Was this page helpful?
Sign in to leave feedback.
Open Source
An open-source project showcase bento grid block for React and Next.js with featured project hero cells, star counts, language badges, contributor stats, and staggered scale entrance animations built with shadcn/ui and Tailwind CSS
Origin Story
An origin story timeline block for React and Next.js with vertical rail, year markers, chapter titles, narrative paragraphs, alternating entrance animations, and current milestone highlight built with shadcn/ui and Tailwind CSS