AstroStarter

astro-njx-launch — Astro Starter Template

By njbSaab

A product launch / waitlist starter template built with Astro, njX UI, and Alpine.js, featuring a video modal, testimonial slider, and optimistic submit form, with support for nine theme switches.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews

Desktop homepage1 / 2

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

Hero section includes a waitlist count badge and video modal; the modal supports closing via Escape key and clicking the background

Testimonial slider with star ratings, avatars, counts, and touch swipe, driven by a data array

Waitlist form uses optimistic submission and displays a success state

Navbar provides theme switching, remembering the choice via localStorage

Brand name, theme, and social proof numbers are centralized in src/config.ts for single-point modification

njX UI provides nine themes, switched via the html data-theme attribute

Template Details

astro-njx-launch is a static page starter template for product launches or waitlist collection. The page structure is assembled from Astro components, the visual layer uses ready-made njX UI classes (cards, modals, sliders, badges), and interaction logic is written directly in the markup via Alpine.js x-data, outputting static HTML after build.

The template includes several directly replaceable sections: a Hero with a waitlist count badge and video modal, three-step instruction cards, a testimonial slider with star ratings and touch swipe, an optimistic submit waitlist form, and a theme switcher in the navbar (persisted via localStorage). The brand name, theme, and numbers are centralized in src/config.ts, while step and testimonial content are in the data arrays of HowItWorks.astro and Testimonials.astro respectively.

Themes are switched via the data-theme attribute on the html tag, offering nine values: dark, light, red, blue, green, cyan, yellow, pink, purple. Custom styles are only about 25 lines; the rest of the appearance comes from the njX UI CSS import.

Limitations: The waitlist form defaults to a demo submission and needs to be replaced with a real endpoint; project materials mention a Pro version, but this listing only includes the MIT-licensed public free code and does not include paid upgrades; third-party assets such as demo images, fonts, and icons require separate license verification; external services like domain, hosting, and database may incur additional costs.

AstroStarter

Is it right for your project?

Use Cases

Build a launch landing page for a new product or feature to collect early user emails
Create a waitlist page showing product step instructions and user testimonials
Use as a static page starting point with Astro + Alpine.js, quickly going live after replacing copy and data
Marketing page prototypes requiring multiple theme switches

Suitable For

Front-end developers familiar with Astro components and Alpine.js markup-based interactions
Static site projects that need to quickly produce a product launch page without relying on backend rendering
Independent developers or small teams looking to reduce hand-written CSS with a ready-made UI class library

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
After cloning the repository, run npm install and npm run dev; the local default address is http://localhost:4321
2
Modify the product name, theme, and social proof numbers in src/config.ts
3
Replace content by modifying the STEPS array in HowItWorks.astro and the SLIDES array in Testimonials.astro
4
Replace the demo @submit in Waitlist.astro with a fetch request pointing to your own endpoint
5
The build command is npm run build, output directory is dist, deployable to any static hosting

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing includes the free version under the MIT license from the public repository; the free scope covers that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of that version's code are permitted.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as-is; warranties and liability limitations are governed by the original license and applicable law.

Additional costs & items to verify

Project materials mention an optional paid version or features; this listing only includes the public free code and does not include paid upgrades.
Demo images, fonts, icons, and other third-party assets require verification under their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domain, hosting, database, payment, or AI may incur additional costs.
The waitlist form defaults to a demo submission and does not actually send data; you must replace the @submit in Waitlist.astro with a fetch request pointing to your own endpoint to collect emails.
Project materials state that it is currently free, but the author plans to launch a Pro paid version; this listing is limited to the MIT-licensed public free code and does not include any Pro paid features.
This template is part of the njX Astro Themes series and depends on njX UI (npm package njx-ui) for style classes; you need to install this dependency via npm before use.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

swap the demo `@submit` in `Waitlist.astro` for a fetch to your endpoint
Original README

free today, Pro versions on the way
Original README

Part of **[njX Astro Themes](https://njxui.dev/themes)**
Original README

https://github.com/njbSaab/astro-njx-launch/blob/main/LICENSE https://github.com/njbSaab/astro-njx-launch/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 80 / 100
Technologies: Astro
Website type: Starter

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-09-12
Screenshot last checked: 2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-13

Inspect the recorded source material

SHA-256: 07e753a9d220e583c8851f392db79cede2f8f953165a09750058696b83605712

2026-10-13T00:32:44.936Z

Source file / repository

# astro-njx-launch

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/njbSaab/astro-njx-launch) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/njbSaab/astro-njx-launch)

