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

Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and responsive web applications.

<div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
  <a href="/app-ui-components/page-headers" 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-components/page-headers.webp" alt="Page headers" 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-components/page-headers-1.webp" alt="Page headers" 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">Page headers</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">6 components</span>
    </div>
  </a>

  <a href="/app-ui-components/card-headers" 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-components/card-headers.webp" alt="Card headers" 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-components/card-headers-1.webp" alt="Card headers" 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">Card headers</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">2 components</span>
    </div>
  </a>

  <a href="/app-ui-components/section-headers" 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-components/section-headers.webp" alt="Section headers" 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-components/section-headers-1.webp" alt="Section headers" 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">Section headers</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">7 components</span>
    </div>
  </a>

  <a href="/app-ui-components/section-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/app-ui-components/section-footers.webp" alt="Section 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/app-ui-components/section-footers-1.webp" alt="Section 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">Section footers</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">4 components</span>
    </div>
  </a>

  <a href="/app-ui-components/sidebar-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/app-ui-components/sidebar-navigations.webp" alt="Sidebar 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/app-ui-components/sidebar-navigations-1.webp" alt="Sidebar 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">Sidebar navigations</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">5 components</span>
    </div>
  </a>

  <a href="/app-ui-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/app-ui-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/app-ui-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">2 components</span>
    </div>
  </a>

  <a href="/app-ui-components/modals" 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-components/modals.webp" alt="Modals" 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-components/modals-1.webp" alt="Modals" 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">Modals</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">46 components</span>
    </div>
  </a>

  <a href="/app-ui-components/command-menus" 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-components/command-menus.webp" alt="Command menus" 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-components/command-menus-1.webp" alt="Command menus" 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">Command menus</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">9 components</span>
    </div>
  </a>

  <a href="/app-ui-components/line-bar-charts" 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-components/line-bar-charts.webp" alt="Line & bar charts" 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-components/line-bar-charts-1.webp" alt="Line & bar charts" 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">Line & bar charts</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">4 components</span>
    </div>
  </a>

  <a href="/app-ui-components/activity-gauges" 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-components/activity-gauges.webp" alt="Activity gauges" 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-components/activity-gauges-1.webp" alt="Activity gauges" 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">Activity gauges</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">4 components</span>
    </div>
  </a>

  <a href="/app-ui-components/pie-charts" 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-components/pie-charts.webp" alt="Pie charts" 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-components/pie-charts-1.webp" alt="Pie charts" 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">Pie charts</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">4 components</span>
    </div>
  </a>

  <a href="/app-ui-components/radar-charts" 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-components/radar-charts.webp" alt="Radar charts" 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-components/radar-charts-1.webp" alt="Radar charts" 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">Radar charts</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component</span>
    </div>
  </a>

  <a href="/app-ui-components/metrics" 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-components/metrics.webp" alt="Metrics" 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-components/metrics-1.webp" alt="Metrics" 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</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">16 components</span>
    </div>
  </a>

  <a href="/app-ui-components/slideout-menus" 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-components/slideout-menus.webp" alt="Slideout menus" 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-components/slideout-menus-1.webp" alt="Slideout menus" 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">Slideout menus</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">20 components</span>
    </div>
  </a>

  <a href="/app-ui-components/inline-ctas" 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-components/inline-ctas.webp" alt="Inline CTAs" 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-components/inline-ctas-1.webp" alt="Inline CTAs" 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">Inline CTAs</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">7 components</span>
    </div>
  </a>

  <a href="/app-ui-components/paginations" 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-components/paginations.webp" alt="Paginations" 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-components/paginations-1.webp" alt="Paginations" 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">Paginations</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">14 components</span>
    </div>
  </a>

  <a href="/app-ui-components/carousels" 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-components/carousels.webp" alt="Carousels" 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-components/carousels-1.webp" alt="Carousels" 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">Carousels</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">2 components</span>
    </div>
  </a>

  <a href="/app-ui-components/progress-steps" 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-components/progress-steps.webp" alt="Progress steps" 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-components/progress-steps-1.webp" alt="Progress steps" 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">Progress steps</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">18 components</span>
    </div>
  </a>

  <a href="/app-ui-components/activity-feeds" 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-components/activity-feeds.webp" alt="Activity feeds" 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-components/activity-feeds-1.webp" alt="Activity feeds" 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">Activity feeds</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">4 components</span>
    </div>
  </a>

  <a href="/app-ui-components/messaging" 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-components/messaging.webp" alt="Messaging" 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-components/messaging-1.webp" alt="Messaging" 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">Messaging</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">4 components</span>
    </div>
  </a>

  <a href="/app-ui-components/tabs" 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-components/tabs.webp" alt="Tabs" 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-components/tabs-1.webp" alt="Tabs" 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">Tabs</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">10 components</span>
    </div>
  </a>

  <a href="/app-ui-components/tables" 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-components/tables.webp" alt="Tables" 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-components/tables-1.webp" alt="Tables" 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">Tables</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">12 components</span>
    </div>
  </a>

  <a href="/app-ui-components/breadcrumbs" 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-components/breadcrumbs.webp" alt="Breadcrumbs" 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-components/breadcrumbs-1.webp" alt="Breadcrumbs" 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">Breadcrumbs</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">3 components</span>
    </div>
  </a>

  <a href="/app-ui-components/alerts" 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-components/alerts.webp" alt="Alerts" 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-components/alerts-1.webp" alt="Alerts" 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">Alerts</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">12 components</span>
    </div>
  </a>

  <a href="/app-ui-components/notifications" 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-components/notifications.webp" alt="Notifications" 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-components/notifications-1.webp" alt="Notifications" 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">Notifications</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">9 components</span>
    </div>
  </a>

  <a href="/app-ui-components/date-pickers" 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-components/date-pickers.webp" alt="Date pickers" 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-components/date-pickers-1.webp" alt="Date pickers" 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">Date pickers</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">6 components</span>
    </div>
  </a>

  <a href="/app-ui-components/calendars" 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-components/calendars.webp" alt="Calendars" 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-components/calendars-1.webp" alt="Calendars" 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">Calendars</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">3 components</span>
    </div>
  </a>

  <a href="/app-ui-components/file-uploaders" 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-components/file-uploaders.webp" alt="File uploaders" 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-components/file-uploaders-1.webp" alt="File uploaders" 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">File uploaders</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">5 components</span>
    </div>
  </a>

  <a href="/app-ui-components/content-dividers" 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-components/content-dividers.webp" alt="Content dividers" 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-components/content-dividers-1.webp" alt="Content dividers" 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 dividers</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">18 components</span>
    </div>
  </a>

  <a href="/app-ui-components/loading-indicators" 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-components/loading-indicators.webp" alt="Loading indicators" 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-components/loading-indicators-1.webp" alt="Loading indicators" 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">Loading indicators</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">3 components</span>
    </div>
  </a>

  <a href="/app-ui-components/empty-states" 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-components/empty-states.webp" alt="Empty states" 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-components/empty-states-1.webp" alt="Empty states" 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">Empty states</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">3 components</span>
    </div>
  </a>

  <a href="/app-ui-components/code-snippets" 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-components/code-snippets.webp" alt="Code snippets" 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-components/code-snippets-1.webp" alt="Code snippets" 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">Code snippets</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component</span>
    </div>
  </a>
</div>