Live preview: https://astro.nularui.dev/
All nularUI components are free to use. Halyard is a paid theme and includes the complete source code.
Halyard is a two-page SaaS landing site designed to help you get a startup site live quickly without carrying a UI-framework runtime.
It is built with Astro, Tailwind CSS v4 and TypeScript. The site ships as static HTML by default and uses no raster image assets, so there is nothing to optimize, compress or license before launch.
What’s included
The home page includes a condensing navigation bar, an animated 45-degree background grid, a hero with light-beam effects, a generated product mock-up, a four-card feature grid, three pricing tiers, a final call to action and a large wordmark footer.
The sign-up page includes a three-field form alongside a social-proof panel. The form emits a nular-submit event with the submitted data, making it easy to connect to your own backend or form service.
The template includes light and dark themes. Theme selection is applied before first paint to avoid a flash of the wrong scheme, with the visitor’s saved preference taking priority over the system setting.
A canvas-based dot globe uses a real equirectangular land mask, adapts to device pixel ratio and pauses when it leaves the viewport or the browser tab becomes hidden. Under reduced-motion preferences, it renders a single settled frame instead of animating.
No image dependency
Halyard does not rely on stock photography or external image assets.
The product interface is drawn from markup together with a generated SVG chart, allowing it to adapt naturally to the dark theme.
Avatars are generated from names, icons are inline SVG, and there is no image pipeline or binary asset dependency to manage before deployment.
Built to be edited
Site content is kept in three typed data files.
Brand identity and navigation live in site.ts, the home page content lives in home.ts, and the sign-up page content lives in login.ts.
Colors, fonts and shared shadow tokens are defined in a single Tailwind v4 theme block.
This keeps most common changes, such as renaming the product, updating the copy or adjusting the visual identity, out of the component files themselves.
Technical details
Astro 7, Tailwind CSS v4 and TypeScript.
Two main pages.
Content stored in typed data files.
Small native custom elements for interactions.
No React, Vue or Svelte runtime.
Light and dark themes included.
Reduced-motion preferences respected throughout.
No raster image assets or external image pipeline.
Works anywhere Astro can be deployed, including deployments under a subpath.
Includes a README covering the main customization points.
About nularUI
Halyard 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.
Halyard 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/
