# Home Principle

> How-we-work principles band with editable CONTENT and PRINCIPLES.

A shadcn/ui block from the [@atroui](https://www.atroui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/atroui/home-principle).

- Page, with a live preview: https://shadcn.exchange/r/atroui/home-principle
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/atroui/home-principle-light-a74f4fac63c8de6b.png
- Registry item: https://www.atroui.com/r/home-principle.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.atroui.com/r/home-principle.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/default/blocks/home-principle.tsx`

```tsx
/**
 * Edit CONTENT / PRINCIPLES to match your studio.
 * Matches the AtroUI docs Home Principle band.
 */
const CONTENT = {
  stamp: "How we work",
  headlineBefore: "You talk to the person who",
  headlineAccent: "builds it",
  headlineAfter: ".",
}

const PRINCIPLES = [
  {
    title: "Fixed scope",
    status: "Locked",
    detail: "Agreed before day one - no creep theatre.",
    tone: "ok" as const,
  },
  {
    title: "Fixed price",
    status: "Guaranteed",
    detail: "$4,800 MVP · from $2,400 AI feature.",
    tone: "brand" as const,
  },
  {
    title: "No handoffs",
    status: "Direct",
    detail: "One senior engineer. Not your 14th channel.",
    tone: "warm" as const,
  },
]

const toneText = {
  ok: "text-emerald-700 dark:text-emerald-400",
  brand: "text-[var(--color-brand,#0b7bff)]",
  warm: "text-amber-800 dark:text-amber-400",
} as const

const toneDot = {
  ok: "bg-emerald-700 dark:bg-emerald-400",
  brand: "bg-[var(--color-brand,#0b7bff)]",
  warm: "bg-amber-800 dark:bg-amber-400",
} as const

export function HomePrinciple() {
  return (
    <section className="border-t border-border-subtle">
      <div className="border-b border-border-subtle">
        <div className="mx-auto max-w-7xl border-x border-border-subtle px-6 py-12 sm:px-10 sm:py-16">
          <div className="max-w-2xl">
            <p className="text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
              {CONTENT.stamp}
            </p>
            <h2 className="mt-4 text-3xl font-medium tracking-tight text-foreground sm:text-5xl">
              {CONTENT.headlineBefore}{" "}
              <span className="italic text-[var(--color-brand,#0b7bff)]">
                {CONTENT.headlineAccent}
              </span>
              {CONTENT.headlineAfter}
            </h2>
          </div>
        </div>
      </div>

      <div className="border-b border-border-subtle">
        <div className="mx-auto max-w-7xl border-x border-border-subtle">
          <ol className="grid grid-cols-1 divide-y divide-border-subtle md:grid-cols-3 md:divide-x md:divide-y-0">
            {PRINCIPLES.map((item, i) => (
              <li key={item.title} className="p-6 sm:p-8">
                <p className="font-mono text-[11px] tabular-nums text-muted-foreground">
                  {String(i + 1).padStart(2, "0")}
                </p>
                <h3 className="mt-3 text-lg font-medium text-foreground">
                  {item.title}
                </h3>
                <p
                  className={`mt-2 flex items-center gap-1.5 text-sm font-medium ${toneText[item.tone]}`}
                >
                  <span
                    className={`size-1.5 shrink-0 rounded-full ${toneDot[item.tone]}`}
                    aria-hidden
                  />
                  {item.status}
                </p>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                  {item.detail}
                </p>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  )
}
```