> ## 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 examples

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 pages, blogs, sign up pages—everything you need to design modern and responsive websites. Built with React Aria and styled with Tailwind CSS.

<div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
  <a href="/marketing-examples/landing-pages" 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-examples/landing-pages.webp" alt="Landing pages" 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-examples/landing-pages-1.webp" alt="Landing pages" 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">Landing pages</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/pricing-pages" 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-examples/pricing-pages.webp" alt="Pricing pages" 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-examples/pricing-pages-1.webp" alt="Pricing pages" 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 pages</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/blogs" 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-examples/blogs.webp" alt="Blogs" 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-examples/blogs-1.webp" alt="Blogs" 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">Blogs</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/blog-posts" 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-examples/blog-posts.webp" alt="Blog posts" 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-examples/blog-posts-1.webp" alt="Blog posts" 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 posts</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/about-pages" 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-examples/about-pages.webp" alt="About pages" 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-examples/about-pages-1.webp" alt="About pages" 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">About pages</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/contact-pages" 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-examples/contact-pages.webp" alt="Contact pages" 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-examples/contact-pages-1.webp" alt="Contact pages" 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 pages</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/team-pages" 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-examples/team-pages.webp" alt="Team pages" 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-examples/team-pages-1.webp" alt="Team pages" 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 pages</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/legal-pages" 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-examples/legal-pages.webp" alt="Legal pages" 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-examples/legal-pages-1.webp" alt="Legal pages" 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">Legal pages</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">5 pages</span>
    </div>
  </a>

  <a href="/marketing-examples/faq-pages" 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-examples/faq-pages.webp" alt="FAQ pages" 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-examples/faq-pages-1.webp" alt="FAQ pages" 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 pages</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 pages</span>
    </div>
  </a>
</div>