Live preview: https://astro.nularui.dev/
All nularUI components are free to use. Lattice is a paid theme and includes the complete source code.
Lattice is a complete marketing site for a scheduling product, not just a landing page. It includes an animated homepage, a searchable blog with six articles, and login and signup screens.
It is built with Astro, Tailwind CSS v4 and TypeScript. The site stays static by default and uses small native browser interactions where needed, with no React, Vue or Svelte runtime in the output.
What’s included
The landing page includes a hero with a phone mock-up, customer logos, a statistics section, a bento grid, automation cards, three pricing tiers, an animated testimonial cloud, FAQ and a final call to action.
The blog includes a featured article, instant client-side search and six example posts. Article pages include cover artwork, code blocks and related content.
Login and signup use a separate authentication layout with a dotted world map background. Both forms emit a nular-submit event with the submitted data, making it easy to connect them to your own authentication service.
Easy to customize
The main Tailwind v4 theme block controls the brand colors, gradients and shared surfaces used throughout the site. Changing a small set of values updates buttons, highlighted pricing, accents and other key elements across the template.
Content is kept separate from presentation where possible. Most site copy lives in a small set of data files, while blog posts use Astro content collections and Markdown.
No image dependency
The template does not depend on external photography or raster assets. Customer logos, article covers, the favicon and the dotted world map are all vector-based. Avatars are generated from names at build time, and icons are included directly rather than requiring a separate icon package.
The project builds without Sharp. If you later add raster images, the README explains the small configuration change required.
Motion and accessibility
Animations respect prefers-reduced-motion, including the sparkle canvas, orbiting avatars, integration animations, floating badges and other decorative effects.
The sparkle canvas also pauses when it leaves the viewport.
Interactive elements such as the mobile navigation and FAQ use proper buttons, aria-expanded and aria-controls. They support keyboard interaction, close with Escape where appropriate and remain inert while collapsed.
Technical details
Astro 7, Tailwind CSS v4 and TypeScript.
Ten pages and twenty-seven components.
Blog posts stored as Markdown in an Astro content collection.
Small native custom elements for interactions.
No React, Vue or Svelte runtime.
Single light theme by design.
Works anywhere Astro can be deployed, including deployments under a subpath.
Includes a README covering the main customization points.
About nularUI
Lattice is built with nularUI, a collection of Astro-native UI components designed to provide 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.
Lattice 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/
