Getting started with Nightgrid

Nightgrid is a dark, single-accent Astro theme for a software product site. It is built with Astro 7 and Tailwind CSS 4 and produces a static site: there is no server code.

This page covers installing the theme, the layout of the project and the first changes to make. README.md and the docs/ folder in the root directory provide the full reference.

Requirements#

• Node.js 22.12.0 or newer. The .nvmrc file selects Node 22.
• npm, which is installed with Node.js. The theme ships a package-lock.json, so the commands on this page use npm.

Check what you have:

node -v
npm -v

Browser support#

The theme needs a current browser: Chrome and Edge 111 or newer, Safari 16.4 or newer (iOS 16.4), Firefox 128 or newer. These are the versions Tailwind CSS 4 is built for (Tailwind CSS compatibility, read on 2026-10-25). Older browsers load the page without its styles.

Install and run#

Unpack the download (or clone your copy of the repository), then run these from the project folder:

npm install
npm run dev

The development server prints the local address to open. Changes you save show up in the browser.

Project layout#

Site settings and page text live in configuration and data files, so most changes need no edit in a component.

README.md               The quickstart guide
docs/                   Detailed customization and setup guides
CHANGELOG.md            Changes to the theme itself
AGENTS.md               Instructions for AI coding assistants; points to DESIGN.md
DESIGN.md               The design rules of the theme and how to build new parts
astro.config.mjs        Astro configuration (site URL, base path, trailing slashes, prefetch)
.env.example            Optional settings (site URL, base path, form addresses)
src/
  site.config.ts        Name, URL, navigation, footer links, SEO, announcement
  theme.config.ts       The visual preset: colors, borders, corners, glow, font
  content.config.ts     Content collection schemas (docs, blog, changelog, legal)
  content/              Markdown files
    docs/               Documentation articles (like this page)
    blog/               Blog articles
    changelog/          Release notes
    legal/              privacy.md and terms.md
  data/                 The text and lists of every page section
    home.ts             Home page sections
    about.ts            About page: story, facts, values and team
    contact.ts          Contact page: routes, links and the form
    pricing.ts          Plans, the comparison table and the pricing questions
    ui.ts               Button labels, screen-reader text and other interface text
  pages/                One file per route, plus rss.xml, sitemap.xml and robots.txt
  components/           Shared parts, header and footers, page sections
  styles/               Design tokens (global.css) and fonts

Commands#

First changes#

1. Name and address in src/site.config.ts: name, tagline, description and url.
2. Look in src/theme.config.ts: pick one of the four presets (nightgrid, midnight-slate, emerald-calm, pitch-monochrome), or override the accent color, the background, the borders, the corner radius, the button shape, the glow or the font.
3. Forms. The contact form and the footer newsletter field are previews that send nothing until you give each one an address. See Service integrations.
4. Content in src/data/ and src/content/: replace the placeholder text, the sample articles, the changelog entries and the sample legal pages.

Working with an AI assistant#

The theme ships two files for this in its root folder. AGENTS.md tells a coding assistant where things live and which rules to keep; DESIGN.md is the design guide it must follow when it builds something new. Many assistants read AGENTS.md on their own. If yours does not, ask it to read both files first.

Where to go next#

• Design system: the rules that keep new work looking like the theme.
• Launch checklist: what to replace, connect and check before the site goes public.
• Service integrations: connecting a form service, a newsletter provider and checkout links.
• Writing content in Markdown: every text style on one page.
• Analytics and cookie consent: adding an analytics script, with or without the consent banner.
• Deployment and custom domains: publishing the built site.