> ## Documentation Index
> Fetch the complete documentation index at: https://mds.stepanu.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria.

# Marketing website components

Mavka UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria. Everything you need to design and develop modern, beautiful interfaces and websites—fast. Just copy, paste, and build.

Landing page headers and website sections—everything you need to design modern and responsive marketing websites.

<div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
  <a href="/marketing-components/header-navigations" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/header-navigations.webp" alt="Header navigations" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/header-navigations-1.webp" alt="Header navigations" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Header navigations</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 components</span>
    </div>
  </a>

  <a href="/marketing-components/header-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/header-sections.webp" alt="Header sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/header-sections-1.webp" alt="Header sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Header sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">44 components</span>
    </div>
  </a>

  <a href="/marketing-components/features-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/features-sections.webp" alt="Features sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/features-sections-1.webp" alt="Features sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Features sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">42 components</span>
    </div>
  </a>

  <a href="/marketing-components/pricing-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/pricing-sections.webp" alt="Pricing sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/pricing-sections-1.webp" alt="Pricing sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Pricing sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">22 components</span>
    </div>
  </a>

  <a href="/marketing-components/cta-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/cta-sections.webp" alt="CTA sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/cta-sections-1.webp" alt="CTA sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">CTA sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 components</span>
    </div>
  </a>

  <a href="/marketing-components/metrics-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/metrics-sections.webp" alt="Metrics sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/metrics-sections-1.webp" alt="Metrics sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Metrics sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">16 components</span>
    </div>
  </a>

  <a href="/marketing-components/newsletter-cta-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/newsletter-cta-sections.webp" alt="Newsletter CTA sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/newsletter-cta-sections-1.webp" alt="Newsletter CTA sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Newsletter CTA sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">16 components</span>
    </div>
  </a>

  <a href="/marketing-components/testimonial-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/testimonial-sections.webp" alt="Testimonial sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/testimonial-sections-1.webp" alt="Testimonial sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Testimonial sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">26 components</span>
    </div>
  </a>

  <a href="/marketing-components/social-proof-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/social-proof-sections.webp" alt="Social proof sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/social-proof-sections-1.webp" alt="Social proof sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Social proof sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">12 components</span>
    </div>
  </a>

  <a href="/marketing-components/blog-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/blog-sections.webp" alt="Blog sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/blog-sections-1.webp" alt="Blog sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Blog sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">24 components</span>
    </div>
  </a>

  <a href="/marketing-components/content-rich-text-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/content-rich-text-sections.webp" alt="Content & rich text sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/content-rich-text-sections-1.webp" alt="Content & rich text sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Content & rich text sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">22 components</span>
    </div>
  </a>

  <a href="/marketing-components/contact-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/contact-sections.webp" alt="Contact sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/contact-sections-1.webp" alt="Contact sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Contact sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">36 components</span>
    </div>
  </a>

  <a href="/marketing-components/team-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/team-sections.webp" alt="Team sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/team-sections-1.webp" alt="Team sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Team sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">14 components</span>
    </div>
  </a>

  <a href="/marketing-components/careers-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/careers-sections.webp" alt="Careers sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/careers-sections-1.webp" alt="Careers sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Careers sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">12 components</span>
    </div>
  </a>

  <a href="/marketing-components/faq-sections" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/faq-sections.webp" alt="FAQ sections" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/faq-sections-1.webp" alt="FAQ sections" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">FAQ sections</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">16 components</span>
    </div>
  </a>

  <a href="/marketing-components/footers" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/footers.webp" alt="Footers" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/footers-1.webp" alt="Footers" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Footers</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">40 components</span>
    </div>
  </a>

  <a href="/marketing-components/banners" className="block overflow-hidden rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#09090B] hover:shadow-sm dark:hover:shadow-md transition-all">
    <div className="aspect-[16/10] overflow-hidden bg-gray-50 dark:bg-[#0F1117] relative flex items-center justify-center">
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/banners.webp" alt="Banners" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />

      <img src="https://mintlify.s3.us-west-1.amazonaws.com/mavka/images/marketing-components/banners-1.webp" alt="Banners" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" />
    </div>

    <div className="p-4 flex flex-col gap-1 border-t border-gray-200 dark:border-white/10">
      <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">Banners</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">16 components</span>
    </div>
  </a>
</div>