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

# Application UI 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.

Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and responsive web applications.

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

  <a href="/app-ui-examples/dashboards-02" 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/app-ui-examples/dashboards-02.webp" alt="Dashboards 02" 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/app-ui-examples/dashboards-02-1.webp" alt="Dashboards 02" 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">Dashboards 02</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 pages</span>
    </div>
  </a>

  <a href="/app-ui-examples/settings-pages-01" 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/app-ui-examples/settings-pages-01.webp" alt="Settings pages 01" 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/app-ui-examples/settings-pages-01-1.webp" alt="Settings pages 01" 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">Settings pages 01</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 pages</span>
    </div>
  </a>

  <a href="/app-ui-examples/settings-pages-02" 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/app-ui-examples/settings-pages-02.webp" alt="Settings pages 02" 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/app-ui-examples/settings-pages-02-1.webp" alt="Settings pages 02" 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">Settings pages 02</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 pages</span>
    </div>
  </a>

  <a href="/app-ui-examples/informational-pages-01" 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/app-ui-examples/informational-pages-01.webp" alt="Informational pages 01" 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/app-ui-examples/informational-pages-01-1.webp" alt="Informational pages 01" 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">Informational pages 01</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 pages</span>
    </div>
  </a>

  <a href="/app-ui-examples/informational-pages-02" 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/app-ui-examples/informational-pages-02.webp" alt="Informational pages 02" 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/app-ui-examples/informational-pages-02-1.webp" alt="Informational pages 02" 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">Informational pages 02</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 pages</span>
    </div>
  </a>
</div>