Stella
Build your next SaaS, startup, or business website with Stella, a modern Astro Js multipurpose theme built for performance, design, and growth. Stella is perfect for founders, developers, and agencies who want a lightning-fast Astro website without sacrificing flexibility or style.
With advanced SEO optimization, multilingual support, and fully customizable layouts, Stella helps you create professional websites for SaaS platforms, agencies, landing pages, or product showcases — all powered by Astro’s blazing speed.
Bring your pages to life with interactive, physics-based animations and a sleek modern UI. Stella includes everything you need to highlight your products or services, attract customers, and grow your online presence effortlessly.
:NOTE
All graphics used in this theme are included as a .fig file, allowing you to easily customize or replace them with your own content in Figma.
Pages
- Home
- Company
- Features
- Contact
- Pricing
- Testimonial
- FAQ
- Changelog
- Career
- Career Single
- Integration
- Integration Single
- Blog
- Blog Single
- Terms & Conditions
SEO
-
Achieve a 100/100 Google Lighthouse SEO score. 🚀
-
Dynamically generate Sitemap and Robots.txt files with full control via
config.toml
:[seo] author = "Getastrothemes" keywords = [ "digital agency, stella astro template, astro template, astro theme, stella theme, stella astro theme, astro portfolio theme, astro portfolio template, astro agency template, astro agency theme", ] robots = "index, follow" [seo.robotsTxt] enable = true disallow = ["/_astro/", "/cdn-cgi/"] [seo.sitemap] enable = true exclude = []
-
Configure Google Analytics, Google Tag Manager, Plausible Analytics, and Umami Analytics directly in
config.toml
. -
Add any custom tracking code to the
<head>
tag throughconfig.toml
. -
Automatically generated Title and Meta tags for each page.
-
Auto-generated Open Graph (OG) metadata for Facebook, Twitter, and other social platforms.
-
Option to override Title, Meta tags, and OG metadata per page using frontmatter.
-
Built with Semantic HTML5 & Added html markup best practices for better accessibility and search engine indexing.
-
No JavaScript links or
onClick
events to improve crawlability. -
Statically generated pages ensure blazing-fast performance and easy indexing.
Included Shortcodes
Stella comes packed with a rich library of prebuilt components and shortcodes designed to speed up development and elevate user experience. Some highlights include:
- Buttons with creative hover animations (creative-fill, magnetic, text-flip, magnetic-text-flip)
- Accordions for structured collapsible content
- Tabs for organizing sections efficiently
- Notices (info, warning, success, error) for contextual alerts
- Video Embed with support for YouTube and HTML5 video
- Card Blocks for services or features with CTA buttons
- Image & Video Lists for dynamic media layouts
- Testimonials with customer avatars and logos
- Markdown Enhancements: blockquotes, code blocks, tables, and heading customization
These reusable elements are fully customizable, responsive, and integrated with the theme’s design system — making it easier to build pages without writing boilerplate code.
Privacy
- No analytics, tracking, or cookies are enabled by default, ensuring user privacy.
- Supports GDPR-compliant analytics providers like Plausible and Umami as alternatives to Google Analytics.
- Self-hosted Google Fonts by default for improved performance and privacy.
- Switch seamlessly between self-hosting and Google Fonts CDN with a single line in
src/config/fonts.json
.
- Switch seamlessly between self-hosting and Google Fonts CDN with a single line in
Header
# Site Configuration
[site]
title = "Stella" # Shared title for SEO and OpenGraph
description = "A customizable and multipurpose saas & startup astro theme built with Tailwind CSS and Astro Js" # Shared description for SEO and OpenGraph
tagline = "Multipurpose Saas & Startup Astro Js Theme"
taglineSeparator = "" # default is " - "
baseUrl = "https://stella-astro.netlify.app" # Base URL for the site and used in OpenGraph meta tags.
logo = "/images/logo.svg" # Path to the site's logo
logoText = "Stella" # Text displayed next to the logo
logoWidth = "2rem" # Width of the logo
logoHeight = "2rem" # Height of the logo
- Fully customizable logos for desktop and mobile. Control size, text, color, and more for a polished look on all devices. 👌
- Advanced sticky header with the option to disable it in
config.toml
.
Fonts
- Configure fonts easily in
src/config/fonts.json
, with the flexibility to switch between self-hosted and CDN Google Fonts. - Includes SVG Repo Icons for crisp and scalable visuals.
Social
-
Configure social media links in
src/config/social.json
. -
Auto-generate Open Graph metadata for Facebook and Twitter cards, fully customizable in
config.toml
.# OpenGraph Metadata # Specific OpenGraph settings, using values from the [site] section where possible. # ----------------------------------------------------------------------------------------------------------------------------------- [opengraph] image = "/images/og-image.jpg" # Image used in OpenGraph previews ogLocale = "en_US" # Locale setting for OpenGraph ogType = "website" # Type of content for OpenGraph protocol twitter = "" # Twitter handle for Twitter Card meta tags twitterCard = "summary_large_image" # Type of Twitter Card to use in social sharing
Blog
- Modern layouts for blog pages.
- Support for Markdown and MDX content.
- Built-in syntax highlighting for code blocks using
shiki
. - Auto-generate table of contents for longer posts.
- Supports multi-author blog posts with author metadata.
- Tags and categories support.
- SEO-ready with auto meta and OG tags for blog posts.
- Fully responsive blog layout and typography with Tailwind Prose.
- Draft mode support for staging unpublished content.
Menus
{
"enable": true,
"name": "Components",
"url": "/components/",
"weight": 0,
"badge": {
"enable": true,
"label": "NEW",
"color": "accent",
"_color_comment": "color expected value - accent, info, success, danger, dark",
"type": "text",
"_type_comment": "type expected value - text, dot"
}
},
- Fully responsive mega menu for easy navigation.
- Includes an animated hamburger menu and multi-level dropdown menus.
- Automatically sets
rel
andtarget
attributes for external links. - Special link highlights:
- Badge Link Highlighter for dynamic updates like “New” or notification counts.
- Dot Link Highlighter for subtle indications of active or unread links.
Contact Form
# documentation - https://formspree.io/ | https://formsubmit.co/ | https://docs.netlify.com/forms/setup/
# Form action URL for the contact form (For more settings related to form see "src/content/sections/contact-section.md")
contactFormAction = "https://formsubmit.co/your_form_submission_receive_email" # https://formspree.io/f/your_form_id | https://formsubmit.co/your_form_submission_receive_email | "/"
# formspree | formsubmit.co | netlify (default is formsubmit.co)
contactFormProvider = "formsubmit.co"
- Features advanced form validation.
- Pre-configured for multiple form submission services:
- Formsubmit.co: Add your email in
config.toml
. - Netlify Forms: Works out of the box when hosting on Netlify.
- Formspree: Add your Formspree ID in
config.toml
.
- Formsubmit.co: Add your email in
- Dynamic form messages for success or error handling.
- Includes a searchable advanced select input.
- Easily generate form inputs and notes via frontmatter.
inputs: - label: "" placeholder: "Subject *" name: "Subject" # This is crucial. Its indicate under which name you want to receive this field data required: false halfWidth: true dropdown: type: "" # select | search - default is select search: # if type is search then it will work placeholder: "" items: - label: "General Inquiry" value: "General Inquiry" selected: false - label: "Investment Opportunity" value: "Investment Opportunity" selected: false
Website content
- Includes real content, so you don’t need to start from scratch.
- All photos, illustrations, and icons are royalty-free and ready to use.
Newsletter
# Mailchimp Subscription Form located in footer
[settings.subscription]
enable = true # Enables or disable the subscription form
title = "" # Check src/i18n/en.json and src/i18n/fr.json for changing the title in different languages or directly add value here if you are not using internationalization feature
note = "" # Check src/i18n/en.json and src/i18n/fr.json for changing the note in different languages or directly add value here if you are not using internationalization feature
formAction = "https://gmail.us11.list-manage.com/subscribe/post?u=d870b06d86c16269e4b1f9b39&id=12cf0c6ac2&f_id=007e61e1f0"
mailchimpTagValue = ""
- Built-in support for Mailchimp subscriptions.
Ready to Deploy
Stella comes ready for production with pre-configured deployment setups for leading platforms. Just push and go:
- Netlify: Includes
netlify.toml
for automatic builds, headers, redirects, and optimized asset caching.- Seamless CI/CD support with each Git push.
- Custom headers to support Astro’s static assets and performance best practices.
- Vercel: Comes with
vercel.json
and optional deployment scripts.- Handles both preview and production deployments with environment-specific settings.
- Built-in support for redirects and rewrites.
- Cloudflare Pages: Easily deploy by selecting the
dist/
folder as the output directory.- Works out of the box with zero configuration needed.
- Static Hosting: Run
astro build
and upload thedist/
folder to any static host (e.g., GitHub Pages, Firebase Hosting, Surge).