Themer • Kaida

Color

Default

Gray

50
100
200
300
400
500
600
700
800
900

Blue

50
100
200
300
400
500
600
700
800
900

Green

50
100
200
300
400
500
600
700
800
900

Yellow

50
100
200
300
400
500
600
700
800
900

Red

50
100
200
300
400
500
600
700
800
900

Base

white
black

Theme

accent

50
100
200
300
400
500
600
700
800
900

secondary

50
100
200
300
400
500
600
700
800
900

black

black

white

white

Accordion

Description

Accordion

<div class="grid sm:min-w-[300px] md:min-w-[400px]">
  <div data-accordion="open">
    <button
      type="button"
      data-accordion-trigger="#panel-0"
      aria-expanded="false"
      class="flex items-center justify-between gap-16px w-full pt-20px pb-20px px-24px text-h9 rtl:text-right border-t border-accent-200 dark:border-black-600 [&.active]:pb-12px will-change:padding-bottom [&>span]:will-change:opacity transition-all [&>span]:transition-all hover:[&>span]:opacity-70">
      <span>
        Text
      </span>
      <svg
        data-accordion-icon=""
        class="rotate-180 shrink-0"
        aria-hidden="true"
        width="24"
        height="24"
        viewbox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M18 15L12 9L6 15"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
    </button>
    <div
      id="panel-0"
      class="hidden">
      <div class="px-24px pb-20px text-p2">
        <p>
          Description
        </p>
      </div>
    </div>
    <button
      type="button"
      data-accordion-trigger="#panel-1"
      aria-expanded="false"
      class="flex items-center justify-between gap-16px w-full pt-20px pb-20px px-24px text-h9 rtl:text-right border-t border-accent-200 dark:border-black-600 [&.active]:pb-12px will-change:padding-bottom [&>span]:will-change:opacity transition-all [&>span]:transition-all hover:[&>span]:opacity-70">
      <span>
        Text
      </span>
      <svg
        data-accordion-icon=""
        class="rotate-180 shrink-0"
        aria-hidden="true"
        width="24"
        height="24"
        viewbox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M18 15L12 9L6 15"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
    </button>
    <div
      id="panel-1"
      class="hidden">
      <div class="px-24px pb-20px text-p2">
        <p>
          Description
        </p>
      </div>
    </div>
    <button
      type="button"
      data-accordion-trigger="#panel-2"
      aria-expanded="false"
      class="flex items-center justify-between gap-16px w-full pt-20px pb-20px px-24px text-h9 rtl:text-right border-t border-accent-200 dark:border-black-600 [&.active]:pb-12px will-change:padding-bottom [&>span]:will-change:opacity transition-all [&>span]:transition-all hover:[&>span]:opacity-70">
      <span>
        Text
      </span>
      <svg
        data-accordion-icon=""
        class="rotate-180 shrink-0"
        aria-hidden="true"
        width="24"
        height="24"
        viewbox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M18 15L12 9L6 15"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
    </button>
    <div
      id="panel-2"
      class="hidden">
      <div class="px-24px pb-20px text-p2">
        <p>
          Description
        </p>
      </div>
    </div>
  </div>
</div>

Avatar

Image

Text

K

L

M

S

Kaida

K

Kaida

Avatar

Image

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-48px h-48px">
    <img
      src="/assets/images/shared/avatar.png"
      class="object-cover w-full h-full"
      loading="lazy"
      alt="avatar">
    </img>
  </div>
  <!-- M size -->
  <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
    <img
      src="/assets/images/shared/avatar.png"
      class="object-cover w-full h-full"
      loading="lazy"
      alt="avatar">
    </img>
  </div>
  <!-- S size -->
  <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-24px h-24px">
    <img
      src="/assets/images/shared/avatar.png"
      class="object-cover w-full h-full"
      loading="lazy"
      alt="avatar">
    </img>
  </div>
</div>

Text

K

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-48px h-48px">
    <span class="text-black-500 text-p1">
      K
    </span>
  </div>
  <!-- M size -->
  <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px">
    <span class="text-black-500 text-p3">
      K
    </span>
  </div>
  <!-- S size -->
  <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-24px h-24px">
    <span class="text-black-500 text-p4">
      K
    </span>
  </div>
