Live preview: https://astro.nularui.dev/
All nularUI components are free to use. Umbra is a paid theme and includes the complete source code.
Umbra is a three-page marketing site for software products, built around Astro’s static-first approach. It ships as static HTML by default, uses no UI-framework runtime, and relies on the native system font stack so there is no webfont request on first paint.
It is built with Astro, Tailwind CSS v4 and TypeScript, with small native browser interactions only where they are needed.
What’s included
The landing page includes an animated canvas hero, customer logo wall, four-card feature bento, quick feature highlights, a scrolling wall of twelve testimonials, a multi-device showcase, trust cards, pricing, FAQ and a closing parallax collage.
The pricing page gives the three plans, FAQ and final call to action their own route, making it useful for campaigns that need to send visitors directly to pricing.
The sign-in page uses a centered authentication card and emits a nular-submit event with the submitted data, so it can be connected to your own backend or authentication provider.
The template includes both light and dark themes. The visitor’s saved preference takes priority, with the system theme used as the default.
Easy to customize
The Tailwind v4 theme block contains the two main brand accent colors used by the primary button gradients and hero canvas.
Changing those values updates the visual identity across the template from one place.
The font stack is configured in the same theme block, making it straightforward to introduce your own branded typeface later.
Lightweight artwork
Most structural artwork is drawn directly in the markup rather than imported from external libraries.
This includes the product screenshot treatment, phone, laptop and tablet mock-ups, blueprint frames and connector beams.
The world map is stored as a committed dot grid, so it requires no client-side library or JavaScript. Avatars are generated from names, while raster assets are pre-sized WebP files served directly from the public folder.
The project therefore builds without requiring a native image-processing dependency.
Motion and interaction
Animations respect reduced-motion preferences throughout the template, including the hero canvas, testimonial columns, connector beams, comparison effects and network indicators.
The hero canvas also pauses when it leaves the viewport.
The navigation changes appearance after scrolling and hides while moving down the page, but remains visible whenever the mobile menu is open.
Technical details
Astro 7, Tailwind CSS v4 and TypeScript.
Three routes and twenty-seven reusable components.
Content stored in three data files.
Small native custom elements for interactions.
No React, Vue or Svelte runtime.
Native system font stack with no webfont request.
Light and dark themes included.
Works anywhere Astro can be deployed, including deployments under a subpath.
Includes a README covering the main customization points, including the world map density.
About nularUI
Umbra is built with nularUI, a collection of Astro-native UI components designed to create polished interfaces without adding a UI-framework runtime.
All 135+ individual nularUI components are free, including their source code, installation instructions and AI prompts for tools such as Claude Code, Codex and Cursor.
Umbra is part of nularUI Pro. Purchasing it gives you lifetime access to the complete Pro catalog, including 126 ready-made sections and 16 complete templates for SaaS, marketing, agency and portfolio sites, as well as future Pro additions.
One payment, lifetime access.
Browse all free components and preview the complete nularUI Astro catalog at https://astro.nularui.dev/
