Vision Mission Values
Three-column cards for vision, mission, and values with labeled headers. Clean editorial layout for company positioning.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/vision-mission-values.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about16.tsx instead.
Usage
The file also exports about16Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { About16, about16Demo } from "@/components/blocks/about/about16"; export default function Page() { return <About16 {...about16Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | undefined | Optional heading above the three cards. |
| pillars | ValuePillar[] | none | Cards; typically vision, mission, and values, but the array accepts any labels. |
| className | string | none | Extra classes for the outer section element. |
Types
type ValuePillar = { icon: LucideIcon; label: string; description: string; };
Behavior notes
- pillars is not restricted to exactly "Vision"/"Mission"/"Values"; label is a free-form string, so the same component works for any labeled 3-card grid, not just this specific trio.
- heading is optional; when omitted, the grid's top margin is removed rather than left as blank space, the same pattern used by About8.
- icon is a LucideIcon component reference (e.g. Compass imported from lucide-react), not a string name; the component renders it directly as <pillar.icon />.
More About Blocks
View all →team-mission
Team & Mission
Two-column about section with mission statement, company stats, and team member grid.
values-with-team-photo
Values with Team Photo
Full-width photo with a three-column values grid below.
timeline-milestones
Timeline & Milestones
Company stats on the left and a vertical timeline of milestones on the right.
founder-quote-team
Founder Quote & Team
Founder blockquote with avatar, followed by a horizontal team member row.
image-text-split
Image & Text Split
Tall image on the left, company story, inline stats, and CTAs on the right.
numbered-principles
Numbered Principles
Heading on the left and numbered company principles on the right.