Why Polaris
A two-column comparison block: an emphasized, primary-bordered column of positive statements labeled with the studio's own name, next to a plainer, muted column of contrasting statements labeled as a typical agency.
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/why-polaris.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/agency/agency19.tsx instead.
Usage
The file also exports agency19Demo, 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 { Agency19, agency19Demo } from "@/components/blocks/agency/agency19"; export default function Page() { return <Agency19 {...agency19Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | ReactNode | none | Centered section heading above the comparison. |
| description | string | undefined | Centered supporting text under the heading. |
| polarisLabel | string | "The Polaris way" | Label for the emphasized left column. |
| typicalLabel | string | "A typical agency" | Label for the muted right column. |
| polarisPoints | string[] | none | Positive statements listed in the emphasized column, each prefixed with a check icon. |
| typicalPoints | string[] | none | Contrasting statements listed in the muted column, each prefixed with an X icon. |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- Fully static server component; no interactivity, both columns render directly from the `polarisPoints`/`typicalPoints` arrays.
- "Polaris" is this block's own fictional demo agency name, the same convention as About's fictional company names like Northwind or Globex; swap `polarisLabel` to rebrand it, it isn't a real product tie-in.
- The two point arrays are rendered independently and are not required to be the same length, though the demo data pairs them one-to-one for a clean visual contrast.
More Agency Blocks
View all →case-study-hero
Case Study Hero
A case study header with project metadata grid, service tags, and featured image.
studio-manifesto
Studio Manifesto
Oversized editorial manifesto statement with emphasized phrases, principle chips and a founder signature.
studio-values
Studio Values
Studio values laid out with oversized ghost numerals, titles, descriptions and keywords.
how-we-think
How We Think
Sticky studio intro with a portrait beside a stack of numbered principles.
studio-team
Studio Team
A studio team grid of member portraits with names and roles.
awards-list
Awards List
Editorial list of studio awards by year with project and recognition details.