Components Overview

SaaSKit includes a comprehensive library of reusable components to help you build beautiful interfaces quickly.

Component Categories

Layout Components

• Header - Navigation header with mobile menu
• Footer - Site footer with links and social icons
• BaseLayout - Main page layout wrapper

Hero Sections

• Hero1 - Centered hero with CTA
• Hero2 - Split hero with image
• Hero3 - Gradient hero with features
• Hero4 - Minimal hero design
• Hero5 - Video background hero

Content Sections

• Features - Feature showcase grid
• Stats - Statistics display
• Testimonials - Customer testimonials
• PricingCards - Pricing table
• FAQ - Frequently asked questions
• CTA - Call-to-action sections
• LogoCloud - Partner/client logos

UI Components

• GlassCard - Glassmorphism card effect
• DarkModeToggle - Dark mode switcher
• MobileMenu - Mobile navigation menu
• Icons - Icon components
• SocialIcons - Social media icons

Using Components

Import and Use

---
import Hero1 from '../components/heros/Hero1';
import Features from '../components/sections/Features';
---

<Hero1 />
<Features />

With Props

---
import GlassCard from '../components/GlassCard';
---

<GlassCard title="Feature" description="Description here" />

Component Structure

All components follow a consistent structure:

components/
├── backgrounds/    # Background components
├── heros/         # Hero section variants
├── sections/      # Content sections
└── [Component].tsx or .astro

Styling

Components use Tailwind CSS for styling. You can:

1. Override classes - Pass custom classes as props
2. Extend styles - Use Tailwind’s @apply directive
3. Customize theme - Modify tailwind.config.mjs

Best Practices

1. Reusability - Keep components generic and reusable
2. Props - Use TypeScript interfaces for props
3. Accessibility - Include ARIA labels and semantic HTML
4. Performance - Lazy load heavy components
5. Documentation - Document component props and usage

Component Examples

Simple Component

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

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

<div class="p-6 bg-white dark:bg-gray-800 rounded-lg">
  <h2 class="text-2xl font-bold">{title}</h2>
  {description && <p class="mt-2">{description}</p>}
</div>

React Component

interface Props {
  title: string;
  onClick?: () => void;
}

export default function Button({ title, onClick }: Props) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      {title}
    </button>
  );
}

Next Steps

• Hero Components - Explore hero section variants
• Section Components - Content section components
• UI Components - Reusable UI elements
• Customization - Customize components

Ready to build? Start exploring individual components! 🚀