---
title: Olsa: a 28-page Astro marketing template that runs on...
description: Olsa is a commercial Astro marketing template ($49) shipping 28 pages, 44 UI primitives, and three Zod-validated content collections on just eight runtime...
canonical: https://daily.dev/posts/olsa-a-28-page-astro-marketing-template-that-runs-on-eight-dependencies-11nk3oxcp
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: Olsa: a 28-page Astro marketing template that runs on eight dependencies | daily.dev
og:description: Olsa is a commercial Astro marketing template ($49) shipping 28 pages, 44 UI primitives, and three Zod-validated content collections on just eight runtime...
og:url: https://daily.dev/posts/olsa-a-28-page-astro-marketing-template-that-runs-on-eight-dependencies-11nk3oxcp
og:image: https://api.daily.dev/og/posts/11NK3OXCp.png
og:image:alt: Olsa: a 28-page Astro marketing template that runs on eight dependencies
og:image:width: 1200
og:image:height: 630
og:locale: en
---
> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Olsa: a 28-page Astro marketing template that runs on eight dependencies
**[DomiDex](https://daily.dev/sources/svbqkzvdrcgg09azsvofx)** · [@domidex](https://daily.dev/domidex) · 9 min read · 0 upvotes · 0 comments
## Summary
Olsa is a commercial Astro marketing template ($49) shipping 28 pages, 44 UI primitives, and three Zod-validated content collections on just eight runtime dependencies. It includes a full product marketing page set — pricing with comparison matrix, an integrations directory with per-entry detail routes, blog with cross-collection author references, and auth page markup. SEO, animations, and icons are all implemented in-house with no third-party packages, keeping the dependency footprint minimal. Styling uses Tailwind CSS 4 with CSS-first theme tokens and a pre-paint dark mode toggle. The template is AI-coding-assistant ready with AGENTS.md, CLAUDE.md, and subsystem documentation included. It deliberately omits a CMS, i18n, search, and authentication backend, targeting SaaS and developer-tool marketing sites.
## Content
*Full disclosure: I build themes at AstroCraft and Olsa is one of ours. It is a commercial
template, $49 for the full source, so read this as a build write-up rather than a free download.
Republished from [the theme page on AstroCraft](https://astrocraftthemes.com/astro-themes/olsa/?utm_source=devto&utm_medium=syndication&utm_campaign=olsa).*
*Live demo: [https://olsa-demo.pages.dev/](https://olsa-demo.pages.dev/). Install docs: [https://doc.astrocraftthemes.com/themes/olsa/installation/](https://doc.astrocraftthemes.com/themes/olsa/installation/).*
Olsa is a production-ready marketing-site template for the Astro web framework, built for founders and agencies shipping a software product rather than a brochure. It ships 28 pages, 44 UI primitives, three Zod-validated content collections, and an SEO layer written in-house rather than pulled from a package. The whole thing runs on eight runtime dependencies, which is the difference between a site you own and a site you maintain around other people's release notes.
## By the numbers
- **28 pages**, counted from a production build, not a route table
- **40 section components** across 11 page groups, plus a dev-only catalog of every primitive
- **44 UI primitives** and **8 content-aware cards**, all `tailwind-variants` configs
- **571 icons** in a typed registry, inlined at build time
- **87 **`animate-*`** utilities** plus scroll-driven extensions, ported with no animation library
- **3 Zod-validated content collections**: blog, authors, integrations
- **8 runtime dependencies**, building to 100% static HTML
- Light and dark mode set pre-paint, fully responsive, AI-ready docs included
## A full page set
- Home, About, Features, Pricing
- Integrations directory plus a detail route per integration (nine shipped as demo content)
- Blog index, post pages, and an RSS feed
- Contact, sign-in, sign-up
- Privacy, terms, and a 404
Content-driven routes come from collections, so the integrations directory and the blog both grow by adding a file, not by wiring a page.
## Built to launch a product site you can grow into
Most marketing templates are a landing page with a blog stapled on. The moment you need a pricing comparison table, a per-integration detail page, or an author byline that resolves to a real profile, you are writing the theme yourself.
Olsa ships those surfaces already built. Pricing has plans and a comparison matrix. Integrations is a real directory: nine entries, each with a category, a rating, requirements, a logo glyph, and its own detail route, sorted and featured from frontmatter. The blog resolves authors through a cross-collection reference, so a post that names a missing author fails the build instead of rendering a blank byline. Auth pages are real markup you can point at whatever backend you choose later.
That is the arbitrage. Assembling this set by hand is a fortnight of decisions about component boundaries and content shapes. Here it is a clone and an afternoon of copy edits.
## Eight dependencies, and none of the ones you expect
The whole runtime manifest:
```
"dependencies": {
"@astrojs/mdx": "^7.0.0",
"@astrojs/sitemap": "^3.7.3",
"@fontsource-variable/host-grotesk": "^5.3.0",
"@tailwindcss/vite": "^4.3.2",
"astro": "^7.0.3",
"tailwind-merge": "^3.6.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.3.2"
}
```
No SEO package. `BaseHead` emits every meta, OpenGraph, and Twitter tag natively, structured data comes from typed JSON-LD builders that hold a stable `@id` graph across the site, and `robots.txt`, `llms.txt`, the sitemap, and the RSS feed are all dynamic endpoints resolving against one configured domain.
No animation library either. The motion catalog is a dependency-free port of tailwind-animations, roughly 87 `animate-*` utilities plus an owned scroll-driven extension, with a global `prefers-reduced-motion` guard the upstream does not ship.
No icon package. 571 icons live in a typed registry inlined at build time, so `` autocompletes and a wrong name fails type-checking rather than rendering nothing.
Every one of those layers is a file in your repo. When you need it to behave differently, you edit it.
## A rebrand is one file
Styling runs on three layers. Palette aliases in `@theme` name your brand on top of Tailwind's scale. Semantic runtime variables in `:root` and `.dark` flip with the theme. An `@theme inline` bridge wires those variables to utilities. Markup only ever writes `bg-primary` or `text-foreground`, never `bg-violet-700`, which is what makes dark mode free instead of a second pass over every component.
```
/* src/styles/tailwind-theme.css: repoint the ramp, the whole site follows */
@theme {
--color-primary-600: var(--color-purple-600);
--color-primary-700: var(--color-purple-700);
}
```
Dark mode itself is class-based and set pre-paint by an inline script that reads `localStorage` defensively, so there is no flash of the wrong theme on first load. Every primitive is a `tailwind-variants` config that merges consumer overrides properly through `tailwind-merge`, and the component barrels export named-only, so import style cannot drift across 44 files.
## Zero JavaScript by default
Interactivity reaches for the platform first: `` for disclosure, `