shared · Page blocks

ByIdSection

components/landing/by-id-section.tsx

preview

[03]Change by ID

Point at it.
Change exactly that.

Coherent labels every component in the code, like CID-008, and every token has a name. Say what you want in plain words, or name it: the edit is held to that component or token, and every page that uses it follows.

"CID-008: make the number bigger"

Only KpiCard's file may change. Coherent renders the 3 pages that use it and checks that a sample of other pages stays pixel-identical.

"--radius: a little rounder"

A token: every page follows. Coherent rebuilds the app and renders the pages it reaches; any it could not render are named in the verdict.

"Only on Billing, move the table up"

The table is shared. The Coherent agent is set up to ask first: a new component just for Billing, or change it everywhere?

"Add a weekly digest note to Notifications"

It becomes a component, Callout, with its own ID and preview, ready to reuse on the next page.

usage · in this app

app/page.tsx

import { ByIdSection } from '@/components/landing/by-id-section'

<ByIdSection />

props

{}

used on · 1

tokens · 16

referenced in its file

--accent --background --border --border-strong --elevated --fg-dim --fg-muted --foreground --leading-copy --leading-display --surface --text-body --text-display-lg --text-display-sm --text-ui --tracking-heading

history · 2

verified

Previews for the site components

2026-10-21

verified

Home: every section is its own component; the page composes them

2026-10-21

Coherent Design MethodGitHubDesign system read from this app's code

ByIdSection

Point at it.Change exactly that.

Point at it.
Change exactly that.