API Reference

Complete reference documentation for SaaSKit’s components, utilities, and configuration.

Configuration API

siteConfig

Main site configuration object.

export const siteConfig = {
  name: string;
  description: string;
  url: string;
  ogImage: string;
  links: {
    twitter: string;
    github: string;
    facebook: string;
  };
  author: {
    name: string;
    email: string;
  };
}

blogConfig

Blog configuration settings.

export const blogConfig = {
  title: string;
  description: string;
  postsPerPage: number;
  featuredPosts: number;
}

features

Feature flags for enabling/disabling features.

export const features = {
  darkMode: boolean;
  blog: boolean;
  newsletter: boolean;
  testimonials: boolean;
  pricing: boolean;
  integrations: boolean;
}

Component APIs

Hero Components

Hero1

Centered hero component.

<Hero1 
  title?: string;
  subtitle?: string;
  primaryCTA?: string;
  primaryCTALink?: string;
  secondaryCTA?: string;
  secondaryCTALink?: string;
/>

Hero2

Split hero with image.

<Hero2 
  title?: string;
  subtitle?: string;
  description?: string;
  image?: string;
  imageAlt?: string;
  primaryCTA?: string;
  primaryCTALink?: string;
/>

Section Components

Features

Feature showcase grid.

<Features 
  title?: string;
  subtitle?: string;
  features?: Array<{
    title: string;
    description: string;
    icon?: string;
  }>;
/>

Stats

Statistics display component.

<Stats 
  stats?: Array<{
    value: string | number;
    label: string;
    description?: string;
  }>;
/>

Testimonials

Customer testimonials carousel.

<Testimonials 
  testimonials?: Array<{
    name: string;
    role: string;
    company: string;
    content: string;
    avatar?: string;
  }>;
/>

PricingCards

Pricing table component.

<PricingCards 
  plans?: Array<{
    name: string;
    price: string;
    period?: string;
    description: string;
    features: string[];
    cta: string;
    ctaLink: string;
    popular?: boolean;
  }>;
/>

FAQ

Frequently asked questions accordion.

<FAQ 
  title?: string;
  subtitle?: string;
  questions?: Array<{
    question: string;
    answer: string;
  }>;
/>

UI Components

GlassCard

Glassmorphism card component.

<GlassCard 
  title: string;
  description?: string;
  children?: React.ReactNode;
  className?: string;
/>

DarkModeToggle

Dark mode switcher button.

<DarkModeToggle 
  className?: string;
/>

Utility Functions

getUnsplashImage

Generate Unsplash image URL.

getUnsplashImage(
  width: number,
  height: number,
  keywords?: string
): string

Example:

const imageUrl = getUnsplashImage(800, 600, 'business,technology');

getUnsplashImageById

Get Unsplash image by ID.

getUnsplashImageById(
  id: string,
  width: number,
  height: number
): string

Example:

const imageUrl = getUnsplashImageById('abc123', 1200, 800);

Content Collections API

getCollection

Get content collection entries.

import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
const docs = await getCollection('docs');

getEntry

Get a single collection entry.

import { getEntry } from 'astro:content';

const post = await getEntry('blog', 'post-slug');

Astro APIs

Astro.props

Access component props.

---
interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

Astro.url

Access current URL.

---
const currentPath = Astro.url.pathname;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

Astro.site

Site URL from config.

---
const siteUrl = Astro.site;
---

TypeScript Types

Blog Post Schema

interface BlogPost {
  title: string;
  description: string;
  pubDate: Date;
  updatedDate?: Date;
  heroImage?: string;
  heroImageAlt?: string;
  author: string;
  tags: string[];
  featured: boolean;
  draft: boolean;
}

Doc Schema

interface Doc {
  title: string;
  description: string;
  category: string;
  order: number;
  icon?: string;
  tags: string[];
  draft: boolean;
  featured: boolean;
}

Environment Variables

Public Variables

Accessible in client and server code:

const apiUrl = import.meta.env.PUBLIC_API_URL;

Private Variables

Server-side only:

const apiKey = import.meta.env.PRIVATE_API_KEY;

Next Steps

• Components Overview - Explore components
• Guides - Learn usage patterns
• Examples - See code examples

Reference complete! Use this as your go-to API guide. 📖