Back to templates

Template details

NAID

A template for doers built with Astro and Uno CSS.

About this template

NAID is a minimal, bold Astro starter template for doers, built with Uno CSS to create a fast personal site or landing page. This boilerplate from Studio Lumina includes a single index page, a reusable Card component, and a shared Layout, giving you a small, readable foundation for any speed-focused web project.

What is NAID?

NAID is an Astro project template that pairs the Astro static site framework with the Uno CSS atomic styling engine. It takes a standard Astro file structure — src/pages, src/components, src/layouts, and public — and provides one sample page, one component, and one layout so you can see how the pieces connect. The output is a static site that builds to ./dist with npm run build and previews locally at localhost:4321 with npm run dev.

Key Features

  • Astro framework — Renders .astro and .md files in src/pages as routes and allows you to add React, Vue, Svelte, or Preact components in src/components.
  • Uno CSS styling — Uses Uno CSS for on-demand atomic styles, keeping the generated CSS small and page loads quick.
  • Minimal project structure — Ships with public/favicon.svg, src/content/, components/Card.astro, layouts/Layout.astro, pages/index.astro, and package.json.
  • Standard Astro commands — npm install, npm run dev, npm run build, and npm run preview are all defined in package.json.
  • CLI integration — Access the full Astro CLI through npm run astro to add integrations, run astro check, or get help.

Who should use NAID?

  • Independent makers and freelancers who want a no-frills personal site to share their projects without spending time on configuration.
  • Frontend developers learning Astro who want a tiny codebase to trace through — the whole template is one page, one component, and one layout.
  • Designers and builders who like atomic CSS and want a bold, minimal look with the flexibility of Uno CSS utilities.

What can you do with NAID?

  • Launch a personal landing page — Edit src/pages/index.astro, tweak the layout, and deploy the static output to any host.
  • Prototype a microsite — Use the included Card component and Layout to quickly assemble a new page under src/pages.
  • Extend with Astro integrations — Run npm run astro add to bring in a framework or CMS, then rebuild with npm run build.

How does NAID work?

Scaffold a project by running npm create astro@latest -- --template studiolumina/naid. The generated project follows the standard Astro layout: pages in src/pages become routes, components in src/components are reusable, and public/ holds static assets like favicon.svg. Run npm run dev to preview changes locally and npm run build to generate the production site in ./dist.

Coming soon

The README lists upcoming additions: dark mode, section variants, and more colors. These are not yet implemented, so you'll need to style those yourself if you need them now.

screenshot of NAID on template0.com