Staaarter

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.

By Staaarter Team
Agency
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/why-polaris.json

Prefer 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

PropTypeDefaultDescription
headingReactNodenoneCentered section heading above the comparison.
descriptionstringundefinedCentered supporting text under the heading.
polarisLabelstring"The Polaris way"Label for the emphasized left column.
typicalLabelstring"A typical agency"Label for the muted right column.
polarisPointsstring[]nonePositive statements listed in the emphasized column, each prefixed with a check icon.
typicalPointsstring[]noneContrasting statements listed in the muted column, each prefixed with an X icon.
classNamestringnoneExtra 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.