Pre-installed Components 🎨

Indie Kit comes with beautiful, production-ready components that you can use right away! No installation needed - just import and use. ✨

What's Included? 📦

Your Indie Kit installation includes professionally designed components for:

• 🚀 Hero Sections - Attention-grabbing landing page headers
• 📢 Call to Actions - Conversion-focused CTAs
• 💫 Feature Displays - Showcase your product features
• 💬 Testimonials - Build trust with social proof
• 👇 Footer - Clean, minimal footer design

Hero Sections 🚀

Hero sections are the first thing visitors see on your website. Choose from these options:

Hero 1

import Hero1 from "@/components/sections/hero-1";

Hero 2

import Hero2 from "@/components/sections/hero-2";

Call to Action (CTA) 📢

Effective CTAs to drive user engagement:

CTA 1

import CTA1 from "@/components/website/cta-1";

CTA 2

import { CTA2 } from "@/components/website/cta-2";

Feature Displays 💫

Showcase your product features:

Feature Grid

import FeatureGrid from "@/components/sections/feature-grid";

Feature Accordion

import FeatureAccordion from "@/components/sections/feature-accordion";

Testimonials 💬

Display social proof with these testimonial layouts:

Testimonial Grid

import TestimonialGrid from "@/components/sections/testimonial-grid";

Testimonial Style 1

import Testimonial1 from "@/components/sections/testimonial-1";

Testimonial Style 2

import Testimonial2 from "@/components/sections/testimonial-2";

Footer 👇

Minimal footer design for a clean look:

Minimal Footer

How to Use Components 📝

Using these components is simple! Here's a quick example:

Basic Usage

import Hero1 from "@/components/sections/hero-1";

export default function HomePage() {
  return (
    <div>
      <Hero1 />
    </div>
  );
}

Customizing Components

All components accept props for customization:

import TestimonialGrid from "@/components/sections/testimonial-grid";

export default function AboutPage() {
  const testimonials = [
    {
      name: "John Doe",
      role: "CEO at Company",
      content: "This product is amazing!",
      avatar: "/images/john.jpg"
    },
    // ... more testimonials
  ];

  return (
    <TestimonialGrid testimonials={testimonials} />
  );
}

Combining Components

Build complete pages by combining multiple components:

import Hero1 from "@/components/sections/hero-1";
import FeatureGrid from "@/components/sections/feature-grid";
import TestimonialGrid from "@/components/sections/testimonial-grid";
import CTA1 from "@/components/website/cta-1";

export default function LandingPage() {
  return (
    <div>
      <Hero1 />
      <FeatureGrid />
      <TestimonialGrid />
      <CTA1 />
    </div>
  );
}

Component Features ✨

All pre-installed components come with:

• ✅ Tailwind CSS Styling: Easy to customize with utility classes
• ✅ Fully Responsive: Works perfectly on mobile, tablet, and desktop
• ✅ Dark Mode Support: Automatically adapts to your theme
• ✅ TypeScript Types: Full type safety and autocomplete
• ✅ Accessible: Built following ARIA best practices
• ✅ Customizable Props: Pass data and customize behavior
• ✅ Production Ready: Tested and optimized for performance

Customization Guide 🎨

Modify Styles

Since components use Tailwind CSS, you can easily override styles:

<Hero1 className="bg-gradient-to-r from-purple-500 to-pink-500" />

Edit Component Code

Want deeper customization? Edit the component files directly:

src/
  components/
    sections/
      hero-1.tsx         ← Edit this file
      feature-grid.tsx
      testimonial-grid.tsx
    website/
      cta-1.tsx
      cta-2.tsx

Create Variants

Copy a component and create your own variant:

# Copy an existing component
cp src/components/sections/hero-1.tsx src/components/sections/hero-custom.tsx

Then modify hero-custom.tsx to match your needs!

Best Practices 💡

1. Start with Pre-built Components: Use what's included before building custom ones
2. Customize Gradually: Start with props, then modify styles, then edit code if needed
3. Keep Components Reusable: Extract repeated patterns into new components
4. Use TypeScript: Take advantage of type safety for props
5. Test Responsiveness: Always check mobile, tablet, and desktop views
6. Follow Naming Conventions: Keep your custom components consistently named

Component Locations 📁

All pre-installed components live in:

src/
  components/
    sections/          ← Landing page sections
      hero-1.tsx
      hero-2.tsx
      feature-grid.tsx
      feature-accordion.tsx
      testimonial-grid.tsx
      testimonial-1.tsx
      testimonial-2.tsx
    website/           ← Website components
      cta-1.tsx
      cta-2.tsx
      minimal-footer.tsx

Need More Components? 🎁

Want access to 600+ additional components?

These components cover everything from charts and data tables to advanced forms and animations!

Next Steps 🚀

Now that you know what components are available:

1. ✅ Browse through the components above
2. ✅ Copy the import statements and use them in your pages
3. ✅ Customize them to match your brand
4. ✅ Combine multiple components to build complete pages
5. ✅ Check out Community Components for even more options