AstroArabia

AstroArabia is an open-source, Arabic-first RTL Astro theme starter that quickly scaffolds static websites for agencies, SaaS products, portfolios, documentation, and landing pages with minimal client-side JavaScript.

What is AstroArabia?

AstroArabia is a MIT-licensed project starter for the Arabic web community, published under the almahers/astroarabia repository by developer Almahers. It takes a new Astro project initiated with npm create astro@latest -- --template almahers/astroarabia, and generates a static-first site in a dist folder via npm run build. The template runs on Astro 7.2.9 and Vite 8.2.2, requires Node.js 22.12.0 or newer and npm 9.6.5 or later, and ships with a live demo at astroarabia.pages.dev.

What makes AstroArabia stand out?

• RTL-first layouts — Page structure, logical spacing, and micro-interactions are built for right-to-left Arabic reading out of the box, not retrofitted.
• Concrete tech stack — Astro 7.2.9 with Vite 8.2.2, Tailwind CSS v4.3.3 wired through the @tailwindcss/vite plugin, TypeScript 6.0.3, and astro-purgecss for dead CSS removal.
• Six page templates — Ready routes for the homepage, agency (/agency), SaaS product (/saas), documentation (/docs), portfolio (/portfolio), and landing page (/landing) live under src/pages.
• SEO built in — The project includes @astrojs/sitemap, canonical URLs, Open Graph tags, per-page metadata, and a robots.txt in the public folder.
• Dark mode with local memory — Uses Tailwind's dark: variant and saves the visitor's theme choice in the browser's local storage.
• Arabic typography — Alexandria is used for headings and IBM Plex Sans Arabic for body text, both pinned as npm dependencies.
• Code quality tooling — Includes @astrojs/check, ESLint with eslint-plugin-astro, Prettier with prettier-plugin-astro, format checks, and a test command.
• One-click deployment — Direct deploy buttons for Vercel, Netlify, and Cloudflare Pages, plus a .env.example file with a PUBLIC_WHATSAPP_NUMBER placeholder for contact integration.

Who is AstroArabia for?

• Arabic-speaking developers and agencies — Build fast, low-JavaScript client websites that preserve authentic RTL structure instead of patching it afterward.
• SaaS teams and product founders — Create product marketing sites for Arabic users with the /saas path and connect the quote form to WhatsApp or a backend.
• Docs maintainers — Use the /docs route and the Markdown content collection to publish Arabic product guides and reference material.
• Freelancers and creatives — Present work samples using the /portfolio template and share content via the included astro-social-share integration.

Use cases

• Local business websites: An agency can clone the repository, replace the sample content and theme colors, and deploy a fast, SEO-ready Arabic site for a client in minutes.
• Product marketing: A startup can use the landing or SaaS route with dark mode and a quote form that connects to Cloudflare Pages Functions, a Worker, or an external service.
• Technical documentation: Developers can write Markdown articles in the content collection, list them in the docs interface, and rely on astro-toc-smol to generate a table of contents.

How does AstroArabia work?

Installation follows the standard Astro flow: run npm create astro@latest -- --template almahers/astroarabia, then npm install and npm run dev. To customize the identity, edit tailwind.config.mjs and the matching @theme tokens in src/styles/global.css. Copy .env.example to .env and set PUBLIC_WHATSAPP_NUMBER to your own WhatsApp number; the value shipped in the repo is a test placeholder so the template is not tied to a personal number. After edits, npm run build produces the dist folder for static hosting.

Pricing and license

AstroArabia is free to use, modify, and redistribute under the MIT license, as stated in the repository. There is no paid tier or commercial restriction mentioned on the project page.

FAQ

Is AstroArabia free?

Yes. The project is MIT-licensed, and the README explicitly states it is available free for the Arabic community. You can use it for personal or commercial projects.

What pages does AstroArabia include?

The theme includes six ready routes: homepage, agency, SaaS/digital product, documentation, portfolio, and landing. The directories are visible under src/pages.

Does the quote form submit anything?

No. The quote form component is a front-end interface only. It sends no data and requires you to connect it to a backend such as Cloudflare Pages Functions, a Worker, or an external form service, adding your own validation.

What Node.js version is required?

AstroArabia requires Node.js 22.12.0 or newer and npm 9.6.5 or later. The project recommends using an even-numbered release or an LTS version of Node.js.

Is there a live demo?

Yes. A live demo runs at astroarabia.pages.dev and the project says it deploys automatically from the main branch.