Components

Solo Kit comes with a collection of pre-built section components that you can use to quickly build beautiful pages. These components are designed to work together seamlessly and can be easily customized to match your brand.

Overview

All section components are located in /components/sections/ and can be imported individually or as a group. They're built with TypeScript, Tailwind CSS, and follow modern React patterns.

import { HeroSection, FeaturesGrid, PricingSection } from '@/components/sections';

export default function CustomPage() {
  return (
    <div>
      <HeroSection />
      <FeaturesGrid />
      <PricingSection />
    </div>
  );
}

Component Categories

Homepage Sections

These components make up the main landing page experience:

• Hero Section - Main landing hero with title, subtitle, and CTAs
• Features Grid - "What's Included" features showcase
• Tech Stack - Technology stack overview
• Product Showcase - Product demonstration section
• AI Integration - AI-related features highlight
• Stats Section - Key statistics and metrics
• Testimonials Section - Customer testimonials
• Project Showcase - Project examples/portfolio
• Pricing Section - Pricing plans and options
• Final CTA - Bottom call-to-action section

FAQ Page Sections

Components specifically designed for FAQ and help pages:

• FAQ Hero - FAQ page header
• FAQ Content - Main FAQ content area
• FAQ CTA - FAQ page call-to-action

Design Principles

All components follow these design principles:

• Responsive - Work perfectly on mobile, tablet, and desktop
• Accessible - Built with semantic HTML and ARIA attributes
• Customizable - Easy to modify colors, content, and styling
• Performance - Optimized for fast loading and smooth animations
• Dark Mode - Support both light and dark themes

Usage Guidelines

1. Import components from the sections barrel export
2. Customize content by editing the component files directly
3. Override styles using Tailwind classes or CSS modules
4. Mix and match components to create unique page layouts
5. Follow responsive patterns established in the existing components

Next Steps

• Browse individual component documentation
• Check out the Getting Started guide
• Learn about the Architecture
• See components in action on the homepage and FAQ page