Nuxt 4 + Sanity page-builder starter

Ship a CMS-driven site without building the plumbing.

Compose pages from 20+ theme-aware blocks in Sanity Studio. Type-safe end to end. Rebrand from the CMS — no code, no redeploy.

Get NuxionView Demo (opens in new tab)

Built on a modern stack

Nuxt 4 / Vue 3
Sanity.io
TailwindCSS v4
shadcn-vue / Reka UI
Typescript
Pinia

WHY NUXION

Stop rebuilding the same infrastructure.

✕ Before - weeks of glue code
—Wire up a page-builder + block registry by hand
—Custom theming layer for colors & fonts
—Hand-written TS glue between CMS and components
—SEO, redirects, consent, forms — all bespoke
→
✓ AFTER — schema + component, done
✓ Define a schema, drop in a Vue component
✓Themes & fonts are CMS docs → CSS vars
✓TypeGen keeps types in lockstep, auto
✓Blog, SEO, redirects, consent, forms included

THEME PLAYGROUND INTERACTIVE

Preset themes, applied

Each theme is a Sanity document compiled to CSS variables at build time. Click a swatch — the preview re-themes with zero reload.

Sanity Studio · Colour options
Theme
Colour theme applied to this section
preview · Demo: Midnight
Live preview

Build faster with Nuxion

Every block reads the same theme tokens — recolor once, restyle everywhere.

COLOUR THEMING INTERACTIVE

One accent colour. Every surface.

Drag the accent — the one colour that seeds your theme. Its surface, border, glow and button tokens are derived automatically, and every block on the page restyles as you go. This is the real CMS theming flow, live in the page.

color.themeDemo: Midnight
background
var(--studio-nuxt-theme-demo-midnight-bg)
text
var(--studio-nuxt-theme-demo-midnight-text)
accent
var(--studio-nuxt-theme-demo-midnight-accent-ink, currentColor)
drag the accent swatch · or type a hex
DERIVED BY useAccent()
--accent
readable ink — icons, links, indicators
--accent-surface
8% — chip & card fills
--accent-surface-strong
14% — hover fills
--accent-border
25% — borders
--accent-glow
20% — halos & blobs
--accent-muted
legible decorative marks
preview · accent on Demo: Midnight theme
● your brand

Your accent, everywhere.

Heroes, cards, buttons and links inherit the same accent tokens via useAccent() — no skinning, no per-component overrides.

FONT PAIRING SWITCHER INTERACTIVE

Fonts are documents too.

Select a pairing — the type scale below updates in place. In Studio these map to a fonts document compiled into the theme's CSS variables.

TYPE SCALE · Editorial

Design that scales

A confident heading pairing

Section subhead level three

Body copy renders in the paired body face. Nuxion keeps heading and body families in sync across every block, so your type system stays coherent whether an editor drops in a hero, a blog post, or a pricing table.

TYPE-SAFE, END TO END

Rename a field. Break the build, not prod.

Sanity TypeGen generates types from your schemas and the component registry is compile-time checked. The whole chain stays in lockstep.

DEVELOPER EXPERIENCE

One command. One terminal.

Setup, dev, and scaffolding are single commands. The scaffolder generates schema + typed Vue component + registration in one step. Vitest, e2e and CI ship in the box.

✓One-command setup and single-terminal dev
✓Scaffolder: schema + typed Vue component + registration
✓Vitest, e2e and CI wired from the first commit
Shell
npm run setup:project
✔ env linked · types generated · dev ready

npm run scaffold:component -- custom.pricing-cta
✔ schema/custom.pricing-cta.ts
✔ components/custom/CustomPricingCta.vue
✔ registered in customComponentImports

cd studio && npm run schema:types
✓ schema types → sanity.types.ts

PRICING

One price. Yours forever.

No tiers, no seats, no subscription. Buy once, ship unlimited projects.

£150one-time
Get Nuxion
✓ Lifetime updates✓ Full source✓ Unlimited projects

Stop skinning templates.
Start shipping brands.

Everything above ran live in this page. Imagine it with your content.

Get NuxionView Demo