Customization

Name and description

The site name and default description come from NEXT_PUBLIC_SITE_NAME and NEXT_PUBLIC_SITE_META_DESCRIPTION. Change them in .env and they update in the header, the footer, the page titles (through the %s | Site Name template), and the metadata. The rest of the site-wide metadata, including keywords, Open Graph, and Twitter cards, is in src/app/layout.tsx. The JSON-LD structured data is in src/lib/schema.ts.

Colours and theme

The theme is defined in src/app/globals.css with Tailwind CSS v4’s @theme block. It holds a stone neutral ramp, an orange accent ramp, and the semantic tokens shadcn/ui reads, such as --color-primary and --color-destructive. The .dark block below it overrides the semantic tokens for dark mode. There is no tailwind.config.js to edit for colours.

To rebrand, replace the orange ramp with your accent colour and keep the step names. Every component then picks up the change. The colour foundations on the components page show every ramp and token as it renders now.

Light and dark mode are handled by next-themes. The default follows the visitor’s system setting, and the toggle in the header overrides it. The provider is configured in src/app/layout.tsx.

Logo

The logo mark and name are in src/components/header/logo.tsx. The footer draws its own copy of the mark in src/components/footer/index.tsx, so update both. The favicon is src/app/favicon.ico, and the social share image is generated by src/app/opengraph-image.tsx.

Header navigation

The header links and the call-to-action button are both defined in src/components/header/navigation-items.ts, and the mobile menu reads the same list. An item’s href decides how it behaves:

#features

Scrolls to the section with that id on the home page. From any other route it goes home first, then scrolls.

/docs

Renders a real link to another route, so it can be opened in a new tab and followed by search engines.

Set headerCta to null to remove the button from both the header and the mobile menu.

Footer

src/components/footer/index.tsx holds the brand column, the Resources links, and the bottom bar with the copyright and the privacy link. The Quick Links column comes from src/components/footer/quick-links.tsx. Like the header, its items scroll to a section or link to a route depending on their href. The privacy link should stay on every page: the UK GDPR expects the notice to be reachable wherever data is collected.

The landing page

In the full starting point, the home page is assembled in src/components/landing-page/index.tsx from one component per section: hero, about, tech stack, features, and getting started. Reorder, edit, or delete them there. Each section’s id is what the # links in the header and footer scroll to, so update those if you rename or remove one.

In the blank starting point, the home page is just src/app/page.tsx.

Components

UI components live in src/components/ui. They are shadcn/ui components (Button, Card, Carousel, and Tooltip) built on Radix primitives. Add more with the shadcn CLI, which reads components.json to put them in the right place:

npx shadcn@latest add dialog

Dialog is one example. The shadcn/ui component directory lists everything else you can add the same way, including accordions, forms, tabs, data tables, and menus. Each entry has a live preview and the exact add command.

The components page shows every variant, size, and state with the code for each. It imports the real components, so it cannot drift from what ships. To list a new component there, add an entry to src/components/ui-components/sections.ts and a matching section component.

Example content to replace

src/app/privacy/page.tsx

The privacy notice. It reads your analytics configuration, so it describes what the site actually does, but review it against your own site before launch. Bump the LAST_UPDATED constant whenever its substance changes.

src/lib/changelog.ts

The entries behind /whats-new, if you cloned the repository by hand. Empty both arrays and the route disappears, along with its navigation entries and sitemap listing. Add your first entry and it comes back. Projects created with the CLI have this removed already.

/docs

These docs, in the full starting point. To remove them, delete src/app/docs, src/components/docs, src/lib/docs.ts, and tests/docs-pages.spec.ts. Then remove the /docs entries from the footer quick links, the sitemap, and the landing page’s Getting Started section.