> Part of **[njX Astro Themes](https://njxui.dev/themes)** — ecommerce storefronts & landing pages by one author, free today, Pro versions on the way.

**Product launch / waitlist starter — Astro + [njX UI](https://njxui.dev) (npm: `njx-ui`) + Alpine.js.**

One CSS import, nine runtime themes, ~25 lines of custom CSS. Every element on
the page is an njX UI class; interactivity is plain Alpine `x-data` right in the
markup; Astro renders it all to static HTML.

**Live demo:** https://astro-njx-launch.pages.dev

![astro-njx-launch preview](./screenshot.png)

## What you get

- **Glow hero** with a waitlist counter badge and a **video modal** (library `.lib-modal-*`, Escape / backdrop close)
- **How it works** — three numbered steps on showcase cards (`card-outline-gradient` / `card-aura` / `card-shine`)
- **Testimonial slider** — library `.testi-slider`: stars, avatars, counter, touch swipe
- **Waitlist form** with optimistic submit and a success state
- **Theme toggle** in the navbar with `localStorage` persistence

## The stack

| Layer | Tool | Why |
| ----- | ---- | --- |
| Markup & build | [Astro](https://astro.build) | Components, zero JS by default |
| Look | [njX UI](https://njxui.dev) — 44 KB gzip | Ready blocks: cards, modals, sliders, badges |
| Interactivity | [Alpine.js](https://alpinejs.dev) | Modal, slider, form — state lives in the markup |

## Quick start

```bash
git clone https://github.com/njbSaab/astro-njx-launch my-launch
cd my-launch
npm install
npm run dev
```

Open `http://localhost:4321`, then make it yours:

1. **`src/config.ts`** — product name, themes, social-proof numbers.
2. **Data arrays** — `STEPS` in `HowItWorks.astro`, `SLIDES` in `Testimonials.astro`.
3. **Waitlist** — swap the demo `@submit` in `Waitlist.astro` for a fetch to your endpoint.

## What's inside

```
src/
├── config.ts                 # brand, themes, numbers — rebrand in one file
├── layouts/Layout.astro      # njX UI import · theme restore · SEO meta
├── styles/global.css         # the one signature gradient (~25 lines)
├── components/
│   ├── Nav.astro             # navbar + Alpine theme toggle
│   ├── Hero.astro            # glow hero + video modal
│   ├── HowItWorks.astro      # three showcase cards (data-driven)
│   ├── Testimonials.astro    # testi-slider with swipe (data-driven)
│   ├── Waitlist.astro        # optimistic form + success state
│   └── Footer.astro
└── pages/index.astro         # assembles the sections
```

## Themes

njX UI ships 9 themes driven by one attribute:

```html
<html data-theme="cyan">   <!-- dark · light · red · blue · green · cyan · yellow · pink · purple -->
```

## Deploy

[![Deploy to Cloudflare Pages](https://img.shields.io/badge/Deploy%20to-Cloudflare%20Pages-f38020?logo=cloudflarepages&logoColor=white)](https://dash.cloudflare.com/?to=/:account/pages/new)
[![Deploy to Netlify](https://img.shields.io/badge/Deploy%20to-Netlify-00c7b7?logo=netlify&logoColor=white)](https://app.netlify.com/start/deploy?repository=https://github.com/njbSaab/astro-njx-launch)

Static output — any host works. Build command `npm run build`, output directory `dist`.

## Learn more

- njX UI documentation: https://njxui.dev/documentation
- Alpine presets for njX components: https://njxui.dev/documentation#njx-alpine
- Sibling themes: [astro-njx-saas](https://github.com/njbSaab/astro-njx-saas) · [astro-njx-portfolio](https://github.com/njbSaab/astro-njx-portfolio)

## License

MIT — use it for anything, no attribution required.

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

astrowind

AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.

Astro · Blog

accessible-astro-starter

An accessibility-focused Astro 6 starter template with WCAG 2.2 AA practices, Tailwind CSS 4, TypeScript, Prettier, ESLint, form validation, blog and portfolio examples, and preference toggles for dark mode, high contrast, and reduced motion.

Astro · Blog

astro-erudite

astro-erudite is an opinionated, unstyled static blog template built with Astro and native CSS, with no UI or CSS framework and minimal dependencies.

Astro · Portfolio

astro-shopify

A lightweight Shopify headless ecommerce starter template built with Astro and Svelte, integrating the Shopify Storefront API for product and inventory data, with built-in cart state management and basic add-to-cart and checkout flow.

Astro · E-commerce

brutal

Brutal is a neobrutalism Astro starter theme from ElianCodes, derived from the author's personal site and generalized. It includes a Markdown blog collection, build-time RSS and sitemap, image optimization, Tailwind CSS styling, and Biome checks, with no JavaScript by default.

Astro · Starter

qwind

Qwind is a free and open-source website template built on Qwik and Tailwind CSS, featuring directory-based routing via QwikCity, a Markdown blog, dark mode, and static deployment configuration.

Astro · Tool Site