Staaarter

Vision Mission Values

Three-column cards for vision, mission, and values with labeled headers. Clean editorial layout for company positioning.

By Staaarter Team
About
Docs
Live preview

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.json

Prefer 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

PropTypeDefaultDescription
headingstringundefinedOptional heading above the three cards.
pillarsValuePillar[]noneCards; typically vision, mission, and values, but the array accepts any labels.
classNamestringnoneExtra 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 />.