Landing pages, zero fuss.

Config-driven

All page content lives in site-config.ts. No JSX, no HTML — just a typed SiteConfig object.

Dark by default

Semantic design tokens (bg-surface, text-heading, border-edge) ready to use. Override any token to reskin the whole theme.

GitHub Pages ready

The init CLI writes .github/workflows/pages.yml automatically. Push and set the source — done.

Six composable components

Hero, FeatureGrid, DataTable, CodeCardGrid, ApiList, and Section — mix and match in any order.

Zero surprise setup

The CSS import, @source path, and base path are all pre-wired by the CLI. No manual config hunting.

Fully customizable

Every color, radius, and spacing value is a CSS custom property. Override in @theme — no config file needed.

Scaffold

npx @mcptoolshop/site-theme init
cd site && npm install
npm run dev

Edit your content

// site/src/site-config.ts
export const config: SiteConfig = {
  title: '@mcptoolshop/my-tool',
  description: 'What my tool does.',
  logoBadge: 'MT',
  brandName: 'my-tool',
  hero: { /* ... */ },
  sections: [ /* ... */ ],
};

Override design tokens

/* site/src/styles/global.css */
@import "tailwindcss";
@import "@mcptoolshop/site-theme/styles/theme.css";
@source "../../node_modules/@mcptoolshop/site-theme";

@theme {
  --color-accent: #60a5fa;      /* blue accent  */
  --color-surface: #0a0a1a;     /* dark navy    */
  --color-action: #60a5fa;
}

Deploy to GitHub Pages

# 1. Push to GitHub
git push

# 2. Repo → Settings → Pages → Source → "GitHub Actions"
# 3. Push any change to site/ to trigger a deploy