Themer (beta)
Saved!
Saving changes...
Mode
// Select the components
// to see the codeRadius
Typography
Select an option
Inter
Roboto
Open Sans
Lato
Montserrat
Color
Accent
Color info - Accent
| # | Contrast | HEX | RGB | HSL | |
|---|---|---|---|---|---|
| 50 |
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 19.3 · APCA 100.5
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 19.3 · APCA -101.7
|
#F5F5F7
Copy content
|
rgb(245, 245, 247)
Copy content
|
hsl(240 11% 96%)
Copy content
|
|
| 100 |
Aa
Low contrast
WCAG 1.2 · APCA -10.2
Aa
Good contrast
WCAG 17.6 · APCA 94.9
Aa
Low contrast
WCAG 1.2 · APCA 8.7
Aa
Good contrast
WCAG 17.6 · APCA -95.6
|
#EBEBED
Copy content
|
rgb(235, 235, 237)
Copy content
|
hsl(240 5% 93%)
Copy content
|
|
| 200 |
Aa
Low contrast
WCAG 1.4 · APCA -18.9
Aa
Good contrast
WCAG 15.5 · APCA 87.2
Aa
Low contrast
WCAG 1.4 · APCA 16.5
Aa
Good contrast
WCAG 15.5 · APCA -87.2
|
#DDDDDF
Copy content
|
rgb(221, 221, 223)
Copy content
|
hsl(240 3% 87%)
Copy content
|
|
| 300 |
Aa
Low contrast
WCAG 1.7 · APCA -32.6
Aa
Good contrast
WCAG 12.3 · APCA 74.9
Aa
Low contrast
WCAG 1.7 · APCA 28.9
Aa
Good contrast
WCAG 12.3 · APCA -74.0
|
#C6C6C8
Copy content
|
rgb(198, 198, 200)
Copy content
|
hsl(240 2% 78%)
Copy content
|
|
| 400 |
Aa
Low contrast
WCAG 2.3 · APCA -47.1
Aa
Good contrast
WCAG 9.3 · APCA 61.5
Aa
Low contrast
WCAG 2.3 · APCA 42.4
Aa
Good contrast
WCAG 9.3 · APCA -59.8
|
#ACACAD
Copy content
|
rgb(172, 172, 173)
Copy content
|
hsl(240 1% 68%)
Copy content
|
|
| 500 |
Aa
Low contrast
WCAG 3.3 · APCA -63.1
Aa
Good contrast
WCAG 6.3 · APCA 46.4
Aa
Low contrast
WCAG 3.3 · APCA 57.7
Aa
Good contrast
WCAG 6.3 · APCA -44.1
|
#8D8D8D
Copy content
|
rgb(141, 141, 141)
Copy content
|
hsl(0 0% 55%)
Copy content
|
|
| 600 |
Aa
Good contrast
WCAG 4.9 · APCA -76.3
Aa
Low contrast
WCAG 4.2 · APCA 33.2
Aa
Good contrast
WCAG 4.9 · APCA 70.9
Aa
Low contrast
WCAG 4.2 · APCA -30.8
|
#707071
Copy content
|
rgb(112, 112, 113)
Copy content
|
hsl(240 0% 44%)
Copy content
|
|
| 700 |
Aa
Good contrast
WCAG 6.8 · APCA -85.0
Aa
Low contrast
WCAG 3.1 · APCA 24.3
Aa
Good contrast
WCAG 6.8 · APCA 79.8
Aa
Low contrast
WCAG 3.1 · APCA -22.0
|
#5B5B5C
Copy content
|
rgb(91, 91, 92)
Copy content
|
hsl(240 1% 36%)
Copy content
|
|
| 800 |
Aa
Good contrast
WCAG 10.9 · APCA -95.7
Aa
Low contrast
WCAG 1.9 · APCA 12.5
Aa
Good contrast
WCAG 10.9 · APCA 91.4
Aa
Low contrast
WCAG 1.9 · APCA -10.9
|
#3D3D3D
Copy content
|
rgb(61, 61, 61)
Copy content
|
hsl(0 0% 24%)
Copy content
|
|
| 900 |
Aa
Good contrast
WCAG 14.7 · APCA -102.0
Aa
Low contrast
WCAG 1.4 · APCA 0.0
Aa
Good contrast
WCAG 14.7 · APCA 98.6
Aa
Low contrast
WCAG 1.4 · APCA 0.0
|
#282829
Copy content
|
rgb(40, 40, 41)
Copy content
|
hsl(240 1% 16%)
Copy content
|
Contrast matrix - Accent
A visual grid that evaluates readability by comparing foreground colors (rows) against background colors (columns). Each cell displays the APCA Lc contrast score, helping you identify color pairs that meet accessibility thresholds.
WCAG 3 · APCA
Lc 15 · Decorative text and dividers
Lc 30 · Non-essential text (placeholder, disabled, copyright)
Lc 45 · Large text, minimum of 24px (bold) or 36px (regular)
Lc 60 · Small text (non-body), UI elements
Lc 75 · Body text (minimum)
Lc 90 · Body text (preferred)
50
100
200
300
400
500
600
700
800
900
50
0
0
13
26
41
57
70
79
90
96
100
0
0
0
20
35
51
64
73
83
90
200
11
0
0
12
26
42
56
64
75
81
300
23
18
10
0
13
29
42
51
62
68
400
37
31
24
11
0
15
28
37
48
54
500
52
47
39
27
13
0
13
21
32
38
600
65
60
52
40
26
11
0
8
19
25
700
74
69
61
49
35
20
0
0
10
16
800
86
80
73
60
47
32
19
10
0
0
900
93
87
80
67
54
39
26
17
0
0
How to use matrix:
Select a threshold tab to filter by readability level. Each cell shows the APCA Lc contrast score between the row foreground and column background colors. Higher values mean better readability. Cells with Lc below 15 are dimmed.
Secondary
Color info - Secondary
| # | Contrast | HEX | RGB | HSL | |
|---|---|---|---|---|---|
| 50 |
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 19.0 · APCA 99.4
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 19.0 · APCA -100.5
|
#F3F3F6
Copy content
|
rgb(243, 243, 246)
Copy content
|
hsl(240 14% 96%)
Copy content
|
|
| 100 |
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 18.8 · APCA 98.8
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 18.8 · APCA -99.9
|
#F2F2F5
Copy content
|
rgb(242, 242, 245)
Copy content
|
hsl(240 13% 95%)
Copy content
|
|
| 200 |
Aa
Low contrast
WCAG 1.1 · APCA -7.6
Aa
Good contrast
WCAG 18.3 · APCA 97.1
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 18.3 · APCA -98.1
|
#EFEFF2
Copy content
|
rgb(239, 239, 242)
Copy content
|
hsl(240 10% 94%)
Copy content
|
|
| 300 |
Aa
Low contrast
WCAG 1.2 · APCA -9.5
Aa
Good contrast
WCAG 17.8 · APCA 95.5
Aa
Low contrast
WCAG 1.2 · APCA 8.0
Aa
Good contrast
WCAG 17.8 · APCA -96.2
|
#ECECEF
Copy content
|
rgb(236, 236, 239)
Copy content
|
hsl(240 9% 93%)
Copy content
|
|
| 400 |
Aa
Low contrast
WCAG 1.2 · APCA -11.4
Aa
Good contrast
WCAG 17.3 · APCA 93.8
Aa
Low contrast
WCAG 1.2 · APCA 9.7
Aa
Good contrast
WCAG 17.3 · APCA -94.4
|
#E9E9EC
Copy content
|
rgb(233, 233, 236)
Copy content
|
hsl(240 7% 92%)
Copy content
|
|
| 500 |
Aa
Low contrast
WCAG 1.2 · APCA -13.3
Aa
Good contrast
WCAG 16.9 · APCA 92.2
Aa
Low contrast
WCAG 1.2 · APCA 11.4
Aa
Good contrast
WCAG 16.9 · APCA -92.6
|
#E6E6E9
Copy content
|
rgb(230, 230, 233)
Copy content
|
hsl(240 6% 91%)
Copy content
|
|
| 600 |
Aa
Low contrast
WCAG 2.3 · APCA -47.6
Aa
Good contrast
WCAG 9.2 · APCA 61.1
Aa
Low contrast
WCAG 2.3 · APCA 42.9
Aa
Good contrast
WCAG 9.2 · APCA -59.3
|
#ABABAE
Copy content
|
rgb(171, 171, 174)
Copy content
|
hsl(240 2% 68%)
Copy content
|
|
| 700 |
Aa
Good contrast
WCAG 4.7 · APCA -75.0
Aa
Low contrast
WCAG 4.4 · APCA 34.6
Aa
Good contrast
WCAG 4.7 · APCA 69.5
Aa
Low contrast
WCAG 4.4 · APCA -32.2
|
#737376
Copy content
|
rgb(115, 115, 118)
Copy content
|
hsl(240 1% 46%)
Copy content
|
|
| 800 |
Aa
Good contrast
WCAG 10.3 · APCA -94.7
Aa
Low contrast
WCAG 2.0 · APCA 13.7
Aa
Good contrast
WCAG 10.3 · APCA 90.3
Aa
Low contrast
WCAG 2.0 · APCA -12.0
|
#404042
Copy content
|
rgb(64, 64, 66)
Copy content
|
hsl(240 2% 25%)
Copy content
|
|
| 900 |
Aa
Good contrast
WCAG 18.6 · APCA -105.9
Aa
Low contrast
WCAG 1.1 · APCA 0.0
Aa
Good contrast
WCAG 18.6 · APCA 103.4
Aa
Low contrast
WCAG 1.1 · APCA 0.0
|
#131314
Copy content
|
rgb(19, 19, 20)
Copy content
|
hsl(240 3% 8%)
Copy content
|
Contrast matrix - Secondary
A visual grid that evaluates readability by comparing foreground colors (rows) against background colors (columns). Each cell displays the APCA Lc contrast score, helping you identify color pairs that meet accessibility thresholds.
WCAG 3 · APCA
Lc 15 · Decorative text and dividers
Lc 30 · Non-essential text (placeholder, disabled, copyright)
Lc 45 · Large text, minimum of 24px (bold) or 36px (regular)
Lc 60 · Small text (non-body), UI elements
Lc 75 · Body text (minimum)
Lc 90 · Body text (preferred)
50
100
200
300
400
500
600
700
800
900
50
0
0
0
0
0
0
40
68
87
99
100
0
0
0
0
0
0
40
67
87
98
200
0
0
0
0
0
0
38
65
85
96
300
0
0
0
0
0
0
36
63
83
94
400
0
0
0
0
0
0
34
62
81
92
500
0
0
0
0
0
0
32
60
79
91
600
36
36
34
32
31
29
0
26
46
57
700
63
62
61
59
57
56
25
0
19
30
800
84
83
81
80
78
76
45
19
0
10
900
97
96
94
93
91
89
58
32
11
0
How to use matrix:
Select a threshold tab to filter by readability level. Each cell shows the APCA Lc contrast score between the row foreground and column background colors. Higher values mean better readability. Cells with Lc below 15 are dimmed.
Black
White
Components
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
No colors selected
Accordion
Description
Description
Accordion
Description
Description
Description
<div class="grid sm:min-w-[300px] md:min-w-[400px]">
<div
class="list-none"
data-accordion="open"
role="list">
<li role="listitem">
<button
type="button"
id="header-0"
data-accordion-trigger="#panel-0"
aria-expanded="false"
aria-controls="panel-0"
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"
role="region"
aria-labelledby="header-0"
class="hidden">
<div class="px-24px pb-20px text-p2">
<p>
Description
</p>
</div>
</div>
</li>
<li role="listitem">
<button
type="button"
id="header-1"
data-accordion-trigger="#panel-1"
aria-expanded="false"
aria-controls="panel-1"
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"
role="region"
aria-labelledby="header-1"
class="hidden">
<div class="px-24px pb-20px text-p2">
<p>
Description
</p>
</div>
</div>
</li>
<li role="listitem">
<button
type="button"
id="header-2"
data-accordion-trigger="#panel-2"
aria-expanded="false"
aria-controls="panel-2"
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"
role="region"
aria-labelledby="header-2"
class="hidden">
<div class="px-24px pb-20px text-p2">
<p>
Description
</p>
</div>
</div>
</li>
</div>
</div>Avatar
Image
Text
K
K
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"
aria-label="Kaida">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt=""
width="48"
height="48">
</img>
</div>
<!-- M size -->
<div
class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px"
aria-label="Kaida">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt=""
width="32"
height="32">
</img>
</div>
<!-- S size -->
<div
class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-24px h-24px"
aria-label="Kaida">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt=""
width="24"
height="24">
</img>
</div>
</div>Text
K
K
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"
role="img"
aria-label="Kaida">
<span
class="text-black-500 text-p1"
aria-hidden="true">
K
</span>
</div>
<!-- M size -->
<div
class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px"
role="img"
aria-label="Kaida">
<span
class="text-black-500 text-p3"
aria-hidden="true">
K
</span>
</div>
<!-- S size -->
<div
class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-24px h-24px"
role="img"
aria-label="Kaida">
<span
class="text-black-500 text-p4"
aria-hidden="true">
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"
aria-label="Kaida">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt=""
width="24"
height="24">
</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"
role="img"
aria-label="Kaida">
<span
class="text-black-500 text-p4"
aria-hidden="true">
K
</span>
</div>
<p class="text-p2">
Kaida
</p>
</div>
</div>Badge
Default
Hover
Disabled
Default
Badge
Badge
Badge
Outline
Badge
Badge
Badge
Dark
Badge
Badge
Badge
Badge
Default
Badge
<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 [&_svg]:h-16px [&_svg]:w-16px 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">
Badge
</div>Outline
Badge
<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 [&_svg]:h-16px [&_svg]:w-16px border-accent-100 text-gray-800 dark:text-gray-50 hover:bg-accent-50 dark:hover:bg-gray-800">
Badge
</div>Dark
Badge
<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 [&_svg]:h-16px [&_svg]:w-16px bg-accent-700 border-accent-700 text-white dark:bg-accent-100 dark:border-accent-100 dark:text-black hover:bg-accent-800 hover:border-accent-800 dark:hover:bg-accent-50 dark:hover:border-accent-50">
Badge
</div>Breadcrumb
Breadcrumb
Default
<li class="flex items-center gap-8px whitespace-nowrap text-p2">
<a
class="text-accent-600 hover:text-accent-900 dark:text-accent-300 dark:hover:text-accent-100 no-underline"
href="#">
Description
</a>
</li>Current page
Description
<li class="flex items-center gap-8px whitespace-nowrap text-p2">
<p class="font-bold cursor-default text-accent-500 hover:text-accent-700 dark:text-accent-200 dark:hover:text-accent-50">
Description
</p>
</li>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-accent-100 hover:border-accent-900 focus:border-accent-900 active:bg-accent-50 active:border-accent-900 dark:border-accent-700 dark:hover:border-white dark:focus:border-white dark:active:bg-accent-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-accent-100 hover:border-accent-900 focus:border-accent-900 active:bg-accent-50 active:border-accent-900 dark:border-accent-700 dark:hover:border-white dark:focus:border-white dark:active:bg-accent-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-accent-100 hover:border-accent-900 focus:border-accent-900 active:bg-accent-50 active:border-accent-900 dark:border-accent-700 dark:hover:border-white dark:focus:border-white dark:active:bg-accent-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-accent-100 hover:border-accent-900 focus:border-accent-900 active:bg-accent-50 active:border-accent-900 dark:border-accent-700 dark:hover:border-white dark:focus:border-white dark:active:bg-accent-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-accent-100 hover:border-accent-900 focus:border-accent-900 active:bg-accent-50 active:border-accent-900 dark:border-accent-700 dark:hover:border-white dark:focus:border-white dark:active:bg-accent-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-accent-100 hover:border-accent-900 focus:border-accent-900 active:bg-accent-50 active:border-accent-900 dark:border-accent-700 dark:hover:border-white dark:focus:border-white dark:active:bg-accent-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
Card
Default
Title
Subtitle
Kaida
Sep 6, 2024
<a class="bg-white dark:bg-black border border-accent-100 dark:border-accent-500 rounded-12px no-underline transition-all overflow-hidden hover:shadow-[0_1px_2px_0px_#0000002D] dark:hover:shadow-[0_1px_2px_0px_#FFFFFF2D] flex flex-col min-w-[200px] max-w-[300px]">
<div class="aspect-[30/25] h-full w-full bg-black-50 dark:bg-black-800">
<img
class="h-full w-full object-cover"
alt="card caption"
loading="lazy"
src="/assets/images/home/card-image.jpg">
</img>
</div>
<div class="flex flex-col p-16px gap-16px my-auto whitespace-nowrap">
<div class="flex flex-col gap-4px">
<p class="text-h8">
Title
</p>
<p class="text-p2">
Subtitle
</p>
</div>
<div class="flex flex-wrap gap-16px items-center text-accent-700 dark:text-accent-200">
<div class=" flex gap-12px items-center">
<div
class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px"
aria-label="Kaida">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt=""
width="32"
height="32">
</img>
</div>
<p class="text-p2">
Kaida
</p>
</div>
<div class="h-12px w-[1px] bg-black-200">
</div>
<p class="text-p3">
Sep 6, 2024
</p>
</div>
</div>
</a>Horizontal
Title
Subtitle
Kaida
Sep 6, 2024
<a class="bg-white dark:bg-black border border-accent-100 dark:border-accent-500 rounded-12px no-underline transition-all overflow-hidden hover:shadow-[0_1px_2px_0px_#0000002D] dark:hover:shadow-[0_1px_2px_0px_#FFFFFF2D] grid grid-cols-2 min-h-[250px] w-full max-w-[632px]">
<div class="aspect-[30/25] h-full w-full bg-black-50 dark:bg-black-800 max-w-[300px]">
<img
class="h-full w-full object-cover"
alt="card caption"
loading="lazy"
src="/assets/images/home/card-image.jpg">
</img>
</div>
<div class="flex flex-col p-16px gap-16px my-auto whitespace-nowrap">
<div class="flex flex-col gap-4px">
<p class="text-h8">
Title
</p>
<p class="text-p2">
Subtitle
</p>
</div>
<div class="flex flex-wrap gap-16px items-center text-accent-700 dark:text-accent-200">
<div class=" flex gap-12px items-center">
<div
class="flex rounded-full items-center justify-center bg-accent-100 overflow-hidden w-32px h-32px"
aria-label="Kaida">
<img
src="/assets/images/shared/avatar.png"
class="object-cover w-full h-full"
loading="lazy"
alt=""
width="32"
height="32">
</img>
</div>
<p class="text-p2">
Kaida
</p>
</div>
<div class="h-12px w-[1px] bg-black-200">
</div>
<p class="text-p3">
Sep 6, 2024
</p>
</div>
</div>
</a>Checkbox
Default
Hover
Checked
Checked-Hover
Disabled
Checkbox
Default
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="themer-popup-checkbox-m"
class="peer w-24px h-24px 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"
autocomplete="off">
</input>
<svg
width="15"
height="12"
viewbox="0 0 15 12"
fill="none"
class="absolute left-[4px] hidden fill-white peer-checked:flex">
<path d="M5.64054 7.63341C5.44511 7.82972 5.12732 7.82972 4.93188 7.63341L2.10729 4.79631C1.62522 4.3121 0.841359 4.31211 0.359289 4.79631C-0.119778 5.2775 -0.119778 6.05541 0.359288 6.5366L4.57754 10.7735C4.96842 11.1662 5.604 11.1662 5.99488 10.7735L14.6267 2.10352C15.1057 1.62233 15.1057 0.844411 14.6267 0.363222C14.1446 -0.120984 13.3607 -0.120983 12.8787 0.363223L5.64054 7.63341Z">
</path>
</svg>
<span class="peer-disabled:text-black-500">
Text
</span>
</label>Small
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="themer-popup-checkbox-s"
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"
autocomplete="off">
</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>
<span class="peer-disabled:text-black-500">
Text
</span>
</label>Datepicker
Datepicker
<label class="flex flex-col gap-4px">
<span class="flex gap-4px text-p3 font-medium items-center">
Date
</span>
<div class="flex flex-col relative">
<input
type="text"
name="date"
placeholder="dd.MM.yyyy"
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"
pattern="\d{2}\.\d{2}\.\d{4}"
autocomplete="off"
data-controller="datepicker"
data-datepicker-options-value="{"dateFormat":"dd.MM.yyyy","navTitles":{"days":"MMMM yyyy"},"prevHtml":"\u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n\u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.71967 11.7803C9.01256 12.0732 9.48732 12.0732 9.78022 11.7803C10.0731 11.4874 10.0731 11.0127 9.78022 10.7198L7.06049 8.00006L9.78022 5.28033C10.0731 4.98744 10.0731 4.51268 9.78022 4.21978C9.48732 3.92689 9.01256 3.92689 8.71967 4.21978L5.46967 7.46978C5.17678 7.76268 5.17678 8.23744 5.46967 8.53033L8.71967 11.7803Z\" fill=\"currentColor\"/\u003e\n\u003c/svg\u003e\n","nextHtml":"\u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n\u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.21967 4.21967C6.51256 3.92678 6.98732 3.92678 7.28022 4.21967L10.5302 7.46967C10.8231 7.76256 10.8231 8.23732 10.5302 8.53022L7.28022 11.7802C6.98732 12.0731 6.51256 12.0731 6.21967 11.7802C5.92678 11.4873 5.92678 11.0126 6.21967 10.7197L8.9394 7.99994L6.21967 5.28022C5.92678 4.98732 5.92678 4.51256 6.21967 4.21967Z\" fill=\"currentColor\"/\u003e\n\u003c/svg\u003e\n"}">
</input>
</div>
</label>Dropdown
Dropdown
Default
<div
id="dropdown-default"
class="flex flex-col gap-2px bg-white dark:bg-black-800 rounded-12px shadow-[0px_6px_20px_0px_#00000017] w-[240px] p-12px">
<ul
class="flex flex-col gap-2px text-p2 text-foreground max-h-[180px] overflow-auto"
aria-labelledby="dropdown-default-button">
<li>
<a
href="#"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-accent-50 dark:hover:bg-accent-700">
Button
</a>
</li>
<li>
<a
href="#"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-accent-50 dark:hover:bg-accent-700">
Button
</a>
</li>
<li>
<a
href="#"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-accent-50 dark:hover:bg-accent-700">
Button
</a>
</li>
<li>
<a
href="#"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-accent-50 dark:hover:bg-accent-700">
Button
</a>
</li>
</ul>
</div>Checkbox
<div
id="dropdown-checkbox"
class="flex flex-col gap-2px bg-white dark:bg-black-800 rounded-12px shadow-[0px_6px_20px_0px_#00000017] w-[240px] p-12px">
<ul
class="flex flex-col gap-2px text-p2 text-foreground max-h-[180px] overflow-auto"
aria-labelledby="dropdown-checkbox-button">
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer [&>svg]:left-[15px] w-full py-4px px-12px gap-12px!">
<input
type="checkbox"
name="checkbox-0"
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 select-none"
onchange="this.closest('button').dataset.checked = this.checked.toString();"
autocomplete="off">
</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>
<span class="peer-disabled:text-black-500">
Button
</span>
</label>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer [&>svg]:left-[15px] w-full py-4px px-12px gap-12px!">
<input
type="checkbox"
name="checkbox-1"
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 select-none"
onchange="this.closest('button').dataset.checked = this.checked.toString();"
autocomplete="off">
</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>
<span class="peer-disabled:text-black-500">
Button
</span>
</label>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="true">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer [&>svg]:left-[15px] w-full py-4px px-12px gap-12px!">
<input
type="checkbox"
name="checkbox-2"
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 select-none"
checked="checked"
onchange="this.closest('button').dataset.checked = this.checked.toString();"
autocomplete="off">
</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>
<span class="peer-disabled:text-black-500">
Button
</span>
</label>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer [&>svg]:left-[15px] w-full py-4px px-12px gap-12px!">
<input
type="checkbox"
name="checkbox-3"
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 select-none"
onchange="this.closest('button').dataset.checked = this.checked.toString();"
autocomplete="off">
</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>
<span class="peer-disabled:text-black-500">
Button
</span>
</label>
</button>
</li>
</ul>
</div>Search
<div
id="dropdown-search"
class="flex flex-col gap-2px bg-white dark:bg-black-800 rounded-12px shadow-[0px_6px_20px_0px_#00000017] w-[240px] p-12px">
<div class="flex flex-col pb-8px">
<label class="flex flex-col gap-4px">
<div class="flex flex-col relative">
<input
type="text"
name="dropdown-search"
placeholder="Search"
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 ps-[40px] pe-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"
pattern="[a-zA-Z0-9_]+"
value="">
</input>
<span class="absolute left-16px top-[14px] pointer-events-none">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_48_1939)">
<path
d="M6.66667 11.3333C9.244 11.3333 11.3333 9.244 11.3333 6.66667C11.3333 4.08934 9.244 2 6.66667 2C4.08934 2 2 4.08934 2 6.66667C2 9.244 4.08934 11.3333 6.66667 11.3333Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
<path
d="M14 14L10 10"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</g>
</svg>
</span>
</div>
</label>
</div>
<ul
class="flex flex-col gap-2px text-p2 text-foreground max-h-[180px] overflow-auto"
aria-labelledby="dropdown-search-button">
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false"
onclick="this.dataset.checked = this.dataset.checked === 'true' ? 'false' : 'true'">
Button
<span class="hidden group-data-[checked=true]:flex">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33337 8.00033L6.66671 11.3337L13.3334 4.66699"
stroke="#8A8C97"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false"
onclick="this.dataset.checked = this.dataset.checked === 'true' ? 'false' : 'true'">
Button
<span class="hidden group-data-[checked=true]:flex">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33337 8.00033L6.66671 11.3337L13.3334 4.66699"
stroke="#8A8C97"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="true"
onclick="this.dataset.checked = this.dataset.checked === 'true' ? 'false' : 'true'">
Button
<span class="hidden group-data-[checked=true]:flex">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33337 8.00033L6.66671 11.3337L13.3334 4.66699"
stroke="#8A8C97"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false"
onclick="this.dataset.checked = this.dataset.checked === 'true' ? 'false' : 'true'">
Button
<span class="hidden group-data-[checked=true]:flex">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33337 8.00033L6.66671 11.3337L13.3334 4.66699"
stroke="#8A8C97"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false"
onclick="this.dataset.checked = this.dataset.checked === 'true' ? 'false' : 'true'">
Button
<span class="hidden group-data-[checked=true]:flex">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33337 8.00033L6.66671 11.3337L13.3334 4.66699"
stroke="#8A8C97"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false"
onclick="this.dataset.checked = this.dataset.checked === 'true' ? 'false' : 'true'">
Button
<span class="hidden group-data-[checked=true]:flex">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33337 8.00033L6.66671 11.3337L13.3334 4.66699"
stroke="#8A8C97"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</li>
<li>
<button
type="button"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px group justify-between data-[checked=true]:bg-accent-50 dark:data-[checked=true]:bg-accent-700 hover:bg-accent-50 dark:hover:bg-accent-700"
data-checked="false"
onclick="this.dataset.checked = this.dataset.checked === 'true' ? 'false' : 'true'">
Button
<span class="hidden group-data-[checked=true]:flex">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.33337 8.00033L6.66671 11.3337L13.3334 4.66699"
stroke="#8A8C97"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</span>
</button>
</li>
</ul>
</div>Input
Default
Hover
Focus
Filled
Invalid
Disabled
Field
Default
<input
type="text"
name="themer-text-popup"
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"
pattern="[a-zA-Z0-9_]+"
value="">
</input>Password
<input
type="password"
name="themer-pass-popup"
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"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*_+-=;:<>.\/?]).{8,}$"
value="">
</input>Field
Default
Hover
Focus
Filled
Invalid
Disabled
Field
Default
<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
Menu
Default
<a
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80"
href="#">
<svg
width="20"
height="20"
viewbox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
<span class="menu-item-text">
Menu
</span>
</a>Submenu
<div class="flex flex-col gap-8px group">
<button
name="button"
type="button"
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 min-w-[180px]"
aria-expanded="false"
onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
<svg
width="20"
height="20"
viewbox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1.66669 6.66634H18.3334M5.00002 13.333H15M3.33335 3.33301H16.6667C17.5872 3.33301 18.3334 4.0792 18.3334 4.99967V14.9997C18.3334 15.9201 17.5872 16.6663 16.6667 16.6663H3.33335C2.41288 16.6663 1.66669 15.9201 1.66669 14.9997V4.99967C1.66669 4.0792 2.41288 3.33301 3.33335 3.33301Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
<span class="menu-item-text">
Menu
</span>
<div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6 9L12 15L18 9"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</div>
</button>
<div class="overflow-auto transition-all duration-300 ease-in-out max-h-0 opacity-0 group-has-[button[aria-expanded=true]]:max-h-[200px] group-has-[button[aria-expanded=true]]:opacity-100">
<div class="flex sm:ps-12px">
<div class="flex py-4px ps-[10px] pe-0 sm:pe-[10px]">
<div class="w-[1px] bg-accent-200">
</div>
</div>
<div class="flex flex-col gap-4px grow-1">
<a
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
href="#">
<span class="menu-item-text">
Item 1
</span>
</a>
<a
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
href="#">
<span class="menu-item-text">
Item 2
</span>
</a>
<a
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80 whitespace-break-spaces!"
href="#">
<span class="menu-item-text">
Item 3
</span>
</a>
</div>
</div>
</div>
</div>Example
<div class="grid overflow-auto self-baseline w-full max-w-full lg:self-center">
<header class="flex items-center gap-32px w-full">
<a
class="flex font-bold gap-8px items-center no-underline text-foreground! logo text-h8 [&_svg]:w-[28px] [&_svg]:h-[28px]"
href="/">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect
width="24"
height="24"
rx="2"
fill="black">
</rect>
<path
d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
stroke="white"
stroke-width="4">
</path>
<path
d="M12.5 14.5L18.9952 18.25"
stroke="white"
stroke-width="4.5">
</path>
<circle
cx="15.25"
cy="8.25"
r="3.25"
fill="white">
</circle>
</svg>
Kaida
</a>
<header class="items-center gap-64px w-full hidden md:flex">
<div class="flex w-full">
<nav
class="flex gap-12px items-center list-none"
data-mobile-open="false">
<li>
<button
name="button"
type="button"
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80"
id="product-dropdown-example-button"
data-dropdown-toggle="product-dropdown-example"
aria-expanded="false"
onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">
<span class="menu-item-text">
Products
</span>
<div class="text-black-600 ml-auto transition-all duration-500 will-change-[rotate] will-change-[color] group-aria-[expanded=true]:rotate-180 group-hover:text-black dark:text-black-200 dark:group-hover:text-white">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6 9L12 15L18 9"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</div>
</button>
</li>
<li>
<a
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80"
href="#">
<span class="menu-item-text">
Documentation
</span>
</a>
</li>
<li>
<a
class="flex gap-8px items-center py-8px px-12px rounded-8px text-btn2 text-black no-underline whitespace-nowrap dark:text-white aria-[expanded=true]:bg-accent-50 dark:aria-[expanded=true]:bg-accent-700 group bg-transparent hover:bg-accent-50 dark:hover:bg-accent-800 hover:opacity-80 focus:opacity-80"
href="#">
<span class="menu-item-text">
About us
</span>
</a>
</li>
</nav>
<div class="flex gap-12px items-center ms-auto">
<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"
title="Sign in">
Sign in
</button>
<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"
title="Get started">
Get started
</button>
</div>
</div>
</header>
<header class="items-center gap-32px w-full flex md:hidden">
<div class="flex items-center gap-64px w-full">
<button
name="button"
type="button"
class="flex ms-auto text-black dark:text-white"
data-mobile-open="false">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4 6L20 6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
<path
d="M4 12L20 12"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
<path
d="M4 18L20 18"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</button>
</div>
</header>
<div
id="product-dropdown-example"
class="flex flex-col gap-2px bg-white dark:bg-black-800 rounded-12px shadow-[0px_6px_20px_0px_#00000017] w-[240px] p-12px z-10 hidden">
<ul
class="flex flex-col gap-2px text-p2 text-foreground max-h-[180px] overflow-auto"
aria-labelledby="product-dropdown-example-button">
<li>
<a
href="#"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-accent-50 dark:hover:bg-accent-700">
Product 1
</a>
</li>
<li>
<a
href="#"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-accent-50 dark:hover:bg-accent-700">
Product 2
</a>
</li>
<li>
<a
href="#"
class="flex gap-12px rounded-12px w-full items-center text-p2 py-4px px-12px hover:bg-accent-50 dark:hover:bg-accent-700">
Product 3
</a>
</li>
</ul>
</div>
</header>
</div>Pagination
1
1
1
Next
Previous
Next
Previous
Pagination
Default
<nav class="flex gap-12px md:gap-32px lg:gap-64px justify-between items-center overflow-auto">
<a
class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-black border dark:text-white border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="#">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 3L5 8L10 13"
stroke="currentColor"
stroke-width="1.5">
</path>
</svg>
Previous
</a>
<ul class="flex gap-12px">
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
1
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-accent-900 bg-accent-900 text-white dark:border-accent-50 dark:bg-accent-50 dark:text-black"
href="">
2
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
3
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
4
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
5
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
6
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
7
</a>
</li>
</ul>
<a
class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-black border dark:text-white border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="#">
Next
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6 13L11 8L6 3"
stroke="currentColor"
stroke-width="1.5">
</path>
</svg>
</a>
</nav>Short
<nav class="flex gap-12px md:gap-20px items-center">
<a
class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-black border dark:text-white border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="#">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 3L5 8L10 13"
stroke="currentColor"
stroke-width="1.5">
</path>
</svg>
</a>
<ul class="flex gap-12px items-center">
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
1
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-accent-900 bg-accent-900 text-white dark:border-accent-50 dark:bg-accent-50 dark:text-black"
href="">
2
</a>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
3
</a>
</li>
<li class="flex">
<div class="flex gap-4px">
<div class="w-4px h-4px bg-accent-200">
</div>
<div class="w-4px h-4px bg-accent-200">
</div>
<div class="w-4px h-4px bg-accent-200">
</div>
</div>
</li>
<li class="flex">
<a
class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="">
7
</a>
</li>
</ul>
<a
class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-black border dark:text-white border-transparent hover:border-accent-900 active:border-accent-900 dark:hover:border-accent-50 dark:active:border-accent-50"
href="#">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6 13L11 8L6 3"
stroke="currentColor"
stroke-width="1.5">
</path>
</svg>
</a>
</nav>Popover
Popover Form
This form demonstrates how to embed input fields inside a popover component.
Popover
Popover Form
This form demonstrates how to embed input fields inside a popover component.
<div
class="relative inline-block"
data-popover="true"
data-popover-align="center"
data-popover-side="bottom">
<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"
title="Open popover">
Open popover
</button>
<div
class="z-50 text-p3 max-w-[400px] w-80 bg-white dark:bg-gray-900 shadow-[0_6px_16px_-7px_#0000002E] dark:shadow-[0_6px_16px_-7px_#FFFFFF2E] rounded-12px p-20px border border-accent-100 dark:border-accent-700 absolute hidden transition-opacity duration-200 opacity-0 top-full left-1/2 -translate-x-1/2"
data-popover-content="true">
<div>
<div class="flex flex-col gap-20px">
<div class="flex flex-col gap-4px">
<h3 class="text-h9">
Popover Form
</h3>
<p>
This form demonstrates how to embed input fields inside a popover component.
</p>
</div>
<label class="flex flex-col gap-4px">
<span class="flex gap-4px text-p3 font-medium items-center">
Hint
</span>
<div class="flex flex-col relative">
<input
type="text"
name="popover_hint"
placeholder="Enter hint text"
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"
pattern="[a-zA-Z0-9_]+"
value=""
autocomplete="off">
</input>
</div>
</label>
</div>
</div>
</div>
</div>Popup
Are you sure?
This action can’t be undone.
Popup
Are you sure?
This action can’t be undone.
<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"
title="Toggle popup"
data-popup-target="popup-themer-example"
data-popup-toggle="popup-themer-example"
data-popup-portal="false">
Toggle popup
</button>
<div
id="popup-themer-example"
tabindex="-1"
aria-hidden="true"
class="hidden fixed inset-0 z-50 p-16px justify-center items-center overflow-x-hidden overflow-y-auto h-dvh">
<div class="relative w-full max-w-[448px] max-h-full">
<div class="grid gap-20px p-24px w-full relative rounded-12px bg-background border border-gray-100 dark:border-gray-700 shadow-[0px_6px_24px_-7px_#0000002E] dark:shadow-[0px_6px_24px_-7px_#FFFFFF2E]">
<div class="flex flex-col gap-8px">
<p class="text-h7">
Are you sure?
</p>
<p class="text-p3">
This action can’t be undone.
</p>
</div>
<div class="flex justify-end gap-12px">
<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-accent-100 hover:border-accent-900 focus:border-accent-900 active:bg-accent-50 active:border-accent-900 dark:border-accent-700 dark:hover:border-white dark:focus:border-white dark:active:bg-accent-800 js_popup-sub-button"
title="Cancel"
data-popup-hide="popup-themer-example">
Cancel
</button>
<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_popup-main-button"
title="Continue"
data-popup-hide="popup-themer-example">
Continue
</button>
</div>
<button
type="button"
data-popup-hide="popup-themer-example"
class="absolute top-20px right-20px text-gray-400 dark:text-gray-600 hover:text-foreground transition-all duration-300">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18 6L6 18"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
<path
d="M6 6L18 18"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
<span class="sr-only">
Close popup
</span>
</button>
</div>
</div>
</div>Radio
Default
Hover
Checked
Checked-Hover
Disabled
Radio
<!-- Default -->
<label class="flex gap-8px items-center relative has-disabled:cursor-no-drop has-disabled:text-black-500 dark:has-disabled:text-black-300 cursor-pointer text-p2">
<input
type="radio"
name="radio"
id="radio-M"
value="M"
class="flex items-center justify-center border bg-white rounded-full appearance-none relative dark:bg-black w-24px h-24px checked:before:w-12px checked:before:h-12px checked:before:rounded-full checked:before:bg-accent-800 checked:before:inline-block dark:checked:before:bg-accent-50 cursor-pointer border-accent-300 hover:border-accent-800 disabled:bg-accent-50 disabled:border-accent-100 dark:border-accent-500 dark:hover:border-accent-50 dark:disabled:bg-accent-700 dark:disabled:border-accent-700">
</input>
<svg
width="10"
height="10"
viewbox="0 0 10 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none hidden peer-checked:block">
<circle
cx="5"
cy="5"
r="5"
fill="currentColor">
</circle>
</svg>
<span class="peer-disabled:text-black-500 dark:has-disabled:text-black-300">
Text
</span>
</label>
<!-- Small -->
<label class="flex gap-8px items-center relative has-disabled:cursor-no-drop has-disabled:text-black-500 dark:has-disabled:text-black-300 cursor-pointer text-p3">
<input
type="radio"
name="radio"
id="radio-S"
value="S"
class="flex items-center justify-center border bg-white rounded-full appearance-none relative dark:bg-black w-16px h-16px checked:before:w-8px checked:before:h-8px checked:before:rounded-full checked:before:bg-accent-800 checked:before:inline-block dark:checked:before:bg-accent-50 cursor-pointer border-accent-300 hover:border-accent-800 disabled:bg-accent-50 disabled:border-accent-100 dark:border-accent-500 dark:hover:border-accent-50 dark:disabled:bg-accent-700 dark:disabled:border-accent-700">
</input>
<svg
width="8"
height="8"
viewbox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none hidden peer-checked:block">
<circle
cx="4"
cy="4"
r="4"
fill="currentColor">
</circle>
</svg>
<span class="peer-disabled:text-black-500 dark:has-disabled:text-black-300">
Text
</span>
</label>Slider
Slider
<div class="flex items-center h-16px w-full">
<input
type="range"
name="themer-slider-popup"
min="0"
step="1"
autocomplete="off"
class="flex w-full flex-1">
</input>
</div>Table
Default
| Title |
|---|
Text
Badge
Hover
| Title |
|---|
Text
Badge
Table
Header cell
| Title |
|---|
<table>
<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 min-w-[200px]"
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>
</table>Checkbox cell
<div class="p-8px min-h-[40px] transition-all whitespace-nowrap flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-accent-100 dark:border-accent-700">
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
<input
type="checkbox"
name="table-checkbox-1"
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>
</div>Text cell
Text
<div class="p-8px min-h-[40px] transition-all whitespace-nowrap flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-accent-100 dark:border-accent-700 min-w-[200px]">
Text
</div>Badge cell
Badge
<div class="p-8px min-h-[40px] transition-all whitespace-nowrap flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-accent-100 dark:border-accent-700 min-w-[200px]">
<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 [&_svg]:h-16px [&_svg]:w-16px 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>
</div>Table example
| Title | Title | Title | Title | |
|---|---|---|---|---|
| Text | Text | Text |
Badge
| |
| Subtitle | Text | Text |
Badge
| |
| Description | Text | Text |
Badge
| |
| Header | Text | Text |
Badge
|
<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-72"
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 [&_svg]:h-16px [&_svg]:w-16px 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-18"
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 [&_svg]:h-16px [&_svg]:w-16px 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-93"
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 [&_svg]:h-16px [&_svg]:w-16px 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-89"
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 [&_svg]:h-16px [&_svg]:w-16px 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>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>Toast
Info
Notification
Sunday, December 03, 2024 at 9:00 AM
Success
Success
Sunday, December 03, 2024 at 9:00 AM
Error
Error
Sunday, December 03, 2024 at 9:00 AM
Warning
Alert
Sunday, December 03, 2024 at 9:00 AM
Toast
Info
<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"
data-component="toast"
data-toast-type="info"
data-toast-dismissible="false">
Call info toast!
</button>Success
<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"
data-component="toast"
data-toast-type="success"
data-toast-duration="4000">
Call success toast with 4000ms duration!
</button>Error
<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"
data-component="toast"
data-toast-type="error"
data-toast-value="Error msg">
Call error toast with content "Error msg"!
</button>Warning
<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"
data-component="toast"
data-toast-type="warning"
data-toast-position="top-center">
Call "top-center" warning toast!
</button>Toggle
Default
Hover
Active
Toggle
<div class="flex gap-4px items-center">
<label
for="toggle-52d420b3"
class="p-2px w-32px h-16px rounded-full relative cursor-pointer group transition-colors bg-accent-200 hover:bg-accent-500 dark:bg-accent-600 dark:hover:bg-accent-300 has-checked:bg-accent-900 has-disabled:bg-accent-400 dark:has-disabled:bg-accent-300 dark:has-checked:bg-accent-50 has-disabled:cursor-no-drop">
<input
type="checkbox"
name="toggle-52d420b3"
id="toggle-52d420b3"
class="w-0 h-0 outline-none sr-only peer">
</input>
<span
class="w-12px h-12px rounded-full bg-white absolute right-[18px] top-2px peer-checked:right-2px transition-[right] dark:bg-black"
aria-hidden="true"
focusable="false">
</span>
</label>
</div>Tooltip
Top
It's a simple tooltip with useful information.
Right
It's a simple tooltip with useful information.
Left
It's a simple tooltip with useful information.
Bottom
It's a simple tooltip with useful information.
Tooltip
Top trigger
It's a simple tooltip with useful information.
Bottom trigger
It's a simple tooltip with useful information.
Left trigger
It's a simple tooltip with useful information.
Right trigger
It's a simple tooltip with useful information.
<!-- Top -->
<div class="relative group flex">
<span
data-tooltip-trigger="tooltip-5b8594ea"
data-placement="top">
Top trigger
</span>
<div
class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-accent-900 w-[166px] dark:text-black dark:bg-accent-50 opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 left-[50%] -translate-y-full -translate-x-[50%]"
style="transition: opacity 300ms ease-out, z-index 300ms ease-out"
id="tooltip-5b8594ea"
role="tooltip">
<span
class="absolute bg-accent-900 w-[14px] h-[6px] dark:bg-accent-50 -bottom-[5px] right-[50%] rotate-180 translate-x-[50%]"
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
</span>
<span class="js_tooltip-text">
It's a simple tooltip with useful information.
</span>
</div>
</div>
<!-- Bottom -->
<div class="relative group flex">
<span
data-tooltip-trigger="tooltip-9bc67c8c"
data-placement="bottom">
Bottom trigger
</span>
<div
class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-accent-900 w-[166px] dark:text-black dark:bg-accent-50 opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 left-[50%] bottom-[0%] translate-y-full -translate-x-[50%]"
style="transition: opacity 300ms ease-out, z-index 300ms ease-out"
id="tooltip-9bc67c8c"
role="tooltip">
<span
class="absolute bg-accent-900 w-[14px] h-[6px] dark:bg-accent-50 -top-[5px] right-[50%] translate-x-[50%]"
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
</span>
<span class="js_tooltip-text">
It's a simple tooltip with useful information.
</span>
</div>
</div>
<!-- Left -->
<div class="relative group flex">
<span
data-tooltip-trigger="tooltip-d92024ac"
data-placement="left">
Left trigger
</span>
<div
class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-accent-900 w-[166px] dark:text-black dark:bg-accent-50 opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 top-[50%] -left-[7px] -translate-x-full -translate-y-[50%]"
style="transition: opacity 300ms ease-out, z-index 300ms ease-out"
id="tooltip-d92024ac"
role="tooltip">
<span
class="absolute bg-accent-900 w-[14px] h-[6px] dark:bg-accent-50 -right-[8px] bottom-[50%] rotate-90 translate-y-[50%]"
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
</span>
<span class="js_tooltip-text">
It's a simple tooltip with useful information.
</span>
</div>
</div>
<!-- Right -->
<div class="relative group flex">
<span
data-tooltip-trigger="tooltip-0809098d"
data-placement="right">
Right trigger
</span>
<div
class="absolute rounded-8px text-white text-p4 py-8px px-12px bg-accent-900 w-[166px] dark:text-black dark:bg-accent-50 opacity-0 group-hover:opacity-100 z-[-1] group-hover:z-10 top-[50%] -right-[6px] translate-x-full -translate-y-[50%]"
style="transition: opacity 300ms ease-out, z-index 300ms ease-out"
id="tooltip-0809098d"
role="tooltip">
<span
class="absolute bg-accent-900 w-[14px] h-[6px] dark:bg-accent-50 -left-[8px] bottom-[50%] rotate-270 translate-y-[50%]"
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)">
</span>
<span class="js_tooltip-text">
It's a simple tooltip with useful information.
</span>
</div>
</div>{ "radius": {
"value": "",
"sections": ["input", "button"]
} }
Are you sure?
It can't be undone.
Rename theme
Export
Tailwind 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);
}
}
CSS custom properties docs
:root {
--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;
}
Note:
Kaida components are built specifically for Tailwind v4 and require its CSS-first architecture to function correctly.
SCSS docs
$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;
Note:
Kaida components are built specifically for Tailwind v4 and require its CSS-first architecture to function correctly.
LLM info
AGENTS.md
<!--
============================================================
KAIDA — Modular Instructions for Kaida Component Library
============================================================
This file is designed to be used in three ways:
1. FULL COPY: Copy the entire file as your AGENTS.md (or CLAUDE.md, or .cursorrules)
if you're starting fresh.
2. MODULAR INSERT: Copy only specific sections (marked with
<!-- KAIDA_SECTION: name -->) into your existing AGENTS.md.
3. REFERENCE: Keep this as a separate file and reference it
from your main instructions.
The sections are:
- SECTION: role — Basic role and mission of the assistant
- SECTION: theme — The current Kaida theme (project-wide)
- SECTION: components — Component list and usage guidelines
- SECTION: generation — Code generation rules and examples
============================================================
-->
<!-- ========================================================== -->
<!-- KAIDA_SECTION: role -->
<!-- ========================================================== -->
## Kaida Library Assistant — Role & General Principles
You are an expert on the **Kaida** component library (https://kaida.dev). Your primary goal is to help users (designers and developers) build interfaces by combining components from the Kaida library and applying the current theme configured via **Themer** (https://kaida.dev/themer).
You generate **clean HTML + CSS + JS** code (using Tailwind CSS v4) that utilizes ready-made Kaida components and minimal custom code to connect them. You **do not create new components from scratch** if an existing library component can be used.
### Key Principles
- **Use Kaida components first** — prefer existing components over custom code.
- **Respect the project's existing coding standards** — if the project has specific conventions (naming, indentation, etc.), follow them.
- **Keep code clean and accessible** — semantic HTML, ARIA attributes, proper roles.
- **No extra dependencies** — everything should work with Kaida + Tailwind (CDN or local).
<!-- ========================================================== -->
<!-- KAIDA_SECTION: theme -->
<!-- ========================================================== -->
## Current Theme (Project-Wide)
**Important**: This theme is the SINGLE SOURCE OF TRUTH for this project. All generated code MUST use the CSS classes defined below. Do not hardcode values — use the theme variables.
<!-- Replace the @theme block below with your project's theme from Themer -->
<!-- The theme block is found on https://kaida.dev/themer in the element with data-themes-target="tailwindTheme" -->
```css
@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);
}
}
```
**Theme Usage Rules:**
- Always use the CSS classes from the theme above — never hardcode values.
- Examples: `rounded-8px`, `bg-accent-500`, `text-gray-900`, `p-16px`, `text-btn1`, `gap-12px`.
- Support dark theme via `dark:` modifier: `dark:bg-gray-800`, `dark:text-white`.
- Use breakpoints: `sm:`, `md:`, `lg:`, `xl:`, `2xl:`.
<!-- ========================================================== -->
<!-- KAIDA_SECTION: components -->
<!-- ========================================================== -->
## Kaida Component List & Usage Guidelines
### Available Components
Accordion, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Datepicker, Dropdown, Input, Field, Menu, Pagination, Popover, Popup, Radio, Slider, Table, Tab, Toast, Toggle, Tooltip.
---
### Accordion
Collapsible content sections for organized information.
**HTML Structure:**
- Container with `data-accordion` attribute and `role="list"`.
- Trigger button with `data-accordion-trigger`, `id`, `aria-expanded`, and `aria-controls`.
- Content panel with `role="region"` and `aria-labelledby`.
- Optional icon element with `data-accordion-icon` (rotates 180° when open).
- Each item wrapped in `<li role="listitem">`.
**JavaScript Initialization:**
```javascript
class Accordion { ... }
const initAccordions = (options = {}) => { ... };
```
**Key Options:**
- `alwaysOpen`: (boolean) Allow multiple panels open simultaneously.
- `activeClasses`: CSS classes for open state.
- `inactiveClasses`: CSS classes for closed state.
- `onOpen`: Callback fired after a panel opens.
- `onClose`: Callback fired after a panel closes.
- `onToggle`: Callback fired after any toggle.
---
### Avatar
User or entity profile representation.
**Variants:**
- Default avatar (image-based)
- With text (initials or name next to avatar)
- Group (multiple avatars stacked)
**HTML Structure:**
- Container `<div>` with `rounded-full` and size classes.
- Image avatar: `<img>` inside, with `alt=""` (decorative) or descriptive text.
- Text avatar: container with `role="img"` and `aria-label`, inner `<span>` with the letter.
**Accessibility:**
- Image avatars: always set `alt=""` for decorative or `alt="Name"` for meaningful ones.
- Text avatars: container must have `role="img"` and `aria-label` with the full name.
- Inner letter spans use `aria-hidden="true"`.
- Use `width`/`height` on `<img>` to prevent CLS.
**Key Classes:**
- `rounded-full` for circular shape.
- Size classes from theme: `w-*`, `h-*`.
- Background and text color classes for fallback initials.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Badge
Small count indicator or status marker.
**Variants:**
- Default badge
- Outlined badge
- Dark badge
**HTML Structure:**
- Container `<div>` with `role="status"` (or custom `role`).
- Optional icons wrapped in `<span aria-hidden="true">`.
- `aria-disabled` set when disabled.
- `aria-live` for dynamic content updates.
**Accessibility:**
- Icon spans use `aria-hidden="true"` to avoid double announcement.
- Use `aria_label` to provide a screen-reader-only label when the visible text is insufficient.
- Use `live: "polite"` or `live: "assertive"` for badges whose text changes dynamically (e.g. notification counts).
- Use `role: "presentation"` for purely decorative badges.
**Key Classes:**
- `rounded-*` for pill shape (typically `rounded-full`).
- `px-*`, `py-*` for padding.
- `text-*` for text size.
- Background and text color classes.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Breadcrumb
Navigation showing hierarchical page position.
**Structure:**
- Typically a `<nav>` with `aria-label="Breadcrumb"`.
- Ordered or unordered list of links.
- Separators between items (often `/` or `>`).
**Key Classes:**
- `flex`, `items-center`, `gap-*` for layout.
- `text-*` for text styling.
- Color classes for active/current item.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Button
Clickable control that triggers actions.
**Variants:**
- Primary (default)
- Secondary
- Outline
- Ghost
- Danger
- Disabled
- Loading (with animation)
- Only icon
- With icon
**Loading Animation:**
Add class `.loader-spin` to your project:
```css
.loader-spin > svg {
animation: spin 1s linear infinite;
}
```
**Key Classes:**
- `flex`, `gap-8px`, `items-center`, `justify-center`
- `whitespace-nowrap`
- `py-8px`, `px-16px`
- `text-btn1`
- `[&>svg]:w-20px [&>svg]:h-20px` for icon sizing
- `rounded-8px` (or other radius)
- `text-white dark:text-accent-900`
- `border disabled:opacity-30`
- Focus styles: `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]`
- Background and border: `bg-accent-900 border-accent-900`
- States: `hover:bg-accent-700`, `focus:bg-accent-700`, `active:bg-accent-500`
- Dark mode: `dark:bg-white dark:border-white dark:hover:bg-accent-200`, etc.
---
### Card
Container for related content and actions.
**Variants:**
- Default (vertical)
- Horizontal
**Structure:**
- Container div with card classes.
- Optional: image, title, subtitle, content, footer with actions.
**Key Classes:**
- `rounded-*` for border radius.
- `p-*` for padding.
- `bg-*` for background.
- `shadow-*` for elevation (if used).
- `border` for border.
---
### Checkbox
Toggle control for binary or multiple selections.
**Structure:**
- Typically an `<input type="checkbox">` with associated `<label>`.
- Custom styled checkbox with hidden native input.
**Key Classes:**
- `rounded-4px` for checkbox square.
- `w-*`, `h-*` for size.
- Colors for checked/disabled states.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Datepicker
Date selection component with calendar interface.
**Structure:**
- Input field with date picker functionality.
- Calendar popup with navigation controls.
- Uses Kaida theming classes.
**Key Classes:**
- Input styling: `rounded-*`, `p-*`, `border`, `bg-*`, `text-*`.
- Calendar grid: `grid`, `gap-*`, text and background classes for days.
- Navigation buttons styled like Button component.
---
### Dropdown
Expandable menu of selectable options.
**Trigger Types:**
- Click trigger (default)
- Hover trigger: Add `data-dropdown-trigger="hover"` to the button.
- Checkbox dropdown for multi-select
- Search dropdown
**JavaScript Initialization:**
```javascript
class Dropdown { ... }
```
**Key Options:**
- `placement`: "top", "bottom", "left", "right"
- `trigger_type`: "click" or "hover"
- `offset_skidding`: X offset
- `offset_distance`: Y offset
- `delay`: hover delay in ms
**Key Classes:**
- Menu hidden by default: `hidden`
- `aria-hidden="true"` on menu when closed
---
### Input
Input for user text entry.
**Variants:**
- Default text input
- Password input
**Key Classes:**
- `rounded-*` for border radius.
- `p-*` for padding.
- `border` with color classes.
- `bg-*`, `text-*`.
- Focus state styling.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Field
Field group with inputs.
**Variants:**
- Default with label
- Optional field (with "(optional)" label)
- Password field
- With caption
- With tooltip
**Structure:**
- Label element.
- Input element.
- Optional: caption text, tooltip, error message.
**Key Classes:**
- Input styling: `rounded-*`, `p-*`, `border`, `bg-*`, `text-*`.
- Focus and error states.
- Caption: `text-*`, color classes.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Menu
List of navigational or action options.
**Variants:**
- Default menu
- Dropdown menu (see Dropdown page)
- Submenu
- Full example with navigation
**Structure:**
- Unordered list (`<ul>`) with list items (`<li>`).
- Links or buttons as menu items.
- Can be nested for submenus.
**Key Classes:**
- `flex`, `gap-*` for layout.
- `p-*` for padding.
- `text-*`, color classes.
- Hover and active states.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Pagination
Controls for navigating multi-page content.
**Variants:**
- Default with Previous/Next and page numbers
- Short version
**Structure:**
- Navigation container with list of page links.
- Previous and Next buttons.
- Active page indication.
**Key Classes:**
- `flex`, `gap-*`, `items-center`.
- `rounded-*` for page buttons.
- `bg-*`, `text-*` for active state.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Popover
Contextual information or actions on click/hover (lighter than Popup).
**Structure:**
- Trigger element.
- Popover panel positioned relative to trigger.
- Typically hidden by default, shown on interaction.
**Key Classes:**
- `rounded-*` for popover box.
- `p-*` for padding.
- `bg-*`, `text-*` for colors.
- `shadow-*` for elevation.
- Positioning: `absolute`, `z-50`.
---
### Popup (Modal/Dialog)
Floating content triggered by user interaction (modal/dialog).
**HTML Structure:**
- Trigger element with `data-popup-target="ID"`.
- Popup element with corresponding `id`.
- Popup hidden by default: add `hidden` class.
- Inside popup: buttons with `data-popup-hide="ID"` to close.
**JavaScript Initialization:**
```javascript
class Popup { ... }
```
**Key Features:**
- Portal support
- Animation with custom duration
- Backdrop with configurable classes
- Closable via click outside or Escape
**Key Options:**
- `placement`: "center", "top-left", "top-center", etc.
- `backdrop`: boolean
- `backdrop_classes`: CSS classes for backdrop
- `animation`: boolean
- `animation_duration`: in ms
**Key Classes:**
- Popup: `hidden fixed inset-0 z-50 flex items-center justify-center`
- Backdrop: `fixed inset-0 bg-gray-900/50 dark:bg-gray-900/80 z-40 transition-opacity`
---
### Radio
Exclusive option selector from a set.
**Structure:**
- Typically an `<input type="radio">` with associated `<label>`.
- Custom styled radio with hidden native input.
- Grouped by same `name` attribute.
**Key Classes:**
- `rounded-full` for radio circle.
- `w-*`, `h-*` for size.
- Colors for checked/disabled states.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Slider
Visual control for selecting numerical values.
**Features:**
- Original input is visually hidden but functional.
- Optional `data-buffer="30"` for secondary buffer fill (e.g., video progress).
**Variants:**
- Default horizontal
- Buffer
- Vertical
**JavaScript Initialization:**
```javascript
class RangeSlider { ... }
```
**Key Options:**
- `polyfill`: boolean
- `disabled_class`: "opacity-40"
- `min`, `max`, `step`, `value`
- `buffer`: secondary value
- `vertical`: boolean
---
### Table
Rows and columns for structured data display.
**Structure:**
- `<table>` with `<thead>` and `<tbody>`.
- `<th>` for headers, `<td>` for data cells.
- Can include badges, avatars, or other components in cells.
**Key Classes:**
- `border` for borders.
- `p-*` for cell padding.
- `text-*` for text styling.
- `bg-*` for row/cell backgrounds.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Tab
Sections of content in a single view.
**Variants:**
- Default
- Default group
- Vertical
- Vertical group
- Segmented
- Segmented horizontal group
- Segmented vertical group
**Important:**
Don't forget to set `fill`/`stroke` value to `currentColor` for icons to correct icon color.
**Key Classes:**
- Active tab styling: `bg-*`, `text-*`.
- `flex`, `gap-*` for tab list.
- `p-*` for padding.
---
### Toast
Temporary notification that auto-dismisses.
**Trigger Attributes:**
Add `data-component="toast"` to any element with these data attributes:
- `data-toast-type`: "info", "success", "warning", or "error"
- `data-toast-position`: "top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center"
- `data-toast-dismissible`: "true" or "false"
- `data-toast-value`: the toast message
**Variants:**
- Default (dismissible)
- Not dismissible
- Warning
- Error
**JavaScript:**
Include the provided JS code in your project.
**Key Classes:**
- Container: `fixed z-[9999] p-16px flex flex-col gap-8px pointer-none`
- Position classes: `top-0 left-0`, `top-0 left-[50%] -translate-x-[50%]`, etc.
- Type classes:
- Info: `border-black-100 dark:border-black-700 bg-background`
- Success: `border-green-500 bg-green-50 dark:bg-green-900`
- Warning: `border-yellow-500 bg-yellow-50 dark:bg-yellow-900`
- Error: `border-red-500 bg-red-50 dark:bg-red-900`
- Animation: `animate-[fade-in_.3s_ease-out]`, `animate-[fade-out_.3s_ease-out]`
---
### Toggle
Binary state control with visual feedback.
**Structure:**
- Hidden checkbox input.
- Visual toggle element with slider.
- Label for accessibility.
**Key Classes:**
- `rounded-full` for pill shape.
- `w-*`, `h-*` for size.
- Colors for checked/unchecked states.
**Usage:** Just copy-paste the HTML or Figma code into your project.
---
### Tooltip
Contextual information on hover/focus.
**Positions:**
- Top
- Bottom
- Left
- Right
**Structure:**
- Trigger element with tooltip content.
- Tooltip popup positioned relative to trigger.
**Key Classes:**
- `rounded-*` for tooltip box.
- `p-*` for padding.
- `bg-*`, `text-*` for colors.
- Positioning classes.
**Usage:** Just copy-paste the HTML or Figma code into your project.
<!-- ========================================================== -->
<!-- KAIDA_SECTION: generation -->
<!-- ========================================================== -->
## Code Generation Rules
1. **Return full, valid HTML** (including `<html>`, `<head>`, `<body>` for full pages, or a fragment if requested).
2. **Use semantic HTML** and include appropriate ARIA attributes for accessibility.
3. **Include JavaScript** when the component requires it (Accordion, Dropdown, Popup, Slider, Toast, etc.).
4. **Security**: Avoid `innerHTML` with user input; use safe methods.
5. **No extra dependencies**: All code should work with Kaida and Tailwind (via CDN or local). Use inline SVGs for icons.
6. **Explanation**: Provide a brief description after the code, but code should be the primary output.
## Examples
### Example 1: Default Theme Request
**User**: "Create a product card: title 'Laptop', price '$1200', 'Buy' button."
**Your Response**:
```html
<div class="max-w-sm p-16px bg-white rounded-12px shadow-md border border-gray-200">
<h3 class="text-h5 text-gray-900 mb-8px">Laptop</h3>
<p class="text-p2 text-gray-600 mb-16px">$1200</p>
<button
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 rounded-8px text-white bg-accent-900 border 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:text-accent-900 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"
>
Buy
</button>
</div>
```
### Example 2: With Custom Theme (different radius and accent color)
**User**: "Create a product card: title 'Laptop', price '$1200', 'Buy' button."
**Your Response** (same classes — theme handles the differences):
```html
<!-- Same HTML as above — the theme's CSS variables will apply the custom values -->
```
<!-- ========================================================== -->
<!-- HOW TO USE THIS FILE -->
<!-- ========================================================== -->
## Usage Instructions
### Option 1: Full Copy (New Project)
Copy the entire file as `CLAUDE.md` in your project root. For Cursor, use `.cursorrules`.
### Option 2: Modular Insert (Existing Project)
Insert only specific sections into your existing `CLAUDE.md`:
- **Role & Principles**: Copy the `KAIDA_SECTION: role` block to set up Kaida awareness.
- **Theme**: Copy the `KAIDA_SECTION: theme` block and replace the `@theme` block with your project's theme.
- **Components**: Copy the `KAIDA_SECTION: components` block for component guidelines.
- **Generation Rules**: Copy the `KAIDA_SECTION: generation` block for code rules and examples.
### Option 3: Reference Only
Keep this file separate (e.g., `kaida-instructions.md`) and reference it from your main `CLAUDE.md`:
```markdown
For Kaida component usage, refer to the guidelines in ./kaida-instructions.md
```
### Beginners: Quick Start Without File Setup
If you don't want to use the file, you can:
1. Copy your theme from [Themer](https://kaida.dev/themer) (find it in the element with `data-themes-target="tailwindThemeContent"`).
2. Paste it directly into the chat with your query: "Here's my theme: [paste]. Create a header using Kaida components."
---
## Updating the Theme (Team Projects)
When the project theme changes:
1. Open [Themer](https://kaida.dev/themer).
2. Copy the entire `@theme` block.
3. Replace the `@theme` block in this file (or the `KAIDA_SECTION: theme` section).
4. Commit and push to the repository.
5. All team members get the update on `git pull`.
How to use this file:
Copy the entire file as AGENTS.md (or CLAUDE.md, or .cursorrules) for a new project, or insert specific sections marked with <!-- KAIDA_SECTION: ... --> into your existing instructions. For team projects, update the @theme block in the theme section when your design system changes — all team members will sync via git. Beginners can skip file setup entirely: just copy your theme from Export popup and paste it directly into the chat with your query.