A Practical Astro Theme for SaaS Websites

Building a SaaS product is hard enough. A good starter should give you a useful structure, sensible defaults, and room to adapt the details to your product.

Zenix is designed as a focused foundation for product websites: landing sections, pricing, blog content, changelog entries, and common UI patterns are all included.

Architectural Decisions

Zenix keeps the implementation close to Astro’s strengths: static output, content collections, MDX support, and small amounts of client-side JavaScript where interaction is needed.

1. View Transitions API

Astro’s View Transitions give this static site the feeling of a Single Page Application (SPA). When you navigate between pages, there is no hard refresh. The browser paints the new DOM instantly.

2. The Dark Mode Engine

The theme includes a dedicated dark-mode color palette using Tailwind’s dark: variants. Backgrounds, borders, and text colors are tuned independently for light and dark mode.

/* Example of our complex utility layering */
@layer utilities {
  .glass-panel {
    @apply bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl border border-slate-200/50 dark:border-slate-800/50 shadow-xl;
  }
}

3. The “Bento Box” Grid

The Features section uses a responsive bento-style grid. It keeps the layout expressive on larger screens while falling back to simpler stacked cards on smaller devices.

MDX Integration

This very blog post is written in MDX! That means we can interleave standard Markdown with complex Astro or React components.

Supported Components

Currently, we ship with the highly versatile <Callout> component. You can pass type="info" | "warning" | "danger" | "success" to instantly change its appearance.

Conclusion

Zenix is meant to be a starting point. Use the structure, adjust the copy, and shape the visual details around your own product.