Table
Rows and columns for structured data display.
<div class="mx-auto w-full border border-accent-100 dark:border-accent-700 rounded-8px overflow-auto w-[725px]">
<table class="w-full">
<thead>
<tr class="text-left">
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 text-left bg-accent-50 dark:bg-accent-800 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 w-32px"
scope="row">
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 text-left bg-accent-50 dark:bg-accent-800 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 text-left bg-accent-50 dark:bg-accent-800 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 text-left bg-accent-50 dark:bg-accent-800 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
<th
class="p-8px text-black-700 dark:text-black-100 text-p4 text-left bg-accent-50 dark:bg-accent-800 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 w-[100px]"
scope="col">
Title
<svg
width="14"
height="14"
viewbox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</th>
</tr>
</thead>
<tbody class="text-p3">
<tr class="border-t border-accent-100 dark:border-accent-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-4"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-accent-300 hover:border-accent-500 active:border-accent-500 checked:border-accent-900 checked:bg-accent-900 checked:hover:bg-accent-700 disabled:bg-gray-50 disabled:border-gray-100 dark:bg-black dark:disabled:bg-black-800 dark:disabled:bg-gray-800 dark:disabled:border-gray-700">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-accent-200 border-accent-200 dark:bg-accent-600 dark:border-accent-600 text-gray-800 dark:text-gray-50 hover:bg-accent-300 hover:border-accent-300 dark:hover:bg-accent-500 dark:hover:border-accent-500 table-caption">
Badge
</div>
</td>
</tr>
<tr class="border-t border-accent-100 dark:border-accent-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-34"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-accent-300 hover:border-accent-500 active:border-accent-500 checked:border-accent-900 checked:bg-accent-900 checked:hover:bg-accent-700 disabled:bg-gray-50 disabled:border-gray-100 dark:bg-black dark:disabled:bg-black-800 dark:disabled:bg-gray-800 dark:disabled:border-gray-700">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Subtitle
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-accent-200 border-accent-200 dark:bg-accent-600 dark:border-accent-600 text-gray-800 dark:text-gray-50 hover:bg-accent-300 hover:border-accent-300 dark:hover:bg-accent-500 dark:hover:border-accent-500 table-caption">
Badge
</div>
</td>
</tr>
<tr class="border-t border-accent-100 dark:border-accent-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-24"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-accent-300 hover:border-accent-500 active:border-accent-500 checked:border-accent-900 checked:bg-accent-900 checked:hover:bg-accent-700 disabled:bg-gray-50 disabled:border-gray-100 dark:bg-black dark:disabled:bg-black-800 dark:disabled:bg-gray-800 dark:disabled:border-gray-700">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Description
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-accent-200 border-accent-200 dark:bg-accent-600 dark:border-accent-600 text-gray-800 dark:text-gray-50 hover:bg-accent-300 hover:border-accent-300 dark:hover:bg-accent-500 dark:hover:border-accent-500 table-caption">
Badge
</div>
</td>
</tr>
<tr class="border-t border-accent-100 dark:border-accent-700">
<th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-60"
class="peer w-16px h-16px rounded-4px appearance-none border transition-all cursor-pointer bg-white border-accent-300 hover:border-accent-500 active:border-accent-500 checked:border-accent-900 checked:bg-accent-900 checked:hover:bg-accent-700 disabled:bg-gray-50 disabled:border-gray-100 dark:bg-black dark:disabled:bg-black-800 dark:disabled:bg-gray-800 dark:disabled:border-gray-700">
</input>
<svg
width="10"
height="8"
viewbox="0 0 10 8"
fill="none"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
</path>
</svg>
</label>
</th>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Header
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
Text
</td>
<td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap bg-accent-200 border-accent-200 dark:bg-accent-600 dark:border-accent-600 text-gray-800 dark:text-gray-50 hover:bg-accent-300 hover:border-accent-300 dark:hover:bg-accent-500 dark:hover:border-accent-500 table-caption">
Badge
</div>
</td>
</tr>
</tbody>
</table>
</div>
Usage
Just copy-paste the HTML or Figma code into your project.