PowerAI Astro is a free, dark-themed AI SaaS website template built with Astro, Tailwind CSS, TypeScript, and React. Designed for AI product teams, SaaS founders, and agencies who need a complete, launch-ready web presence. It ships with 15+ pre-built unique pages, 47 components and shortcodes, Framer Motion animations, and full MDX support. Ready to deploy on Cloudflare Workers, Vercel, Netlify, or Docker.
Made with ♥ by Sitepins CMS
|
- 16 pre-built pages covering every section a modern AI SaaS product needs: homepage, features, pricing, blog, case studies, careers, integrations, changelog, contact, and more
- 47 components, partials, and shortcodes including animated buttons, pricing tables, video modals, testimonials, and MDX-ready interactive elements
- Framer Motion animations (v12) for scroll-triggered reveals, transitions, and micro-interactions throughout
- Built with Astro 6, Tailwind CSS 4, TypeScript, and React 19 for minimal JavaScript output and a modern, type-safe codebase
- MDX shortcodes for embedding accordions, tabs, notices, video players, and YouTube players directly in content
- Git-based CMS integration via Sitepins for visual content editing without touching code
- Pre-configured for Cloudflare Workers, Netlify, and Docker with zero additional setup
- Fully responsive across desktops, tablets, and smartphones
- Highly customizable colors, fonts, navigation, social links, and SEO meta tags via JSON config files
- Fully SEO optimized with clean semantic markup and meta tag support
- Astro Content Collections for type-safe content management across blog posts, case studies, careers, and integrations
- Free Google Fonts and React Icons included
- MIT licensed for personal and commercial use
-
AI product founders and SaaS teams. If you're shipping an AI tool, developer platform, or SaaS product and need a site that covers features, pricing, case studies, and careers all in one template, PowerAI Astro has every page pre-built and ready to fill in.
-
Agencies and freelancers working on AI client projects. The JSON-based config system, clean folder structure, and Sitepins CMS integration make it practical to hand off to non-technical clients. Customize the theme once and ship for multiple projects under the MIT license.
-
Developers who want a full-featured starting point, not a bare skeleton. With 47 components already built and wired up, Framer Motion animations ready to go, and Cloudflare Workers deployment preconfigured, you're writing product copy instead of boilerplate from day one.
-
Content teams who need editorial control without a developer in the loop. The Sitepins integration and MDX shortcode library let writers publish blog posts, case studies, and job listings visually, without touching source files.
- Home
- Pricing
- Features
- Changelog
- About Us
- Contact
- Blog
- Blog Details
- Careers
- Career Details
- Case Studies
- Case Study Details
- Integrations
- Integration Details
- Error (404)
- Regular Content Pages (e.g., Privacy Policy, Terms of Service)
| Components (24) | Partials (16) | Shortcodes (7) |
|---|---|---|
| Accordion | Call To Action | MDX Accordion |
| Animated Button | Essential Features | MDX Button |
| Badge | FAQ (Frequently Asked Questions) | Notice (Alert box) |
| Blog Card | Footer | Tab (Single Tab pane) |
| Career Card | Gallery | Tabs (Tab group container) |
| Case Study Card | Header (Navigation layout) | Video Player |
| Contact Form | Integration View | YouTube Player |
| Counter | Key Features | |
| Featured Case Study | Open Positions (Careers) | |
| Featured Post | Our Team | |
| Hero | Page Header | |
| Icon Box | Pricing Section | |
| Integration List | Testimonials | |
| Logo | Trusted Clients (Client logos) | |
| Main Container | Our Goals | |
| Pagination | Why Choose Us | |
| Pricing Card | ||
| Pricing Table | ||
| Section Header | ||
| Share (Social Share links) | ||
| Social (Social Media Icons) | ||
| Statistics | ||
| Tailwind Size Indicator | ||
| Video Modal |
- astro v6.0.4
- tailwind v4.2.1
- react v19.2.4
- vite v8.0.0
- typescript v5.9.3
- mdx (@astrojs/mdx) v5.0.0
- motion (framer-motion) v12.0.0
- prettier v3.8.1
- wrangler v4.73.0 (for Cloudflare Workers deployment)
- date-fns v4.1.0
- marked v17.0.4
- sharp v0.34.5
- react-icons v5.6.0
- Download or clone the repository from GitHub
- Run
yarn installto install dependencies - Run
yarn run devto start the local development server - Update
src/config/config.jsonwith your site name, base URL, and favicon - Edit
src/config/theme.jsonto set your brand colors and fonts - Replace placeholder content in
src/content/with your own pages, posts, and case studies - Run
yarn run buildand deploy to Cloudflare Workers, Netlify, or your preferred platform
- astro v5.15+
- node v22.0+
- yarn v1.22+
- tailwind v4+
This project supports multiple deployment options. Choose the one that best fits your needs.
Deploy to Cloudflare's global network for optimal performance and low latency.
# Install Wrangler CLI (if not already installed)
npm install -g wrangler
# Authenticate with Cloudflare
wrangler login
# Deploy to production
yarn deploy:cf-workersyarn preview:cf-workersThis will start a local development server that mimics the Cloudflare Workers environment.
Deploy to Netlify for easy CI/CD and global CDN.
- Connect your GitHub repository to Netlify
- Set the build command:
npm run build - Set the publish directory:
dist - Deploy!
### 🐳 Docker
Deploy using Docker containers for consistent environments.
#### Build and Run With Docker
```bash
docker build -t powerai-astro .
# or
# docker build --build-arg INSTALLER=npm -t powerai-astro .
# or
# docker build --build-arg INSTALLER=pnpm -t powerai-astro .
docker run -p 3000:80 powerai-astro
# or
# docker run --rm -p 3000:80 powerai-astro
To access the shell within the container:
docker run -it --rm powerai-astro ashThis template comes pre-configured with Sitepins, a Git-based Headless CMS designed for seamless content management. You can update your website’s content, assets, and configuration without touching a single line of code.
How to get started:
Click the Edit with Sitepins button below and follow the on-screen instructions to start editing your content visually.
powerai-astro/
├── public/ # Static assets (images, icons, fonts)
│ └── images/
├── scripts/ # Build scripts
│ ├── themeGenerator.js # Generates CSS from theme.json
│ └── jsonGenerator.js # Generates JSON search index
├── src/
│ ├── config/ # Site configuration
│ │ ├── config.json # Site settings, metadata, GTM
│ │ ├── menu.json # Navigation menu structure
│ │ ├── social.json # Social media links
│ │ └── theme.json # Colors, fonts, sizing
│ ├── content/ # Markdown content (Astro Content Collections)
│ │ ├── homepage/ # Homepage content
│ │ ├── blog/ # Blog posts
│ │ ├── case-studies/ # Case study entries
│ │ ├── careers/ # Job listings
│ │ ├── integrations/ # Integration pages
│ │ ├── sections/ # Reusable section content (CTA, FAQ, etc.)
│ │ └── pages/ # Regular pages (privacy, terms)
│ ├── layouts/
│ │ ├── Base.astro # Main HTML layout
│ │ ├── components/ # UI components (.astro + .tsx)
│ │ │ ├── animations/ # Motion animation wrappers
│ │ │ └── shape/ # SVG decorative shapes
│ │ ├── helpers/ # Helper components (DynamicIcon, etc.)
│ │ ├── partials/ # Page sections (Header, Footer, etc.)
│ │ └── shortcodes/ # MDX shortcodes (Accordion, Tabs, etc.)
│ ├── lib/ # Utility libraries
│ │ ├── animations.ts # Animation variant definitions
│ │ ├── contentParser.ts # Content loading utilities
│ │ └── utils/ # Helper functions
│ ├── pages/ # Astro file-based routing
│ ├── styles/ # CSS files
│ │ ├── main.css # Main entry point
│ │ ├── base.css # Base/reset styles
│ │ ├── buttons.css # Button styles
│ │ ├── components.css # Component styles
│ │ ├── navigation.css # Nav/header styles
│ │ └── utilities.css # Utility classes
│ ├── types/ # TypeScript type definitions
│ └── content.config.ts # Astro content collection config
├── astro.config.mjs # Astro configuration
├── tsconfig.json # TypeScript configuration
└── package.json
{
"site": {
"title": "Power AI",
"base_url": "https://your-domain.com",
"favicon": "/images/favicon.png"
},
"settings": {
"pagination": 3,
"sticky_header": true
}
}Customize colors, fonts, and sizing:
{
"colors": {
"default": {
"theme_color": {
"primary": "#8F2FFE",
"secondary": "#DF53FE",
"body": "#0E0912",
"card": "#151019"
}
}
},
"fonts": {
"font_family": {
"primary": "Inter:wght@300;400;500;600"
}
}
}Supports regular links, dropdowns, and mega menus:
{
"main": [
{ "name": "Home", "url": "/" },
{ "name": "Features", "url": "/features" },
{
"name": "Pages",
"hasChildren": true,
"mega_menu": { ... }
}
]
}Create a new .md file in src/content/blog/:
---
title: "Your Post Title"
description: "Post description"
image: "/images/blog/your-image.png"
category: "Technology"
author:
name: "Author Name"
avatar: "/images/avatars/avatar.jpg"
date: 2026-01-01
draft: false
featured: false
---
Your markdown content here...Create a new .md file in src/content/case-studies/:
---
title: "Case Study Title"
description: "Brief description"
image: "/images/case-studies/image.png"
logo: "/images/case-studies/logo.png"
date: 2026-01-01
featured: false
---
Case study content...Create a new .md file in src/content/careers/:
---
title: "Job Title"
description: "Role description"
job_info:
employ_type: "Full-time"
experience: "3+ years"
salary_range: "$80k - $120k"
location: "Remote"
department: "Engineering"
deadline: "2026-12-31"
---
Job details...Found a bug? Please open an issue.
Copyright (c) 2026 - Present, Designed by Sitepins CMS
Code License: Released under the MIT license.