Virex
A production-ready SaaS UI theme for Astro. Designed to help you move from idea to launch quickly.
Install / Use
/learn @erlandv/VirexREADME
Virex - SaaS UI Theme for Astro
A production-ready SaaS theme for Astro. Designed to help you move from idea to launch quickly, Virex includes marketing pages, documentation, and a dashboard UI. Built with a strong focus on performance, simplicity, and easy customization.
Why Virex?
Unlike many Astro themes that focus only on marketing pages, Virex also includes a production-ready dashboard UI. You get more than landing pages, but a structured dashboard layout with reusable components and example pages for common SaaS workflows.
This allows you to move faster—from an initial landing page to an MVP dashboard UI—while keeping a consistent design system, theming, and code quality across your entire project.
Demo
<div align="center">
Features
Performance & Developer Experience
Modern tech stack with Astro, TypeScript, and Tailwind CSS v4.
- Path aliases (
@dashboard/*,@ui/*, etc.) for cleaner imports - ESLint and Prettier configured for code quality
- Design tokens with OKLCH color system for easy theming
- Dark mode support with localStorage persistence
- 200,000+ icons via astro-icon (Lucide + Simple Icons)
Marketing & Conversion
A complete set of landing pages optimized for SaaS marketing.
- Hero sections, feature grids, pricing tables, testimonials
- Contact forms with validation and multiple backend support
- Team pages, case studies, integrations showcases
- SEO-optimized with meta tags, Open Graph, and JSON-LD
- Accessible with WCAG compliance and semantic HTML
- Legal pages (privacy policy, terms of service)
Dashboard UI
Flexible dashboard layout with sidebar navigation and reusable components.
- Components: StatCard, DataTable, Chart, Modal, Toast, and more
- Example Pages: Overview, Settings (Profile, Team, Billing), Projects
- Routes:
/dashboard,/dashboard/settings/*,/dashboard/projects - Full light/dark mode support with consistent theming
Important: Dashboard pages use starter templates with sample data. Authentication is intentionally left to the user. See Dashboard docs for guidance.
Content Management
Built-in content collections with full Markdown and MDX support.
- Blog: Paginated posts with tag filtering and reading time
- Documentation: Auto-generated sidebar with section grouping
- Changelog: Version history with release timeline
- Testimonials: Customer quotes with featured/ordering support
Quick Start
1. Create a new project
npm create astro@latest -- --template erlandv/virex
2. Start development
cd your-project-name
npm run dev
Your site is now running at http://localhost:4321
What's Next?
Once your project is running, here's what you should do:
- Configure Your Site - Update site metadata in
src/config/site.ts - Customize Design - Edit design tokens in
src/styles/global.css - Add Content - Create blog posts, docs, and changelog entries
- Build Dashboard - Implement authentication and connect your API
Documentation
Full documentation is available in the docs/ folder:
- Getting Started - Installation and project structure
- Configuration - Site settings and feature flags
- Customization - Design tokens, branding, and theming
- Content Guide - Managing blog, docs, changelog, and testimonials
- Components - Icons, forms, and UI components
- Pages - Available pages and routing
- Dashboard - Dashboard layouts and components
- Authentication - Authentication guidance
- Deployment - Deploying to Vercel, Netlify, or Cloudflare
License
Virex Theme is free for personal and commercial use under the MIT License. Attribution is not required, but a link back to this repository is always appreciated.
