# Site

> A whole product website in page files: home, pricing, a blog with a page per post, a changelog, about, and contact, with one navbar and footer, ready to run in a Next.js app.

- Name: `site`
- Status: beta
- Categories: site, marketing, pages
- Files: the install writes `site.tsx`, and any part files named `site-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- npm packages: `class-variance-authority`, `lucide-react`. The install adds them.
- Other registry items: `@arbokui/button-variants`, `@arbokui/navbar`, `@arbokui/footer`, `@arbokui/hero`, `@arbokui/landing-page`, `@arbokui/pricing-page`, `@arbokui/contact-page`, `@arbokui/about-page`, `@arbokui/blog-page`, `@arbokui/post-page`, `@arbokui/post-grid`, `@arbokui/changelog-page`, `@arbokui/changelog`. The install adds them.
- Gallery: https://arbokui.com/templates/site
- Registry item: https://arbokui.com/r/site.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the template. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/site
   ```

## Use it for

- A new product website in a Next.js app. Install it, and each page lands at its route, like app/pricing/page.tsx.
- Start from a new app. It writes app/page.tsx as your home page, and shadcn asks before it replaces yours.
- Edit each page's words in its own file, like site-pricing.tsx. The navbar, the footer, and your logo live in site.tsx, so every page shares them.
- Add a post in two places: its card in site-posts.ts, and its body in site-post-bodies.tsx, under the same slug. Each post gets its own page at /blog/\<slug> when you build.
- Write each body in plain HTML, with two or more h2s for its list of sections. Give each h2 an id, so a link to a section works before the page's code loads. The body renders on the server, so it is not sent as code.
- Add a release at the top of site-releases.ts. Its version is also its id, so a link to /changelog#3-11 lands on it.
- Connect the contact form in site-contact-action.ts, which runs on your server. Until you do, the form says the message did not send.
- Each page loads only its own parts, so a visit to one page does not load the others.

## Avoid it for

- An app that already has these routes. Install the page templates one at a time instead, like Pricing Page.
- A route group, like app/(site)/. Next.js builds it beside app/page.tsx with no warning, and the starter page wins.

## Props

None.

## Accessibility

- Every page has one main, one h1, and the same navbar and footer, and the navbar marks the page you are on.
- Each page sets its own title and description, so each tab and search result says which page it is.
- Each page template keeps its own accessibility, listed on its page.

## Examples

### Install the whole site

```tsx
npx shadcn@latest add @arbokui/site
```

### Send the contact form with your email service

```tsx
"use server";

export async function sendMessage(values: Record<string, string>) {
  const response = await fetch("https://api.example.com/send", {
    method: "POST",
    body: JSON.stringify(values),
  });
  if (!response.ok) throw new Error("Not sent");
}
```