CoherentDS
shared · Page blocks

BrowserShot

components/site/BrowserShot.tsx

preview
localhost:3000/design-system
The design system of a real app
usage · in this app
components/site/DsTour.tsx
import { BrowserShot } from '@/components/site/BrowserShot'

<BrowserShot shot={t.key} url={t.url} alt={`${t.title}: a page of the generated design system`} />
props
{ shot: string url: string alt: string priority?: boolean className?: string }
used on · 1
/
tokens · 8
referenced in its file
--border--border-strong--elevated--fg-dim--shadow-frame--surface--surface-2--text-caption
history · 2
verified
Previews for the site components
2026-10-21
verified
Components: hardcoded sizes, colors, radii and shadows replaced with the site tokens
2026-10-21
Coherent Design MethodGitHubDesign system read from this app's code