</div>

Avatar with text

Kaida

K

Kaida

<div class="flex flex-col gap-16px">
  <!-- With image -->
  <div class="flex gap-12px items-center">
    <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-24px h-24px">
      <img
        src="/assets/images/shared/avatar.png"
        class="object-cover w-full h-full"
        loading="lazy"
        alt="avatar">
      </img>
    </div>
    <p class="text-p2">
      Kaida
    </p>
  </div>
  <!-- Empty image -->
  <div class="flex gap-12px items-center">
    <div class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-24px h-24px">
      <span class="text-black-500 text-p4">
        K
      </span>
    </div>
    <p class="text-p2">
      Kaida
    </p>
  </div>
</div>

Badge

Default

Hover

Disabled

Default

Badge

Outline

Badge

Dark

Badge

Breadcrumb

Default

Description

Hover

Description

Current page

Description

Button

Default

Hover

Focus

Active

Loading

Disabled

Primary button

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-2px px-8px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
</div>

Only icon

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[42px] h-[42px] text-btn1 [&>svg]:w-24px [&>svg]:h-24px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[30px] h-[30px] text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-24px h-24px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
</div>

Secondary button

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-secondary-500 border-secondary-500 hover:bg-secondary-600/80 hover:border-secondary-600/80 focus:bg-secondary-600/80 focus:border-secondary-600/80 active:bg-secondary-600 active:border-secondary-600 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-secondary-500 border-secondary-500 hover:bg-secondary-600/80 hover:border-secondary-600/80 focus:bg-secondary-600/80 focus:border-secondary-600/80 active:bg-secondary-600 active:border-secondary-600 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-2px px-8px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-secondary-500 border-secondary-500 hover:bg-secondary-600/80 hover:border-secondary-600/80 focus:bg-secondary-600/80 focus:border-secondary-600/80 active:bg-secondary-600 active:border-secondary-600 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
</div>

Only icon

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[42px] h-[42px] text-btn1 [&>svg]:w-24px [&>svg]:h-24px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-secondary-500 border-secondary-500 hover:bg-secondary-600/80 hover:border-secondary-600/80 focus:bg-secondary-600/80 focus:border-secondary-600/80 active:bg-secondary-600 active:border-secondary-600 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[30px] h-[30px] text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-secondary-500 border-secondary-500 hover:bg-secondary-600/80 hover:border-secondary-600/80 focus:bg-secondary-600/80 focus:border-secondary-600/80 active:bg-secondary-600 active:border-secondary-600 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-24px h-24px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-secondary-500 border-secondary-500 hover:bg-secondary-600/80 hover:border-secondary-600/80 focus:bg-secondary-600/80 focus:border-secondary-600/80 active:bg-secondary-600 active:border-secondary-600 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
</div>

Outline button

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-2px px-8px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
</div>

Only icon

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[42px] h-[42px] text-btn1 [&>svg]:w-24px [&>svg]:h-24px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[30px] h-[30px] text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-24px h-24px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
</div>

Danger button

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-red-600 border-red-600 hover:border-red-700 hover:bg-red-700 focus:border-red-700 focus:bg-red-700 active:bg-red-800 active:border-red-800 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-red-600 border-red-600 hover:border-red-700 hover:bg-red-700 focus:border-red-700 focus:bg-red-700 active:bg-red-800 active:border-red-800 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-2px px-8px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-red-600 border-red-600 hover:border-red-700 hover:bg-red-700 focus:border-red-700 focus:bg-red-700 active:bg-red-800 active:border-red-800 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
</div>

Only icon

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[42px] h-[42px] text-btn1 [&>svg]:w-24px [&>svg]:h-24px rounded-8px text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-red-600 border-red-600 hover:border-red-700 hover:bg-red-700 focus:border-red-700 focus:bg-red-700 active:bg-red-800 active:border-red-800 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[30px] h-[30px] text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-red-600 border-red-600 hover:border-red-700 hover:bg-red-700 focus:border-red-700 focus:bg-red-700 active:bg-red-800 active:border-red-800 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-24px h-24px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-red-600 border-red-600 hover:border-red-700 hover:bg-red-700 focus:border-red-700 focus:bg-red-700 active:bg-red-800 active:border-red-800 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
</div>

