# Astro templates & component libraries — tooling survey for the kicad-wasm site **Scope:** Modern, popular **Astro** landing-page templates and component/UI libraries that are simple to set up and give a beautiful design skeleton out of the box — free *and* paid — chosen for the **kicad-wasm** marketing site (a WebAssembly browser port of KiCad; a technical EDA / dev-tool). **Date:** 2026-06-07 · **Companion to:** `brand-guide.md`, `marketing-site-playbook.md`, `landing-page-best-practices.md` (this file is the *implementation-tooling* layer — what to build the skeleton **with**; the others cover brand, content/CRO, and competitive positioning). > ### ⚠️ Read this first — the site already exists > `site/` is **already an Astro `^6.4.4` project**: `output: 'static'`, `@astrojs/vercel` adapter, > `prefetch` on, with a **hand-rolled CSS design system** (`src/styles/global.css` — CSS custom > properties, dark theme: `--bg:#0b1020`, `--accent:#4f7cff`, `--radius:10px`). It has > `BaseLayout`, `Header`, `Footer`, `index`, a `blog/` collection, and legal pages. > **Tailwind is NOT installed.** So this is *not* a greenfield "pick a template" decision — most of > the libraries below are Tailwind-based, which makes **§7 Decision 0 (adopt Tailwind, or stay > CSS-only?)** the real fork in the road. Don't scaffold a fresh template *over* the working site; > the templates below are best used as **block-harvest references**, not a foundation to overwrite. **Methodology:** deep-research harness — 5 search angles → 22 sources fetched → 101 candidate claims → top 25 adversarially fact-checked (3 skeptics each, 2/3 to kill). 24 confirmed, 1 refuted. Stars / versions / prices are point-in-time (June 2026) and will drift — re-verify before buying/pinning. **Confidence legend:** | Marker | Meaning | |---|---| | ✅ | Verified 3-0 against primary sources this run | | ⚠️ | Verified with a caveat (2-1 vote, or a soft/vendor-reported sub-claim) | | 📋 | Established ecosystem fact, included for breadth; not independently re-verified this run | | ❌ | Tested and **refuted** — do not rely on it | --- ## TL;DR for kicad-wasm 1. **You already have an Astro site, not a blank slate.** The highest-leverage move is **`npx astro add tailwind`** on the existing `site/`, then layer a component library on top — *not* replacing `global.css` with a whole new template. 2. **Best free component layer once Tailwind is in: [daisyUI](https://daisyui.com)** ✅ — 65 components, 35 themes, config-free v5 install, semantic classes that coexist with your CSS-var tokens. Its `mockup-window` / `mockup-code` / `mockup-browser` components are perfect for framing the live WASM demo and CLI snippets. 3. **Best paid: [Tailwind Plus](https://tailwindcss.com/plus)** ✅ ($299 one-time) — 500+ components in **vanilla HTML**; paste Marketing blocks (hero, pricing, features, FAQ) straight into `.astro` and recolor to your tokens. Best ROI of any paid option here. 4. **Best template to mine for blocks (free): [AstroWind](https://github.com/arthelokyo/astrowind)** ✅ — most-starred Astro theme (~5.7k★), MIT, **Astro v6 + Tailwind v4 (matches your Astro 6.4)**. Copy individual widget components (Hero, Features, Pricing, FAQ) rather than adopting wholesale. 5. **Code blocks:** add **[Expressive Code](https://expressive-code.com)** ✅ for install/usage snippets (copy button, titles, highlighting) — table-stakes for a dev tool. 6. **Stay light:** the page will host a heavy WASM demo. **Prefer zero-JS Astro/Tailwind + CSS/GSAP over React islands.** React component libs (shadcn/Magic UI/Aceternity) are optional flair only. --- ## 1. Landing-page templates / themes A *template/theme* is a whole-page skeleton (hero, features, pricing, footer, config). Fastest path to "beautiful out of the box" — **but** since `site/` already exists, treat these as **reference / block sources** (MIT lets you copy individual components) unless you decide to restart from one. ### Free / open-source | Template | Stars / forks | Stack | License | Maintenance | Notes | |---|---|---|---|---|---| | **[AstroWind](https://github.com/arthelokyo/astrowind)** ✅ | ~5.7k ★ / ~1.6k forks — **most-starred Astro theme** | Astro ^6.4 + Tailwind ^4.3 | MIT | **Active** — beta.60 (May 11 2026), Astro v6 + TW v4 migration done, v2.0 planned, Node ≥22.12 | Astro version **matches your `site/`**. Ships hero/feature/pricing/FAQ/footer widgets + SEO/RSS/sitemap/OG wired. Best mined for individual `~/components/widgets/*`. Org renamed `onwidget`→`arthelokyo` (old URLs redirect; npm still `@onwidget/astrowind`). | | **[Astroship](https://github.com/surjithctly/astroship)** 📋 | popular | Astro + Tailwind | MIT | Maintained (Web3Templates) | Clean SaaS/startup marketing skeleton. Has a paid **Astroship Pro** with more pages/blocks. | | **[mhyfritz/astro-landing-page](https://github.com/mhyfritz/astro-landing-page)** ✅ | 675 ★ / 224 forks | Astro + Tailwind | MIT | ⚠️ **Stale** — last push 2024-11-24 (~18 mo), not archived | Simpler single-page template; dark mode, responsive, a11y, SEO, OG, CSS-var theming. Deps likely need manual upgrade. | | **[RicoUI SaaS Template](https://github.com/ricocc/ricoui-saas-template)** ✅ | OSS | Astro 6 + Tailwind v4 | OSS (MIT-style) | Current | Free SaaS landing in the official directory; demo `ricofast.pages.dev`. | | **ProCleaning** ✅ | — | Astro + Tailwind | free in directory | — | Example free responsive landing listed in the Astro directory. | | **[Astro Paper](https://github.com/satnaing/astro-paper)** 📋 | ~4.7k ★ | Astro + Tailwind | MIT | Active | Blog-first (#2 most-starred Astro theme). Relevant for the `blog/` you already have. | | **[Astroplate](https://github.com/zeon-studio/astroplate)** 📋 | ~1.1k ★ | Astro + Tailwind | MIT | Active | Starter with blog + pages. | > ✅ AstroWind is independently confirmed **#1 by stars** on the `astro-themes` topic (5.7k, ahead of > Astro Paper 4.7k, Astroplate 1.1k), and its SEO claims are verified **at the source-code level**: > `package.json` really lists `@astrojs/sitemap`, `@astrojs/rss`, `astro-seo`, and `astro.config.ts` > calls `sitemap()`. ### Paid / premium | Vendor / product | Price | Stack | Notes | |---|---|---|---| | **[Tailwind Plus](https://tailwindcss.com/plus)** ✅ (ex–Tailwind UI) | **$299** personal / **$979** team (≤25), **one-time, lifetime, no subscription**, 30-day refund | Tailwind — vanilla HTML + React + Vue | Not one theme — a 500+ component library incl. Marketing blocks + full Landing-Page examples. **The recommended paid pick** (see §3). | | **[Cruip](https://cruip.com)** 📋 | free + premium | Tailwind (HTML/React); Astro ports exist | Very polished startup/SaaS landing templates; some free, flagship paid. Classic "looks-expensive" pick. | | **[Lexington Themes](https://lexingtonthemes.com)** ⚠️ | per-theme + **Full Access** | Astro + Tailwind | Large Astro marketing/SaaS catalog. Confirmed as paid/all-access in the directory; exact bundle price not verified this run. | | **[Cosmic Themes](https://cosmicthemes.com)** ⚠️ | per-theme + **All Access** | Astro + Tailwind | Astro-specialist studio; SaaS/landing themes, i18n, blog. Paid confirmed; price not verified this run. | | **AstroVault / Zarex / Fortify Astro** ⚠️ | paid / all-access | Astro + Tailwind | Additional premium Astro vendors in the directory. Existence-as-paid confirmed; pricing/license **not** individually verified. | | **ThemeForest / Lemon Squeezy / Gumroad** 📋 | one-off (~$15–$60 typical) | mostly Astro + Tailwind | Many Astro landing themes; quality/maintenance vary — check last-updated + reviews. | ### Official Astro themes directory — the browsing entry point ✅ **** — canonical first-party catalog. - Dedicated **"Landing pages"** category: *"Showcase your product or service with a stylish landing page template."* - **23 pages** of landing-page-tagged themes (~20/page), with a **Free vs Paid pricing filter**. ✅ - Caveat: size proves quantity, not curation quality — vet each theme's maintenance. --- ## 2. Astro-native / Astro-first component & UI libraries Building blocks as **native `.astro` components or plain Tailwind** — **no React island**, zero added client JS by default. Best fit for a page that also carries a heavy WASM demo. | Library | What it is | Status | Astro fit | License | |---|---|---|---|---| | **[Accessible Astro Components](https://github.com/incluud/accessible-astro-components)** ✅ | 35+ native `.astro` components: Accordion, Breadcrumbs, Card, Pagination, Tabs, Modal, Notification, DarkMode toggle, form fields | npm v5.3.1, active | `import { Modal } from 'accessible-astro-components'` — **zero framework integration**, works with or without Tailwind | MIT | | **[Starwind UI](https://github.com/starwind-ui/starwind-ui)** 📋 | shadcn-style copy-in components **built for Astro** (Tailwind v4), accessible, themeable | Active | Native Astro; CLI adds components to your tree. The shadcn workflow **without React** | open-source | | **[Preline UI](https://preline.co/docs/frameworks-astro.html)** ✅ | Large Tailwind component lib with an **official Astro install guide** + interactive overlays/dropdowns/tabs via its JS plugin | ~6.3k ★, v4.2.0 (2026-05-10), active | First-class Astro; **requires Tailwind first** (architectural dependency) | free, OSS (Apache-2.0) | | **[Flowbite](https://flowbite.com)** 📋 | Tailwind components + marketing blocks; Astro usage docs | ~8k★+, active | Works in Astro via its JS for interactive bits | MIT core; some blocks paid | | **Accessible Astro Starter / Dashboard** 📋 | Full starter projects from the `incluud` team | Active | Complete bases pairing with the components above | MIT | > ⚠️ **Refuted — don't repeat:** the stronger claim that Accessible Astro Components are > *"WCAG-compliant with comprehensive accessibility audits"* did **not** survive verification (1-2). > They're *accessible-by-design* (good ARIA/markup), but make no formal-audit/certification claim. --- ## 3. Tailwind-based component libraries usable in Astro (framework-agnostic HTML) Astro renders plain HTML natively, so any **copy-paste Tailwind HTML** library works with **zero integration** (once Tailwind is installed — see §7 Decision 0). The sweet spot for a fast, light dev-tool page. | Library | Price | What you get | Astro install | Verified | |---|---|---|---|---| | **[Tailwind Plus](https://tailwindcss.com/plus)** | $299 / $979 one-time | **500+ components**; Marketing: Hero (12), CTA (11), Pricing (12), Stats (8), Testimonials (8), Team (9), FAQs (7), Footers (7), Flyout Menus (7), 404 (5), Landing Pages (4 full), About (3). In **vanilla HTML** + React + Vue | Paste HTML into `.astro`. `@tailwindplus/elements` (CDN `