Skip to content
Early Access

Accordian

Accordians allow users to show or hide content, such as FAQs or descriptions.

Basic

PreviewCode
<div class="w-full max-w-lg space-y-4 p-4">
  <div class="border-b border-slate-200 pb-4 last-of-type:border-b-0 last-of-type:pb-0">
    <h3>
      <button class="flex w-full items-center justify-between">
        <span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 stroke-slate-400 rotate-180">
          <path d="m6 9 6 6 6-6">
          </path>
        </svg>
      </button>
    </h3>
    <p class="mt-2 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
  </div>
  <div class="border-b border-slate-200 pb-4 last-of-type:border-b-0 last-of-type:pb-0">
    <h3>
      <button class="flex w-full items-center justify-between">
        <span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 stroke-slate-400 rotate-0">
          <path d="m6 9 6 6 6-6">
          </path>
        </svg>
      </button>
    </h3>
  </div>
  <div class="border-b border-slate-200 pb-4 last-of-type:border-b-0 last-of-type:pb-0">
    <h3>
      <button class="flex w-full items-center justify-between">
        <span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 stroke-slate-400 rotate-0">
          <path d="m6 9 6 6 6-6">
          </path>
        </svg>
      </button>
    </h3>
  </div>
</div>

Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.

Background with Hover

PreviewCode
<div class="w-full max-w-lg space-y-2 p-4">
  <div class="rounded-lg transition hover:bg-slate-100 bg-slate-100">
    <h3>
      <button class="flex w-full items-center space-x-2 p-4">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
          <circle cx="12" cy="12.5" r="9">
          </circle>
          <path d="M8.667 12.5h7">
          </path>
        </svg>
        <span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
      </button>
    </h3>
    <p class="px-4 pb-4 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
  </div>
  <div class="rounded-lg transition hover:bg-slate-100">
    <h3>
      <button class="flex w-full items-center space-x-2 p-4">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
          <circle cx="12" cy="12.5" r="9">
          </circle>
          <path d="M15.5 12.5H12m0 0H8.5m3.5 0V9m0 3.5V16">
          </path>
        </svg>
        <span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
      </button>
    </h3>
  </div>
  <div class="rounded-lg transition hover:bg-slate-100">
    <h3>
      <button class="flex w-full items-center space-x-2 p-4">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
          <circle cx="12" cy="12.5" r="9">
          </circle>
          <path d="M15.5 12.5H12m0 0H8.5m3.5 0V9m0 3.5V16">
          </path>
        </svg>
        <span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
      </button>
    </h3>
  </div>
</div>

Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.

Boxed

PreviewCode
<div class="m-4 w-full max-w-lg divide-y rounded-lg border border-slate-200">
  <div>
    <h3>
      <button class="flex w-full items-center justify-between p-4">
        <span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform text-slate-400 rotate-180">
          <path d="m6 7 6 6 6-6">
          </path>
          <path d="m6 11 6 6 6-6">
          </path>
        </svg>
      </button>
    </h3>
    <p class="px-4 pb-4 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
  </div>
  <div>
    <h3>
      <button class="flex w-full items-center justify-between p-4">
        <span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform text-slate-400 rotate-0">
          <path d="m6 7 6 6 6-6">
          </path>
          <path d="m6 11 6 6 6-6">
          </path>
        </svg>
      </button>
    </h3>
  </div>
  <div>
    <h3>
      <button class="flex w-full items-center justify-between p-4">
        <span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform text-slate-400 rotate-0">
          <path d="m6 7 6 6 6-6">
          </path>
          <path d="m6 11 6 6 6-6">
          </path>
        </svg>
      </button>
    </h3>
  </div>
</div>

Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.

Lined with Hover

PreviewCode
<div class="w-full max-w-lg space-y-2 ">
  <div class="relative ">
    <h3 class="rounded bg-white transition hover:bg-slate-100">
      <button class="flex w-full items-center space-x-2 p-2">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
          <circle cx="12" cy="12.5" r="9">
          </circle>
          <path d="M8.667 12.5h7">
          </path>
        </svg>
        <span class="text-left text-sm font-medium text-slate-950">What is a micro-interaction?</span>
      </button>
    </h3>
    <div class="relative px-4">
      <div class="absolute h-full w-2">
        <div class="h-full w-px bg-slate-300">
        </div>
      </div>
      <p class="pl-4 text-sm text-slate-500">Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.</p>
    </div>
  </div>
  <div class="relative ">
    <h3 class="rounded bg-white transition hover:bg-slate-100">
      <button class="flex w-full items-center space-x-2 p-2">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
          <circle cx="12" cy="12.5" r="9">
          </circle>
          <path d="M15.5 12.5H12m0 0H8.5m3.5 0V9m0 3.5V16">
          </path>
        </svg>
        <span class="text-left text-sm font-medium text-slate-950">Why should I use a micro-interaction?</span>
      </button>
    </h3>
  </div>
  <div class="relative ">
    <h3 class="rounded bg-white transition hover:bg-slate-100">
      <button class="flex w-full items-center space-x-2 p-2">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-500">
          <circle cx="12" cy="12.5" r="9">
          </circle>
          <path d="M15.5 12.5H12m0 0H8.5m3.5 0V9m0 3.5V16">
          </path>
        </svg>
        <span class="text-left text-sm font-medium text-slate-950">How do I use a micro-interaction?</span>
      </button>
    </h3>
  </div>
</div>

Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.