Ghost button

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-black dark:text-white disabled:opacity-40 border focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-transparent hover:bg-black-100 hover:border-black-100 focus:bg-black-100 focus:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-700 dark:hover:border-black-700 dark:active:bg-black-600 dark:active:border-black-600 dark:focus:bg-black-700 dark:focus:border-black-700 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white disabled:opacity-40 border focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-transparent hover:bg-black-100 hover:border-black-100 focus:bg-black-100 focus:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-700 dark:hover:border-black-700 dark:active:bg-black-600 dark:active:border-black-600 dark:focus:bg-black-700 dark:focus:border-black-700 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap py-2px px-8px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-black dark:text-white disabled:opacity-40 border focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-transparent hover:bg-black-100 hover:border-black-100 focus:bg-black-100 focus:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-700 dark:hover:border-black-700 dark:active:bg-black-600 dark:active:border-black-600 dark:focus:bg-black-700 dark:focus:border-black-700 js_button-theme-element_radius"
    title="Get started">
    Get started
  </button>
</div>

Only icon

<div class="flex flex-col gap-16px items-center">
  <!-- L size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[42px] h-[42px] text-btn1 [&>svg]:w-24px [&>svg]:h-24px rounded-8px text-black dark:text-white disabled:opacity-40 border focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-transparent hover:bg-black-100 hover:border-black-100 focus:bg-black-100 focus:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-700 dark:hover:border-black-700 dark:active:bg-black-600 dark:active:border-black-600 dark:focus:bg-black-700 dark:focus:border-black-700 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- M size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-[30px] h-[30px] text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white disabled:opacity-40 border focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-transparent hover:bg-black-100 hover:border-black-100 focus:bg-black-100 focus:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-700 dark:hover:border-black-700 dark:active:bg-black-600 dark:active:border-black-600 dark:focus:bg-black-700 dark:focus:border-black-700 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
  <!-- S size -->
  <button
    name="button"
    type="button"
    class="flex gap-8px items-center justify-center whitespace-nowrap w-24px h-24px text-btn3 [&>svg]:w-[14px] [&>svg]:h-[14px] rounded-8px text-black dark:text-white disabled:opacity-40 border focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-transparent hover:bg-black-100 hover:border-black-100 focus:bg-black-100 focus:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-700 dark:hover:border-black-700 dark:active:bg-black-600 dark:active:border-black-600 dark:focus:bg-black-700 dark:focus:border-black-700 js_button-theme-element_radius"
    title="Get started">
    <svg
      width="24"
      height="24"
      viewbox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round">
      </path>
    </svg>
  </button>
</div>

Link button

<button
  name="button"
  type="button"
  class="flex gap-8px items-center whitespace-nowrap justify-center text-p3 text-black dark:text-white disabled:opacity-30 disabled:no-underline hover:underline focus:underline active:underline"
  title="Get started">
  Get started
</button>

Card

Default

Title

Subtitle

Kaida

Sep 6, 2024

Title

Subtitle

Kaida

Sep 6, 2024

Hover

Title

Subtitle

Kaida

Sep 6, 2024

Title

Subtitle

Kaida

Sep 6, 2024

Checkbox

Dropdown

Default

Checkbox

Search

Input

Default

Hover

Focus

Filled

Invalid

Disabled

Field

Default

Hover

Focus

Filled

Invalid

Disabled

Default field

Fill in the field

Default field

Password

Fill in the field

Password

Text Area

Field

Default

Default field

