Can I use Nova for a client site?

Yes. A Pro seat covers unlimited personal and commercial projects, client work included.

Is Nova a Next.js template?

It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Nova: Pre-order template

Take pre-orders before you ship.

For hardware pre-orders: a drawn-product spec hero, projected metrics, press, a pre-order countdown, FAQs and a minimal footer.

About the Nova template

Nova takes pre-orders before you ship. A drawn-product spec hero, projected metrics with footnotes, early press, a founders'-batch countdown and pre-order FAQs about when cards are charged.

Take pre-orders before you ship. It is a complete pre-order landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.

Who Nova is for

Hardware pre-orders.
Smart home devices.
Consumer electronics launches.
Small-batch products.

What is inside

7 sections, top to bottom:

Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
Hero Spec: Hardware launch hero: a CSS-drawn product with spec callouts on leader lines and a finish picker.
Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
CTA Countdown: Limited-time offer band with a promo code, a live countdown and a shimmering button.
FAQ Split: Heading and contact link on the left, a springy accordion on the right.
Footer Minimal: One quiet row: brand, a few links and the year.

How it is built

Spec callouts, finishes and the offer code are props. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.

Install Nova

npx shadcn@latest add @charcoal/nova

Templates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.

Frequently asked questions

Can I use Nova for a client site?: Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Nova a Next.js template?: It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Sections in this template

Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
Hero Spec: Hardware launch hero: a CSS-drawn product with spec callouts on leader lines and a finish picker.
Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
CTA Countdown: Limited-time offer band with a promo code, a live countdown and a shimmering button.
FAQ Split: Heading and contact link on the left, a springy accordion on the right.
Footer Minimal: One quiet row: brand, a few links and the year.

Nova as Markdown