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

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

Buttons, inputs, avatars—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="/base-components/featured-icons" 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/base-components/featured-icons.webp" alt="Featured icons" 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/base-components/featured-icons-1.webp" alt="Featured icons" 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">Featured icons</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 6 variants</span>
    </div>
  </a>

  <a href="/base-components/buttons" 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/base-components/buttons.webp" alt="Buttons" 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/base-components/buttons-1.webp" alt="Buttons" 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">Buttons</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 13 variants</span>
    </div>
  </a>

  <a href="/base-components/social-buttons" 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/base-components/social-buttons.webp" alt="Social buttons" 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/base-components/social-buttons-1.webp" alt="Social buttons" 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 buttons</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 12 variants</span>
    </div>
  </a>

  <a href="/base-components/mobile-app-store-buttons" 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/base-components/mobile-app-store-buttons.webp" alt="Mobile app store buttons" 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/base-components/mobile-app-store-buttons-1.webp" alt="Mobile app store buttons" 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">Mobile app store buttons</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 8 variants</span>
    </div>
  </a>

  <a href="/base-components/utility-buttons" 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://mintcdn.com/mavka/M-iLOzQN-Ukaoyh7/images/base-components/utility-buttons.webp?fit=max&auto=format&n=M-iLOzQN-Ukaoyh7&q=85&s=a93e3172ff97dc3c51bb270a8cbbfd9e" alt="Utility buttons" className="block dark:hidden absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" width="800" height="500" data-path="images/base-components/utility-buttons.webp" />

      <img src="https://mintcdn.com/mavka/M-iLOzQN-Ukaoyh7/images/base-components/utility-buttons-1.webp?fit=max&auto=format&n=M-iLOzQN-Ukaoyh7&q=85&s=774c0eec5325099a3dbde48c0b025927" alt="Utility buttons" className="hidden dark:block absolute m-auto inset-0 w-full h-full object-cover object-center pointer-events-none" width="800" height="500" data-path="images/base-components/utility-buttons-1.webp" />
    </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">Utility buttons</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">2 components + 5 variants</span>
    </div>
  </a>

  <a href="/base-components/button-groups" 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/base-components/button-groups.webp" alt="Button groups" 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/base-components/button-groups-1.webp" alt="Button groups" 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">Button groups</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 6 variants</span>
    </div>
  </a>

  <a href="/base-components/badges" 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/base-components/badges.webp" alt="Badges" 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/base-components/badges-1.webp" alt="Badges" 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">Badges</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 25 variants</span>
    </div>
  </a>

  <a href="/base-components/badge-groups" 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/base-components/badge-groups.webp" alt="Badge groups" 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/base-components/badge-groups-1.webp" alt="Badge groups" 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">Badge groups</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 20 variants</span>
    </div>
  </a>

  <a href="/base-components/tags" 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/base-components/tags.webp" alt="Tags" 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/base-components/tags-1.webp" alt="Tags" 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">Tags</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + variants</span>
    </div>
  </a>

  <a href="/base-components/dropdowns" 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/base-components/dropdowns.webp" alt="Dropdowns" 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/base-components/dropdowns-1.webp" alt="Dropdowns" 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">Dropdowns</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 3 variants</span>
    </div>
  </a>

  <a href="/base-components/select" 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/base-components/select.webp" alt="Select" 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/base-components/select-1.webp" alt="Select" 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">Select</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 8 variants</span>
    </div>
  </a>

  <a href="/base-components/inputs" 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/base-components/inputs.webp" alt="Inputs" 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/base-components/inputs-1.webp" alt="Inputs" 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">Inputs</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 10 variants</span>
    </div>
  </a>

  <a href="/base-components/textarea" 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/base-components/textarea.webp" alt="Textareas" 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/base-components/textarea-1.webp" alt="Textareas" 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">Textareas</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 3 variants</span>
    </div>
  </a>

  <a href="/base-components/verification-code-inputs" 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/base-components/verification-code-inputs.webp" alt="Verification code inputs" 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/base-components/verification-code-inputs-1.webp" alt="Verification code inputs" 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">Verification code inputs</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 4 variants</span>
    </div>
  </a>

  <a href="/base-components/text-editors" 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/base-components/rich-text-editors.webp" alt="Rich text editors" 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/base-components/rich-text-editors-1.webp" alt="Rich text editors" 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">Rich text editors</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 5 variants</span>
    </div>
  </a>

  <a href="/base-components/toggles" 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/base-components/toggles.webp" alt="Toggles" 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/base-components/toggles-1.webp" alt="Toggles" 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">Toggles</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 7 variants</span>
    </div>
  </a>

  <a href="/base-components/checkboxes" 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/base-components/checkboxes.webp" alt="Checkboxes" 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/base-components/checkboxes-1.webp" alt="Checkboxes" 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">Checkboxes</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 5 variants</span>
    </div>
  </a>

  <a href="/base-components/radio-buttons" 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/base-components/radio-buttons.webp" alt="Radio buttons" 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/base-components/radio-buttons-1.webp" alt="Radio buttons" 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">Radio buttons</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 5 variants</span>
    </div>
  </a>

  <a href="/base-components/radio-groups" 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/base-components/radio-groups.webp" alt="Radio groups" 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/base-components/radio-groups-1.webp" alt="Radio groups" 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">Radio groups</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">5 components</span>
    </div>
  </a>

  <a href="/base-components/avatars" 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/base-components/avatars.webp" alt="Avatars" 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/base-components/avatars-1.webp" alt="Avatars" 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">Avatars</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">3 components + 11 variants</span>
    </div>
  </a>

  <a href="/base-components/tooltips" 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/base-components/tooltips.webp" alt="Tooltips" 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/base-components/tooltips-1.webp" alt="Tooltips" 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">Tooltips</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 11 variants</span>
    </div>
  </a>

  <a href="/base-components/progress-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/base-components/progress-indicators.webp" alt="Progress 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/base-components/progress-indicators-1.webp" alt="Progress 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">Progress indicators</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">2 components + 9 variants</span>
    </div>
  </a>

  <a href="/base-components/sliders" 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/base-components/sliders.webp" alt="Sliders" 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/base-components/sliders-1.webp" alt="Sliders" 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">Sliders</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 4 variants</span>
    </div>
  </a>

  <a href="/base-components/video-players" 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/base-components/video-players.webp" alt="Video players" 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/base-components/video-players-1.webp" alt="Video players" 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">Video players</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 3 variants</span>
    </div>
  </a>

  <a href="/base-components/credit-cards" 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/base-components/credit-cards.webp" alt="Credit cards" 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/base-components/credit-cards-1.webp" alt="Credit cards" 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">Credit cards</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 13 variants</span>
    </div>
  </a>

  <a href="/base-components/qr-codes" 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/base-components/qr-codes.webp" alt="QR codes" 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/base-components/qr-codes-1.webp" alt="QR codes" 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">QR codes</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 4 variants</span>
    </div>
  </a>

  <a href="/base-components/illustrations" 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/base-components/illustrations.webp" alt="Illustrations" 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/base-components/illustrations-1.webp" alt="Illustrations" 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">Illustrations</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">1 component + 13 variants</span>
    </div>
  </a>

  <a href="/base-components/rating-badge-and-stars" 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/base-components/rating-badge-and-stars.webp" alt="Rating badge and stars" 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/base-components/rating-badge-and-stars-1.webp" alt="Rating badge and stars" 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">Rating badge and stars</span>
      <span className="text-xs text-gray-500 dark:text-gray-400 truncate">3 components</span>
    </div>
  </a>
</div>