Project Structure

Understanding the project structure will help you navigate and customize SaaSKit effectively.

Directory Overview

astro-saas-landing-kit/
├── public/              # Static assets
├── src/
│   ├── components/      # Reusable components
│   ├── content/         # Content collections
│   ├── layouts/         # Page layouts
│   ├── pages/           # Route pages
│   ├── styles/          # Global styles
│   ├── utils/           # Utility functions
│   └── config.ts        # Site configuration
├── astro.config.mjs     # Astro configuration
├── tailwind.config.mjs  # Tailwind configuration
└── package.json         # Dependencies

Key Directories

/public

Static files served as-is:

• Images (/images/)
• Favicon (/favicon.svg)
• robots.txt
• Any other static assets

/src/components

Reusable components organized by type:

components/
├── backgrounds/    # Background components
├── heros/         # Hero section variants
├── sections/      # Content sections
├── Header.astro   # Site header
├── Footer.astro   # Site footer
└── ...

Component Types:

• .astro - Astro components (server-rendered)
• .tsx - React components (client-side interactivity)

/src/content

Content collections using Astro’s content system:

content/
├── blog/          # Blog posts
│   └── *.md
└── docs/          # Documentation
    ├── getting-started/
    ├── components/
    ├── guides/
    └── api/

/src/layouts

Page layout templates:

• BaseLayout.astro - Main layout with header/footer

/src/pages

File-based routing. Each file becomes a route:

• index.astro → /
• about.astro → /about
• blog.astro → /blog
• blog/[...slug].astro → /blog/* (dynamic)

/src/styles

Global styles:

• global.css - Global styles and Tailwind directives

/src/utils

Utility functions:

• images.ts - Image helper functions

File Naming Conventions

Pages

• Use kebab-case: about-us.astro
• Dynamic routes: [...slug].astro or [id].astro

Components

• PascalCase: HeroSection.tsx or HeroSection.astro
• Descriptive names

Content

• kebab-case: getting-started.md
• Organized in folders by category

Configuration Files

astro.config.mjs

Astro framework configuration:

• Integrations (React, Tailwind, etc.)
• Site URL
• Build options

tailwind.config.mjs

Tailwind CSS configuration:

• Theme customization
• Color palette
• Typography
• Plugins

tsconfig.json

TypeScript configuration:

• Compiler options
• Path aliases
• Type definitions

Import Paths

Absolute Imports

import Component from '../components/Component';

Content Collections

import { getCollection } from 'astro:content';
const posts = await getCollection('blog');

Config

import { siteConfig } from '../config';

Best Practices

1. Organize by Feature - Group related components
2. Reusable Components - Keep components generic
3. Consistent Naming - Follow naming conventions
4. Type Safety - Use TypeScript interfaces
5. Documentation - Comment complex logic

Next Steps

• Configuration Guide - Configure your project
• Components Overview - Explore components
• Customization - Start customizing

Structure understood! You’re ready to navigate the codebase. 🗺️