<label class="flex flex-col gap-4px">
  <span class="flex gap-4px text-p3 font-medium items-center">
    Default field
  </span>
  <div class="flex flex-col relative">
    <input
      type="text"
      name="text"
      placeholder="Write here"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-accent-200 hover:border-accent-600 focus:border-accent-600 active:border-accent-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-gray-50 disabled:border-gray-100 dark:disabled:bg-gray-800 dark:disabled:border-gray-700 disabled:shadow-none [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px js_input-theme-element_radius"
      pattern="[a-zA-Z0-9_]+"
      value="">
    </input>
  </div>
</label>

Password

<label
  class="flex flex-col gap-4px"
  data-controller="password">
  <span class="flex gap-4px text-p3 font-medium items-center">
    Password
  </span>
  <div class="flex flex-col relative">
    <input
      type="password"
      name="password"
      placeholder="••••••••••"
      class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-accent-200 hover:border-accent-600 focus:border-accent-600 active:border-accent-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-gray-50 disabled:border-gray-100 dark:disabled:bg-gray-800 dark:disabled:border-gray-700 disabled:shadow-none [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px js_input-theme-element_radius js_password-input"
      pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*_+-=;:<>.\/?]).{8,}$"
      value=""
      data-password-target="input"
      data-action="input->password#check_pattern">
    </input>
    <ul
      class="hidden flex-col mt-8px gap-4px text-black-500 text-p3"
      data-password-target="checkingBlock">
      <li
        class="flex gap-4px items-center"
        id="pass-length">
        <span class="text-p3 leading-none text-red-500">
          𐄂
        </span>
        8 characters long
      </li>
      <li
        class="flex gap-4px items-center"
        id="pass-uppercase">
        <span class="text-p3 leading-none text-red-500">
          𐄂
        </span>
        1 uppercase
      </li>
      <li
        class="flex gap-4px items-center"
        id="pass-lowercase">
        <span class="text-p3 leading-none text-red-500">
          𐄂
        </span>
        1 lowercase
      </li>
      <li
        class="flex gap-4px items-center"
        id="pass-number">
        <span class="text-p3 leading-none text-red-500">
          𐄂
        </span>
        1 number
      </li>
      <li
        class="flex gap-4px items-center"
        id="pass-special">
        <span class="text-p3 leading-none text-red-500">
          𐄂
        </span>
        1 special character (!@#$%^&*_+-=:;<>./?)
      </li>
    </ul>
  </div>
</label>

Text Area

<label class="flex flex-col gap-4px ">
  <span class="text-p3 font-medium">
    Text Area
  </span>
  <textarea
    name="textarea"
    placeholder="Write here"
    class="text-p2 text-foreground py-8px px-16px rounded-8px border outline-none placeholder:text-black-500 transition-all bg-white dark:bg-black-900 border-accent-300 hover:border-accent-600 focus:border-accent-600 active:border-accent-600 disabled:bg-gray-50 disabled:border-gray-100 disabled:resize-none shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] js_input-theme-element_radius">
  </textarea>
</label>

Menu

Default

Hover

Active

Collapsed

Opened

Kaida

Tab

Default

Hover

Active

Disabled

Horizontal

<div class="flex flex-col gap-16px items-center">
  <!-- S size -->
  <button
    type="button"
    class="flex items-center gap-4px py-8px px-12px border-b-[2px] -mb-[1px] disabled:opacity-40 data-[active=true]:border-accent-500 dark:data-[active=true]:border-white text-btn2 border-transparent data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
    data-active="false">
    Tab
  </button>
  <!-- M size -->
  <button
    type="button"
    class="flex items-center gap-4px py-8px px-12px border-b-[2px] -mb-[1px] disabled:opacity-40 data-[active=true]:border-accent-500 dark:data-[active=true]:border-white text-btn1 border-transparent data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
    data-active="false">
    Tab
  </button>
</div>

Vertical

<div class="flex flex-col gap-16px items-center">
  <!-- S size -->
  <button
    type="button"
    class="flex items-center gap-4px py-4px px-12px border-l-[2px] -ml-[1px] disabled:opacity-40 data-[active=true]:border-accent-500 dark:data-[active=true]:border-white text-btn2 border-transparent data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
    data-active="false">
    Tab
  </button>
  <!-- M size -->
  <button
    type="button"
    class="flex items-center gap-4px py-4px px-12px border-l-[2px] -ml-[1px] disabled:opacity-40 data-[active=true]:border-accent-500 dark:data-[active=true]:border-white text-btn1 border-transparent data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
    data-active="false">
    Tab
  </button>
</div>

Segmented

<div class="flex flex-col gap-16px items-center">
  <!-- S size -->
  <button
    type="button"
    class="flex items-center gap-4px rounded-8px transition-colors disabled:opacity-30 data-[active=true]:shadow-[0_0_4px_0_var(--color-accent-200)] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black text-btn2 hover:shadow-[0_0_4px_0_var(--color-accent-200)] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px py-4px px-12px"
    data-active="false">
    Tab
  </button>
  <!-- M size -->
  <button
    type="button"
    class="flex items-center gap-4px rounded-8px transition-colors disabled:opacity-30 data-[active=true]:shadow-[0_0_4px_0_var(--color-accent-200)] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black text-btn1 hover:shadow-[0_0_4px_0_var(--color-accent-200)] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px py-4px px-16px"
    data-active="false">
    Tab
  </button>
</div>

Tailwind CSS theme

Docs

@import "tailwindcss";

@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  --breakpoint-2xl: 2000px;
  --container-sm: 576px;
  --container-md: 992px;
  --container-lg: 1200px;
  --container-xl: 1600px;
  --container-2xl: 2000px;

  --font-base: "Inter", system-ui, sans-serif;

  --spacing-2px: 2px;
  --spacing-4px: 4px;
  --spacing-8px: 8px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-20px: 20px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-48px: 48px;
  --spacing-64px: 64px;
  --spacing-96px: 96px;
  --spacing-128px: 128px;
  --spacing-192px: 192px;
  --spacing-256px: 256px;
  --spacing-576px: 576px;
  --spacing-992px: 992px;
  --spacing-1200px: 1200px;
  --spacing-1280px: 1280px;
  --spacing-1600px: 1600px;
  --spacing-2000px: 2000px;

  --radius-2px: 2px;
  --radius-4px: 4px;
  --radius-8px: 8px;
  --radius-12px: 12px;
  --radius-16px: 16px;
  --radius-20px: 20px;
  --radius-24px: 24px;
  --radius-32px: 32px;
  --radius-48px: 48px;
  --radius-64px: 64px;
  --radius-96px: 96px;
  --radius-128px: 128px;
  --radius-192px: 192px;
  --radius-256px: 256px;

  --color-white: #FFFFFF;
  --color-black: #0C0C0C;
  --color-gray-50: #F5F5F7;
  --color-gray-100: #EBEBED;
  --color-gray-200: #DDDDDF;
  --color-gray-300: #C6C6C8;
  --color-gray-400: #ACACAD;
  --color-gray-500: #8D8D8D;
  --color-gray-600: #707071;
  --color-gray-700: #5B5B5C;
  --color-gray-800: #3D3D3D;
  --color-gray-900: #282829;
  --color-blue-50: #EEF4FF;
  --color-blue-100: #D9E6FF;
  --color-blue-200: #BCD5FF;
  --color-blue-300: #8EBAFF;
  --color-blue-400: #5996FF;
  --color-blue-500: #2E6DFF;
  --color-blue-600: #1B4DF2;
  --color-blue-700: #1336D1;
  --color-blue-800: #132896;
  --color-blue-900: #101E5C;
  --color-green-50: #EDFAE5;
  --color-green-100: #D9F7C9;
  --color-green-200: #B7F29C;
  --color-green-300: #8CEB65;
  --color-green-400: #69E239;
  --color-green-500: #48C71A;
  --color-green-600: #34A010;
  --color-green-700: #2A7D11;
  --color-green-800: #235714;
  --color-green-900: #173610;
  --color-yellow-50: #FEFDC3;
  --color-yellow-100: #FEF88A;
  --color-yellow-200: #FCEC48;
  --color-yellow-300: #F9DA10;
  --color-yellow-400: #F3C300;
  --color-yellow-500: #E3A200;
  --color-yellow-600: #C47F00;
  --color-yellow-700: #A05F05;
  --color-yellow-800: #79430D;
  --color-yellow-900: #472707;
  --color-red-50: #FFF1F1;
  --color-red-100: #FFDFDF;
  --color-red-200: #FFC5C5;
  --color-red-300: #FF9D9D;
  --color-red-400: #FF6B6B;
  --color-red-500: #FC2E2E;
  --color-red-600: #DE1414;
  --color-red-700: #B80C0C;
  --color-red-800: #851313;
  --color-red-900: #520404;
  --color-accent-50: #F5F5F7;
  --color-accent-100: #EBEBED;
  --color-accent-200: #DDDDDF;
  --color-accent-300: #C6C6C8;
  --color-accent-400: #ACACAD;
  --color-accent-500: #8D8D8D;
  --color-accent-600: #707071;
  --color-accent-700: #5B5B5C;
  --color-accent-800: #3D3D3D;
  --color-accent-900: #282829;
  --color-secondary-50: #f3f3f6;
  --color-secondary-100: #f2f2f5;
  --color-secondary-200: #efeff2;
  --color-secondary-300: #ececef;
  --color-secondary-400: #e9e9ec;
  --color-secondary-500: #e6e6e9;
  --color-secondary-600: #ababae;
  --color-secondary-700: #737376;
  --color-secondary-800: #404042;
  --color-secondary-900: #131314;

  --text-h1: 4.5rem;
  --text-h1--line-height: 1.25;
  --text-h1--font-weight: 700;
  --text-h2: 4rem;
  --text-h2--line-height: 1.25;
  --text-h2--font-weight: 700;
  --text-h3: 3rem;
  --text-h3--line-height: 1.25;
  --text-h3--font-weight: 700;
  --text-h4: 2.5rem;
  --text-h4--line-height: 1.25;
  --text-h4--font-weight: 700;
  --text-h5: 2rem;
  --text-h5--line-height: 1.25;
  --text-h5--font-weight: 700;
  --text-h6: 1.75rem;
  --text-h6--line-height: 1.25;
  --text-h6--font-weight: 700;
  --text-h7: 1.5rem;
  --text-h7--line-height: 1.25;
  --text-h7--font-weight: 700;
  --text-h8: 1.25rem;
  --text-h8--line-height: 1.25;
  --text-h8--font-weight: 700;
  --text-h9: 1rem;
  --text-h9--line-height: 1.6;
  --text-h9--font-weight: 700;
  --text-h10: 0.875rem;
  --text-h10--line-height: 1.6;
  --text-h10--font-weight: 700;
  --text-h11: 0.75rem;
  --text-h11--line-height: 1.6;
  --text-h11--font-weight: 700;
  --text-p1: 1.25rem;
  --text-p1--font-weight: 400;
  --text-p2: 1rem;
  --text-p2--font-weight: 400;
  --text-p3: 0.875rem;
  --text-p3--font-weight: 400;
  --text-p4: 0.75rem;
  --text-p4--font-weight: 400;
  --text-p5: 0.625rem;
  --text-p5--font-weight: 400;
  --text-u1: 1.125rem;
  --text-u1--line-height: 1.85;
  --text-u1--font-weight: 400;
  --text-u2: 0.875rem;
  --text-u2--line-height: 1.85;
  --text-u2--font-weight: 400;
  --text-u3: 0.75rem;
  --text-u3--line-height: 1.85;
  --text-u3--font-weight: 400;
  --text-u4: 0.625rem;
  --text-u4--line-height: 1.85;
  --text-u4--font-weight: 400;
  --text-btn1: 1rem;
  --text-btn1--line-height: 1.6;
  --text-btn1--font-weight: 500;
  --text-btn2: 0.875rem;
  --text-btn2--line-height: 1.6;
  --text-btn2--font-weight: 500;
  --text-btn3: 0.75rem;
  --text-btn3--line-height: 1.6;
  --text-btn3--font-weight: 500;
}

@layer base {
  body {
    font-family: var(--font-base);
  }
}