Loading docs page
How to use the shared UI components and docs previews.
Reach for the existing shared components before building page-specific wrappers. That keeps the site, docs, and product surfaces moving in the same direction.
Use PreviewCode when a docs page needs a live example plus the exact snippet that produced it.
Use the real component, then show the exact code that generated it.
1<Button variant="soft" tone="neutral" radius="full">Open docs</Button>| Need | Start here |
|---|---|
| Shared buttons, inputs, badges, and callouts | src/components/ui/* |
| Headers, footers, shell behavior, and navigation | src/components/layout/* |
| Logos and brand presentation | src/components/brand/* |
| Public marketing sections | src/components/marketing/* |
If you are only changing a page composition, keep that change local. If you are changing a shared pattern, edit the shared layer directly.