Astro Base

A minimal, modern starter template for building fast websites with Astro. This template includes everything you need to get started with a beautiful landing page, complete with animations, icons, and content management capabilities.

Features

  • Astro - Lightning-fast static site generation
  • React - Component-based UI library for interactive components
  • Tailwind CSS v4 - Utility-first CSS framework for rapid styling
  • Framer Motion - Smooth scroll reveal animations with spring physics
  • Astro Icons - Beautiful icon component library with Tabler icon set
  • MDX - Write JSX in your Markdown documents
  • Sass - CSS preprocessor with variables, mixins, and nesting
  • Tailwind Typography - Beautiful typography styles for markdown content

Getting Started

Installation

  1. Clone the repository 
    git clone https://github.com/jonnysmillie/astro-base.git
cd astro-base
  2. Install dependencies 
    npm install
  3. Start the development server 
    npm run dev
  4. Open your browser - Navigate to http://localhost:4321

Available Scripts

  • npm install - Installs dependencies
  • npm run dev - Starts local dev server at localhost:4321
  • npm run build - Build your production site to ./dist/
  • npm run preview - Preview your build locally
  • npm run astro - Run CLI commands like astro add, astro check

Styling

Tailwind CSS

This project uses Tailwind CSS v4 for styling. All components use Tailwind utility classes.

Global Styles:

  • Located in src/styles/global.css
  • Imports Tailwind CSS
  • Includes Tailwind Typography plugin for markdown styling

Configuration:

  • tailwind.config.mjs - Tailwind configuration with Typography plugin

Sass

Sass is installed and ready to use. You can use Sass in component <style> blocks. See src/components/SassExample.astro for a complete example.

Components

ScrollReveal

A React component using Framer Motion for scroll-triggered animations with the following props:

  • delay - Animation delay in seconds (default: 0)
  • direction - Animation direction: "up" | "down" | "left" | "right" (default: "up")
  • distance - Distance to travel in pixels (default: 50)
  • scale - Enable scale animation (default: false)

Icons

Use Tabler icons with astro-icon. Browse available icons at Tabler Icons.