Header
Native site header with optional scroll enhancement.
- Browsers
- Chrome 123+, Firefox 121+, Safari 17.5+
- Tier
- 0
- Bundle compressed
- 141 B
- Forced layout budget
- 0 ms
- Axe budget
- 0
- SSR compatible
- Yes
- Published contract
- Test harness
Playground
Team workspace
Keep your team's projects and recent updates in one place.
Docs
Find guides for organizing projects and collaborating with your team.
Projects
Start a new project and plan your next milestone.
Scroll inside the panel. Enable Hide on scroll to hide down and reveal up.
Team workspace
A shared view of what you are working on.
12Active projects
4Awaiting review
Workspace overview
Keep your team's projects and recent updates in one place.
Projects
Website refresh · In progress. Design library · Ready for review.
Recent activity
The team updated the roadmap and shared a new design proposal.
Create a project
Start with a name, invite your team, and plan your next milestone.
Workspace help
Find guides for organizing projects and collaborating with your team.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
import { Breadcrumb, Button, Header } from "@gunkin/uiify";
import { HeaderClient } from "@gunkin/uiify/components/header/client";
import {
ModalBody,
ModalClose,
ModalContent,
ModalHeader,
ModalTitle,
ModalTrigger,
} from "@gunkin/uiify/components/modal";
// Native by default. Replace Header.Root with HeaderClient to hide on scroll.
// HeaderClient defaults to sticky + hideOnScroll. For a panel, pass its scrollport id.
export default function Example() {
return (
<>
<Header.Root placement="sticky" className="">
<a href="/">Logo</a>
<nav aria-label="Workspace">
<a href="/overview" aria-current="page">
Overview
</a>
<a href="/projects">Projects</a>
<a href="/activity">Activity</a>
</nav>
<ModalTrigger target="logo-navigation" className="">
Menu
</ModalTrigger>
<ModalContent className="" id="logo-navigation" size="full" aria-labelledby="logo-navigation-title">
<ModalHeader>
<ModalTitle id="logo-navigation-title">Logo navigation</ModalTitle>
<ModalClose target="logo-navigation" aria-label="Close navigation">
×
</ModalClose>
</ModalHeader>
<ModalBody>
<nav aria-label="Mobile workspace">
<a href="/overview" aria-current="page">
Overview
</a>
<a href="/projects">Projects</a>
<a href="/activity">Activity</a>
<a href="/help">Help</a>
<Button as="a" href="/projects/new" variant="link" className="">
New project
</Button>
</nav>
</ModalBody>
</ModalContent>
</Header.Root>
<Breadcrumb.Root className="">
<Breadcrumb.List
items={[
{ key: "workspace", label: "Workspace", href: "/" },
{ key: "overview", label: "Overview", current: true },
]}
separator={<Breadcrumb.Separator />}
/>
</Breadcrumb.Root>
</>
);
}
// Optional client entry; SSR remains visible and scroll behavior attaches after hydration.
export function ScrollHeader() {
return (
<HeaderClient className="">
<a href="/">Logo</a>
<nav aria-label="Workspace">
<a href="/overview" aria-current="page">
Overview
</a>
<a href="/projects">Projects</a>
<a href="/activity">Activity</a>
</nav>
</HeaderClient>
);
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
/* ---- Header demo (homepage card + detail playground) ---- */
.docs-header-demo {
inline-size: 100%;
color: var(--foreground);
font-size: 0.82rem;
}
.docs-header-demo--playground {
display: flex;
flex-direction: column;
gap: calc(var(--docs-space-unit) * 2.5);
block-size: 100%;
min-block-size: 0;
}
.docs-header-demo__scroll-hint {
margin: 0;
color: var(--muted-foreground);
font-size: var(--docs-text-xs);
line-height: var(--docs-leading-snug);
}
.docs-header-demo__viewport {
container: header-demo / size;
flex: 1;
min-block-size: 0;
block-size: 22rem;
overflow: auto;
overscroll-behavior: contain;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
corner-shape: squircle;
background: var(--background);
}
.docs-header-demo__viewport--mobile {
inline-size: min(100%, 24rem);
margin-inline: auto;
}
.docs-header-demo__viewport--desktop {
inline-size: 100%;
}
.docs-playground--controls:has(.docs-playground__stage--header) {
grid-template-columns: minmax(0, 1fr);
}
.docs-playground--controls:has(.docs-playground__stage--header) .docs-controls {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-inline-start: 0;
border-block-start: 1px solid var(--border);
}
.docs-playground__stage--header {
display: flex;
flex-direction: column;
min-block-size: 26rem;
block-size: 26rem;
padding: calc(var(--docs-space-unit) * 4);
overflow: hidden;
align-items: stretch;
}
.docs-header-demo [data-uiify-header] {
z-index: 2;
background: var(--card);
color: var(--card-foreground);
border-block-end: 1px solid var(--border);
}
.docs-header-demo__bar {
position: relative;
display: flex;
align-items: center;
gap: calc(var(--docs-space-unit) * 3);
min-block-size: 4rem;
padding-inline: calc(var(--docs-space-unit) * 4);
}
.docs-header-demo__brand {
color: inherit;
font-size: var(--docs-text-base);
font-weight: var(--docs-weight-bold);
text-decoration: none;
white-space: nowrap;
}
.docs-header-demo__desktop-actions,
.docs-header-demo__nav {
display: none;
}
.docs-header-demo__menu {
gap: 0;
padding: 0;
background: var(--card);
color: var(--card-foreground);
}
.docs-header-demo__menu-header {
display: grid;
grid-template-columns: 2.5rem 1fr 2.5rem;
align-items: center;
min-block-size: 4rem;
padding-block: env(safe-area-inset-top) 0;
padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
border-block-end: 1px solid var(--border);
}
.docs-header-demo__menu-title {
grid-column: 2;
margin: 0;
font-size: var(--docs-text-base);
font-weight: var(--docs-weight-bold);
}
.docs-header-demo__menu-header .docs-header-demo__close {
position: static;
grid-column: 3;
display: grid;
place-items: center;
inline-size: 2.5rem;
block-size: 2.5rem;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
corner-shape: squircle;
background: var(--card);
color: inherit;
cursor: pointer;
font-size: var(--docs-text-2xl);
}
.docs-header-demo__actions {
display: flex;
align-items: center;
gap: calc(var(--docs-space-unit) * 2);
}
.docs-header-demo__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: 2.5rem;
padding-inline: calc(var(--docs-space-unit) * 3);
border: 1px solid var(--primary);
border-radius: var(--radius-md);
corner-shape: squircle;
background: var(--primary);
color: var(--primary-foreground);
font: inherit;
font-weight: var(--docs-weight-semibold);
gap: calc(var(--docs-space-unit) * 1.5);
text-decoration: none;
}
.docs-header-demo__toggle {
margin-inline-start: auto;
background: var(--card);
color: inherit;
font: inherit;
display: flex;
align-items: center;
gap: calc(var(--docs-space-unit) * 2.5);
min-block-size: 2.5rem;
padding-inline: calc(var(--docs-space-unit) * 3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
corner-shape: squircle;
cursor: pointer;
list-style: none;
}
.docs-header-demo__card-navigation {
margin-inline-start: auto;
}
.docs-header-demo__card-menu {
position: absolute;
inset-block-start: 100%;
inset-inline: 0;
display: grid;
gap: calc(var(--docs-space-unit) * 2);
/* Reserve the header bar within the card viewport's 240px minimum height. */
max-block-size: calc(240px - 4rem);
overflow: auto;
overscroll-behavior: contain;
padding: calc(var(--docs-space-unit) * 2);
border-block-end: 1px solid var(--border);
background: var(--card);
color: var(--card-foreground);
}
.docs-header-demo__card-menu .docs-header-demo__mobile-nav a {
min-block-size: 2.25rem;
}
.docs-header-demo__mobile-content {
display: flex;
flex-direction: column;
gap: calc(var(--docs-space-unit) * 4);
padding-block: calc(var(--docs-space-unit) * 4)
max(calc(var(--docs-space-unit) * 4), env(safe-area-inset-bottom));
padding-inline: max(calc(var(--docs-space-unit) * 4), env(safe-area-inset-left))
max(calc(var(--docs-space-unit) * 4), env(safe-area-inset-right));
}
.docs-header-demo__mobile-nav {
display: flex;
flex-direction: column;
}
.docs-header-demo__mobile-nav a,
.docs-header-demo__nav a,
.docs-header-demo__help {
display: inline-flex;
align-items: center;
min-block-size: 2.5rem;
padding-inline: calc(var(--docs-space-unit) * 2);
color: inherit;
text-decoration: none;
}
.docs-header-demo__mobile-nav [aria-current="page"],
.docs-header-demo__nav [aria-current="page"] {
background: var(--accent);
color: var(--accent-foreground);
border-radius: var(--radius-sm);
corner-shape: squircle;
font-weight: var(--docs-weight-semibold);
}
.docs-header-demo a {
text-decoration: none;
}
.docs-header-demo a:not(.docs-header-demo__cta):hover {
color: var(--primary);
}
.docs-header-demo__toggle:hover {
border-color: var(--ring);
}
.docs-header-demo :focus-visible {
outline: 2px solid var(--ring);
outline-offset: 3px;
}
.docs-header-demo__breadcrumb {
padding-block: calc(var(--docs-space-unit) * 3);
padding-inline: calc(var(--docs-space-unit) * 4);
font-size: var(--docs-text-xs);
}
.docs-header-demo__breadcrumb ol {
display: flex;
gap: calc(var(--docs-space-unit) * 2);
margin: 0;
padding: 0;
list-style: none;
}
.docs-header-demo__breadcrumb li {
display: flex;
gap: calc(var(--docs-space-unit) * 2);
}
.docs-header-demo__breadcrumb a {
color: var(--muted-foreground);
}
.docs-header-demo__workspace {
padding-inline: calc(var(--docs-space-unit) * 4);
padding-block-end: calc(var(--docs-space-unit) * 5);
}
.docs-header-demo__workspace h3 {
line-height: var(--docs-leading-tight);
margin-block: calc(var(--docs-space-unit) * 2);
font-size: var(--docs-text-lg);
font-weight: var(--docs-weight-semibold);
}
.docs-header-demo__workspace p {
margin: 0;
color: var(--muted-foreground);
}
.docs-header-demo__metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(var(--docs-space-unit) * 3);
margin-block-start: calc(var(--docs-space-unit) * 4);
}
.docs-header-demo__metrics div {
display: grid;
gap: calc(var(--docs-space-unit) * 1);
padding: calc(var(--docs-space-unit) * 3);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
corner-shape: squircle;
background: var(--card);
}
.docs-header-demo__metrics strong {
font-size: var(--docs-text-xl);
font-variant-numeric: tabular-nums;
}
.docs-header-demo__metrics span {
color: var(--muted-foreground);
font-size: var(--docs-text-xs);
}
.docs-header-demo__scroll-body {
display: grid;
gap: calc(var(--docs-space-unit) * 3);
padding-block-end: calc(var(--docs-space-unit) * 4);
padding-inline: calc(var(--docs-space-unit) * 4);
}
.docs-header-demo__scroll-section {
min-block-size: 8rem;
padding: calc(var(--docs-space-unit) * 4);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
corner-shape: squircle;
background: var(--card);
color: var(--card-foreground);
scroll-margin-block-start: calc(var(--docs-space-unit) * 20);
}
.docs-header-demo__scroll-section h3 {
line-height: var(--docs-leading-tight);
margin-block: 0 calc(var(--docs-space-unit) * 1.5);
font-size: var(--docs-text-base);
}
.docs-header-demo__scroll-section p {
margin: 0;
color: var(--muted-foreground);
line-height: var(--docs-leading-normal);
}
.docs-header-demo--card .docs-header-demo__viewport {
inline-size: 100%;
block-size: 100%;
min-block-size: 240px;
border: none;
border-radius: 0;
}
@container header-demo (min-width: 40rem) {
.docs-header-demo__brand {
position: static;
translate: none;
}
.docs-header-demo__desktop-actions {
display: flex;
align-items: center;
gap: calc(var(--docs-space-unit) * 4);
margin-inline-start: auto;
}
.docs-header-demo__toggle,
.docs-header-demo__card-navigation {
display: none;
}
.docs-header-demo__nav {
display: flex;
gap: calc(var(--docs-space-unit) * 0.5);
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
import { Breadcrumb, Button, Header } from "@gunkin/uiify";
import { HeaderClient } from "@gunkin/uiify/components/header/client";
import {
ModalBody,
ModalClose,
ModalContent,
ModalHeader,
ModalTitle,
ModalTrigger,
} from "@gunkin/uiify/components/modal";
// Native by default. Replace Header.Root with HeaderClient to hide on scroll.
// HeaderClient defaults to sticky + hideOnScroll. For a panel, pass its scrollport id.
export default function Example() {
return (
<>
<Header.Root
placement="sticky"
className="
grid gap-md w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))] p-6 border border-border rounded-xl
[corner-shape:squircle] bg-card text-card-foreground shadow-popover [&[popover]:not(:popover-open)]:hidden
motion-safe:[&[popover]]:[transition:var(--transition-presence)]
motion-safe:[&[popover]:not(:popover-open)]:opacity-0
motion-safe:[&[popover]:not(:popover-open)]:[scale:var(--presence-scale)]
motion-safe:starting:[&[popover]:popover-open]:opacity-0
motion-safe:starting:[&[popover]:popover-open]:[scale:var(--presence-scale)]
"
>
<a href="/">Logo</a>
<nav aria-label="Workspace">
<a href="/overview" aria-current="page">
Overview
</a>
<a href="/projects">Projects</a>
<a href="/activity">Activity</a>
</nav>
<ModalTrigger
target="logo-navigation"
className={
"focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(" +
"--ring)_16%,_transparent)] [--uiify-button-rim:rgb(255_255_255_/_20%)] [--uiify-button-wash:light-dark(" +
"rgb(255_255_255_/_15%),_rgb(255_255_255_/_30%))] relative isolate inline-flex items-center justify-cent" +
"er [gap:0.375rem] [min-block-size:44px] [min-inline-size:44px] py-0 [padding-inline:1.25rem] border-[le" +
"ngth:var(--border-width)] border-solid border-transparent rounded-[var(--radius-full)] bg-foreground bg" +
"-clip-padding text-background text-base font-[number:var(--weight-medium)] leading-6 no-underline curso" +
"r-pointer [transition:var(--transition-colors)] before:content-[''] before:absolute before:inset-0 befo" +
"re:z-[-1] before:[border-radius:inherit] before:pointer-events-none after:content-[''] after:absolute a" +
"fter:inset-0 after:z-[-1] after:[border-radius:inherit] after:pointer-events-none before:[background-co" +
"lor:var(--uiify-button-wash)] before:[filter:blur(10px)] before:[translate:0_-50%] before:[clip-path:in" +
"set(50%_0_-50%_0_round_var(--radius-full))] after:[padding:0.5px] after:[background-image:linear-gradie" +
"nt(to_bottom,_var(--uiify-button-rim),_transparent_75%)] after:[mask:linear-gradient(#fff_0_0)_content-" +
"box_exclude,_linear-gradient(#fff_0_0)] [&:is([data-size=sm],[data-size=icon-sm])]:[min-block-size:32px" +
"] [&:is([data-size=sm],[data-size=icon-sm])]:[min-inline-size:32px] [&:is([data-size=sm],[data-size=ico" +
"n-sm])]:[padding-inline:0.75rem] [&:is([data-size=sm],[data-size=icon-sm])]:[gap:0.25rem] [&:is([data-s" +
"ize=sm],[data-size=icon-sm])]:text-sm [&:is([data-size=sm],[data-size=icon-sm])]:leading-5 [&:is([data-" +
"size=lg],[data-size=icon-lg])]:[min-block-size:56px] [&:is([data-size=lg],[data-size=icon-lg])]:[min-in" +
"line-size:56px] [&:is([data-size=lg],[data-size=icon-lg])]:[padding-inline:1.75rem] [&:is([data-size=lg" +
"],[data-size=icon-lg])]:text-lg [&:is([data-size=lg],[data-size=icon-lg])]:leading-7 [&[data-size^=icon" +
"]]:px-0 [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:hover:[&:not(:disabled,[data-disabled])]:[b" +
"ackground-color:color-mix(in_oklch,_var(--foreground)_90%,_var(--background))] active:[&:not(:disabled," +
"[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_80%,_var(--background))] disa" +
"bled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allow" +
"ed data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=" +
"page]))]:[--uiify-button-rim:light-dark(rgb(0_0_0_/_5%),_rgb(255_255_255_/_10%))] data-[variant=seconda" +
"ry]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button" +
"-wash:light-dark(rgb(255_255_255_/_20%),_rgb(255_255_255_/_5%))] data-[variant=secondary]:[&:where(:not" +
"(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[background-color:color-mix(in_o" +
"klch,_var(--foreground)_10%,_transparent)] data-[variant=secondary]:[&:where(:not(:checked+*,[data-sele" +
"cted],[aria-pressed=true],[aria-current=page]))]:text-foreground data-[variant=outline]:[&:where(:not(:" +
"checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button-rim:color-mix(in_o" +
"klch,_var(--foreground)_25%,_transparent)] data-[variant=outline]:[&:where(:not(:checked+*,[data-select" +
"ed],[aria-pressed=true],[aria-current=page]))]:[border-color:color-mix(in_oklch,_var(--foreground)_20%," +
"_transparent)] data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[ari" +
"a-current=page]))]:bg-transparent data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria" +
"-pressed=true],[aria-current=page]))]:text-foreground data-[variant=outline]:before:content-none data-[" +
"variant=outline]:after:[inset:calc(-1_*_var(--border-width))] data-[variant=outline]:after:[padding:var" +
"(--border-width)] data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[" +
"aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_v" +
"ar(--foreground)_16%,_transparent)] data-[variant=ghost]:[&:where(:not(:checked+*,[data-selected],[aria" +
"-pressed=true],[aria-current=page]))]:bg-transparent data-[variant=ghost]:[&:where(:not(:checked+*,[dat" +
"a-selected],[aria-pressed=true],[aria-current=page]))]:text-foreground data-[variant=ghost]:before:cont" +
"ent-none data-[variant=ghost]:after:content-none data-[variant=ghost]:[&:where(:not(:checked+*,[data-se" +
"lected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[backgroun" +
"d-color:color-mix(in_oklch,_var(--foreground)_16%,_transparent)] data-[variant=secondary]:[&:where(:not" +
"(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-di" +
"sabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_26%,_transparent)] data-[variant=dest" +
"ructive]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-b" +
"utton-wash:rgb(255_255_255_/_15%)] data-[variant=destructive]:[&:where(:not(:checked+*,[data-selected]," +
"[aria-pressed=true],[aria-current=page]))]:bg-destructive data-[variant=destructive]:text-destructive-f" +
"oreground data-[variant=destructive]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria" +
"-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(-" +
"-destructive),_black_20%)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=outline]:[" +
"&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disabl" +
"ed,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_10%,_transparent)] [@media" +
"_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=ghost]:[&:where(:not(:checked+*,[data-select" +
"ed],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disabled,[data-disabled])]:[background-col" +
"or:color-mix(in_oklch,_var(--foreground)_10%,_transparent)] [@media_(any-hover:_hover)_and_(any-pointer" +
":_fine)]:data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-cu" +
"rrent=page]))]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--for" +
"eground)_20%,_transparent)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=destructi" +
"ve]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:d" +
"isabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--destructive),_black_12%)] [&:is([" +
"data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [&" +
":is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_255_/_15" +
"%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([data-sele" +
"cted],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pressed=true],[a" +
"ria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [:" +
"checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transparent [:checked+&]:bg" +
"-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[&:is" +
"([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[data-disabled])]:[backgr" +
"ound-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@media_(any-hover:_hove" +
"r)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:color-mix(in_oklch,_var" +
"(--primary)_88%,_var(--primary-foreground))] [:disabled+&]:opacity-50 [:disabled+&]:cursor-not-allowed " +
"[&[hidden]]:hidden data-[variant=link]:px-0 data-[variant=link]:border-0 data-[variant=link]:border-cur" +
"rent data-[variant=link]:border-none data-[variant=link]:rounded-none data-[variant=link]:bg-transparen" +
"t data-[variant=link]:text-primary data-[variant=link]:underline data-[variant=link]:[text-underline-of" +
"fset:0.2em] data-[variant=link]:active:px-0 data-[variant=link]:active:border-0 data-[variant=link]:act" +
"ive:border-current data-[variant=link]:active:border-none data-[variant=link]:active:rounded-none data-" +
"[variant=link]:active:bg-transparent data-[variant=link]:active:text-primary data-[variant=link]:active" +
":underline data-[variant=link]:active:[text-underline-offset:0.2em] data-[variant=link]:[min-inline-siz" +
"e:0] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:px-0 [@media_(any-ho" +
"ver:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:border-0 [@media_(any-hover:_hover)_and_" +
"(any-pointer:_fine)]:data-[variant=link]:hover:border-current [@media_(any-hover:_hover)_and_(any-point" +
"er:_fine)]:data-[variant=link]:hover:border-none [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:da" +
"ta-[variant=link]:hover:rounded-none [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=" +
"link]:hover:bg-transparent [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hove" +
"r:text-primary [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:underline " +
"[@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:[text-underline-offset:0." +
"2em] data-[variant=link]:before:content-none data-[variant=link]:after:content-none data-[variant=link]" +
":focus-visible:[outline:2px_solid_var(--ring)] data-[variant=link]:focus-visible:[outline-offset:3px] [" +
"[data-uiify-toggle]>input:focus-visible+&]:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(" +
"--ring)_16%,_transparent)] [[data-uiify-toggle-group]_[data-part=item]>input:focus-visible+&]:[box-shad" +
"ow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [[data-uiify-modal][data-" +
"part=close]&]:border-transparent [[data-uiify-modal][data-part=close]&]:[background-color:color-mix(in_" +
"oklch,_var(--foreground)_8%,_transparent)] [[data-uiify-modal][data-part=close]&]:text-foreground [[dat" +
"a-uiify-modal][data-part=close]&:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_14%,_tr" +
"ansparent)] [[data-uiify-modal][data-part=close]&:active]:[background-color:color-mix(in_oklch,_var(--f" +
"oreground)_20%,_transparent)] [[data-uiify-pagination]_span&:not([data-disabled])]:cursor-default [[dat" +
"a-uiify-input-group]>[data-part=addon]>&]:[min-inline-size:0] [[data-uiify-input-group]>[data-part=addo" +
"n]>&]:[max-inline-size:100%] [[data-uiify-input-group]>[data-part=addon]>&]:whitespace-normal [[data-ui" +
"ify-input-group]>[data-part=addon]>&]:[overflow-wrap:anywhere] [[data-uiify-item-content]>&]:[justify-s" +
"elf:start]"
}
>
Menu
</ModalTrigger>
<ModalContent
className={
"[&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)] [&_[data-positioning=native]]:[--u" +
"iify-anchor-offset:var(--space-sm)] [&[popover]:popover-open:not([data-positioning=native])]:[margin:re" +
"vert] [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] [&[data-part=content]]:" +
"m-auto [&[data-part=content]]:[inline-size:min(28rem,_calc(100vw_-_2_*_var(--space-lg)))] [&[data-part=" +
"content]]:p-xl [&[data-part=content]]:border-[length:var(--border-width)] [&[data-part=content]]:border" +
"-solid [&[data-part=content]]:border-border [&[data-part=content]]:rounded-xl [&[data-part=content]]:[c" +
"orner-shape:squircle] [&[data-part=content]]:bg-popover [&[data-part=content]]:text-popover-foreground " +
"[&[data-part=content]]:shadow-modal [&[data-part=content]::backdrop]:[background-color:rgb(0_0_0_/_45%)" +
"] [&_[data-part=title]]:m-0 [&_[data-part=title]]:text-[length:var(--text-xl)] [&_[data-part=title]]:fo" +
"nt-[number:var(--weight-semibold)] [&_[data-part=title]]:[line-height:1.3] [&_[data-part=description]]:" +
"[margin-block:var(--space-sm)_var(--space-lg)] [&_[data-part=description]]:text-muted-foreground [&_[da" +
"ta-part=description]]:text-sm [&_[data-part=description]]:[line-height:var(--leading-normal)] motion-sa" +
"fe:[&[data-part=content]]:[transition:var(--transition-presence)] motion-safe:[&[data-part=content]::ba" +
"ckdrop]:[transition:var(--transition-presence)] motion-safe:[&[data-part=content]:not([open])]:opacity-" +
"0 motion-safe:[&[data-part=content]:not([open])]:[scale:var(--presence-scale)] motion-safe:[&[data-part" +
"=content]:not([open])::backdrop]:opacity-0 motion-safe:starting:[&[data-part=content][open]]:opacity-0 " +
"motion-safe:starting:[&[data-part=content][open]]:[scale:var(--presence-scale)] motion-safe:starting:[&" +
"[data-part=content][open]::backdrop]:opacity-0 data-[part=content]:[--uiify-modal-inline-size:28rem] da" +
"ta-[part=content]:flex-col data-[part=content]:gap-md data-[part=content]:[inline-size:min(var(--uiify-" +
"modal-inline-size),_calc(100vw_-_2_*_var(--space-lg)))] data-[part=content]:[max-block-size:calc(100dvh" +
"_-_2_*_var(--space-lg))] data-[part=content]:[&[open]]:flex data-[part=content]:data-[size=sm]:[--uiify" +
"-modal-inline-size:24rem] data-[part=content]:data-[size=lg]:[--uiify-modal-inline-size:40rem] data-[pa" +
"rt=content]:data-[size=full]:inset-0 data-[part=content]:data-[size=full]:m-0 data-[part=content]:data-" +
"[size=full]:[inline-size:100%] data-[part=content]:data-[size=full]:[block-size:100%] data-[part=conten" +
"t]:data-[size=full]:[max-inline-size:none] data-[part=content]:data-[size=full]:[max-block-size:none] d" +
"ata-[part=content]:data-[size=full]:[padding-block:max(var(--space-xl),_env(safe-area-inset-top))_max(v" +
"ar(--space-xl),_env(safe-area-inset-bottom))] data-[part=content]:data-[size=full]:[padding-inline:max(" +
"var(--space-xl),_env(safe-area-inset-left))_max(var(--space-xl),_env(safe-area-inset-right))] data-[par" +
"t=content]:data-[size=full]:border-0 data-[part=content]:data-[size=full]:border-current data-[part=con" +
"tent]:data-[size=full]:border-none data-[part=content]:data-[size=full]:rounded-none [@media_(width_>=_" +
"40rem)]:data-[part=content]:data-[align=start]:[&:not([data-size=full])]:[margin-block:var(--space-xl)_" +
"auto] data-[part=header]:relative data-[part=header]:flex-none data-[part=header]:[padding-inline-end:2" +
".5rem] data-[part=close]:data-[uiify-button]:border-transparent data-[part=close]:data-[uiify-button]:[" +
"background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] data-[part=close]:data-[uiify-" +
"button]:text-foreground data-[part=close]:data-[uiify-button]:hover:[background-color:color-mix(in_oklc" +
"h,_var(--foreground)_14%,_transparent)] data-[part=close]:data-[uiify-button]:active:[background-color:" +
"color-mix(in_oklch,_var(--foreground)_20%,_transparent)] [&[data-part=header]>[data-part=close]]:absolu" +
"te [&[data-part=header]>[data-part=close]]:[inset-block-start:0] [&[data-part=header]>[data-part=close]" +
"]:[inset-inline-end:0] [&[data-part=header]>[data-part=close]]:grid [&[data-part=header]>[data-part=clo" +
"se]]:place-items-center [&[data-part=header]>[data-part=close]]:[inline-size:2rem] [&[data-part=header]" +
">[data-part=close]]:[block-size:2rem] [&[data-part=header]>[data-part=close]]:[min-block-size:0] [&[dat" +
"a-part=header]>[data-part=close]]:p-0 [&[data-part=header]>[data-part=close]]:[border-radius:999px] dat" +
"a-[part=body]:flex-auto data-[part=body]:[min-block-size:0] data-[part=body]:overflow-auto data-[part=b" +
"ody]:overscroll-contain data-[part=footer]:flex data-[part=footer]:flex-none data-[part=footer]:flex-wr" +
"ap data-[part=footer]:justify-end data-[part=footer]:gap-sm [@media_(pointer:_coarse)]:data-[part=heade" +
"r]:[padding-inline-end:2.75rem] [@media_(pointer:_coarse)]:[&[data-part=header]>[data-part=close]]:[min" +
"-inline-size:2.75rem] [@media_(pointer:_coarse)]:[&[data-part=header]>[data-part=close]]:[min-block-siz" +
"e:2.75rem] [@media_(pointer:_coarse)]:[&[data-part=footer]>*]:[min-block-size:2.75rem] data-[part=grabb" +
"er]:hidden data-[part=grabber]:flex-none data-[part=grabber]:[block-size:1.5rem] data-[part=grabber]:[m" +
"argin-block:calc(-1_*_var(--space-md))_calc(-1_*_var(--space-sm))] data-[part=grabber]:[touch-action:no" +
"ne] data-[part=grabber]:after:content-[''] data-[part=grabber]:after:block data-[part=grabber]:after:[i" +
"nline-size:2.25rem] data-[part=grabber]:after:[block-size:0.25rem] data-[part=grabber]:after:[margin-bl" +
"ock:0.5rem_0] data-[part=grabber]:after:[margin-inline:auto] data-[part=grabber]:after:[border-radius:9" +
"99px] data-[part=grabber]:after:bg-border [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-siz" +
"e=full])]:[inline-size:100%] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[ma" +
"x-inline-size:100%] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[min-block-s" +
"ize:50dvh] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[max-block-size:80dvh" +
"] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[margin-block:auto_0] [@media_" +
"(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[margin-inline:0] [@media_(width_<_40rem" +
")]:data-[part=content]:[&:not([data-size=full])]:[padding-block-end:calc(var(--space-xl)_+_env(safe-are" +
"a-inset-bottom))] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[border-block-" +
"end-width:0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[border-end-start-r" +
"adius:0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[border-end-end-radius:" +
"0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full]):has(>[data-uiify-modal][data-p" +
"art=body])]:[touch-action:none] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])_[" +
"data-uiify-modal][data-part=header]]:[touch-action:none] [@media_(width_<_40rem)]:data-[part=body]:[tou" +
"ch-action:pan-y] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])>[data-part=grabb" +
"er]]:block [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:data-[part=content]:[&:" +
"not([data-size=full])]:[transition:translate_var(--duration-fast)_var(--ease-out),_opacity_var(--durati" +
"on-fast)_var(--ease-out),_display_var(--duration-fast)_allow-discrete,_overlay_var(--duration-fast)_all" +
"ow-discrete] [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:data-[part=content]:[" +
"&:not([data-size=full],[open])]:[translate:0_100%] [@media_(width_<_40rem)_and_(prefers-reduced-motion:" +
"_no-preference)]:data-[part=content]:[&:not([data-size=full],[open])]:[scale:1] [@media_(width_<_40rem)" +
"_and_(prefers-reduced-motion:_no-preference)]:starting:data-[part=content]:[&:not([data-size=full])[ope" +
"n]]:[translate:0_100%] [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:starting:da" +
"ta-[part=content]:[&:not([data-size=full])[open]]:[scale:1] data-[part=content]:data-[dragging]:[&[open" +
"]:not([data-size=full])]:[transition:none] data-[part=content]:data-[dragging]:[&[open]:not([data-size=" +
"full])]:[translate:0_var(--uiify-sheet-offset,_0)] data-[part=content]:data-[backdrop=blur]:backdrop:[b" +
"ackdrop-filter:blur(4px)] data-[part=content]:data-[backdrop=none]:backdrop:bg-transparent [&[data-part" +
"=content]_[data-uiify-modal][data-part=content]::backdrop]:bg-transparent [&[data-part=content]_[data-u" +
"iify-modal][data-part=content]::backdrop]:[backdrop-filter:none] data-[part=content]:[&:has([data-uiify" +
"-modal][data-part=content]:modal)]:[filter:brightness(0.9)] [@media_(width_>=_40rem)]:data-[part=conten" +
"t]:[&:has([data-uiify-modal][data-part=content]:modal)]:[scale:0.97]"
}
id="logo-navigation"
size="full"
aria-labelledby="logo-navigation-title"
>
<ModalHeader>
<ModalTitle id="logo-navigation-title">Logo navigation</ModalTitle>
<ModalClose target="logo-navigation" aria-label="Close navigation">
×
</ModalClose>
</ModalHeader>
<ModalBody>
<nav aria-label="Mobile workspace">
<a href="/overview" aria-current="page">
Overview
</a>
<a href="/projects">Projects</a>
<a href="/activity">Activity</a>
<a href="/help">Help</a>
<Button
as="a"
href="/projects/new"
variant="link"
className={
"focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch" +
",_var(--ring)_16%,_transparent)] [--uiify-button-rim:rgb(255_255_255_/_20%)] [--uiify-button-wash" +
":light-dark(rgb(255_255_255_/_15%),_rgb(255_255_255_/_30%))] relative isolate inline-flex items-c" +
"enter justify-center [gap:0.375rem] [min-block-size:44px] [min-inline-size:44px] py-0 [padding-in" +
"line:1.25rem] border-[length:var(--border-width)] border-solid border-transparent rounded-[var(--" +
"radius-full)] bg-foreground bg-clip-padding text-background text-base font-[number:var(--weight-m" +
"edium)] leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] before:conten" +
"t-[''] before:absolute before:inset-0 before:z-[-1] before:[border-radius:inherit] before:pointer" +
"-events-none after:content-[''] after:absolute after:inset-0 after:z-[-1] after:[border-radius:in" +
"herit] after:pointer-events-none before:[background-color:var(--uiify-button-wash)] before:[filte" +
"r:blur(10px)] before:[translate:0_-50%] before:[clip-path:inset(50%_0_-50%_0_round_var(--radius-f" +
"ull))] after:[padding:0.5px] after:[background-image:linear-gradient(to_bottom,_var(--uiify-butto" +
"n-rim),_transparent_75%)] after:[mask:linear-gradient(#fff_0_0)_content-box_exclude,_linear-gradi" +
"ent(#fff_0_0)] [&:is([data-size=sm],[data-size=icon-sm])]:[min-block-size:32px] [&:is([data-size=" +
"sm],[data-size=icon-sm])]:[min-inline-size:32px] [&:is([data-size=sm],[data-size=icon-sm])]:[padd" +
"ing-inline:0.75rem] [&:is([data-size=sm],[data-size=icon-sm])]:[gap:0.25rem] [&:is([data-size=sm]" +
",[data-size=icon-sm])]:text-sm [&:is([data-size=sm],[data-size=icon-sm])]:leading-5 [&:is([data-s" +
"ize=lg],[data-size=icon-lg])]:[min-block-size:56px] [&:is([data-size=lg],[data-size=icon-lg])]:[m" +
"in-inline-size:56px] [&:is([data-size=lg],[data-size=icon-lg])]:[padding-inline:1.75rem] [&:is([d" +
"ata-size=lg],[data-size=icon-lg])]:text-lg [&:is([data-size=lg],[data-size=icon-lg])]:leading-7 [" +
"&[data-size^=icon]]:px-0 [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:hover:[&:not(:disabl" +
"ed,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_90%,_var(--backgroun" +
"d))] active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foregr" +
"ound)_80%,_var(--background))] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:op" +
"acity-50 data-[disabled]:cursor-not-allowed data-[variant=secondary]:[&:where(:not(:checked+*,[da" +
"ta-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button-rim:light-dark(rgb(0_0_0_" +
"/_5%),_rgb(255_255_255_/_10%))] data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected]" +
",[aria-pressed=true],[aria-current=page]))]:[--uiify-button-wash:light-dark(rgb(255_255_255_/_20%" +
"),_rgb(255_255_255_/_5%))] data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[ari" +
"a-pressed=true],[aria-current=page]))]:[background-color:color-mix(in_oklch,_var(--foreground)_10" +
"%,_transparent)] data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=" +
"true],[aria-current=page]))]:text-foreground data-[variant=outline]:[&:where(:not(:checked+*,[dat" +
"a-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button-rim:color-mix(in_oklch,_va" +
"r(--foreground)_25%,_transparent)] data-[variant=outline]:[&:where(:not(:checked+*,[data-selected" +
"],[aria-pressed=true],[aria-current=page]))]:[border-color:color-mix(in_oklch,_var(--foreground)_" +
"20%,_transparent)] data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=" +
"true],[aria-current=page]))]:bg-transparent data-[variant=outline]:[&:where(:not(:checked+*,[data" +
"-selected],[aria-pressed=true],[aria-current=page]))]:text-foreground data-[variant=outline]:befo" +
"re:content-none data-[variant=outline]:after:[inset:calc(-1_*_var(--border-width))] data-[variant" +
"=outline]:after:[padding:var(--border-width)] data-[variant=outline]:[&:where(:not(:checked+*,[da" +
"ta-selected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]" +
":[background-color:color-mix(in_oklch,_var(--foreground)_16%,_transparent)] data-[variant=ghost]:" +
"[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:bg-transparen" +
"t data-[variant=ghost]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current" +
"=page]))]:text-foreground data-[variant=ghost]:before:content-none data-[variant=ghost]:after:con" +
"tent-none data-[variant=ghost]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria" +
"-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch," +
"_var(--foreground)_16%,_transparent)] data-[variant=secondary]:[&:where(:not(:checked+*,[data-sel" +
"ected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[back" +
"ground-color:color-mix(in_oklch,_var(--foreground)_26%,_transparent)] data-[variant=destructive]:" +
"[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-butt" +
"on-wash:rgb(255_255_255_/_15%)] data-[variant=destructive]:[&:where(:not(:checked+*,[data-selecte" +
"d],[aria-pressed=true],[aria-current=page]))]:bg-destructive data-[variant=destructive]:text-dest" +
"ructive-foreground data-[variant=destructive]:[&:where(:not(:checked+*,[data-selected],[aria-pres" +
"sed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:colo" +
"r-mix(in_oklch,_var(--destructive),_black_20%)] [@media_(any-hover:_hover)_and_(any-pointer:_fine" +
")]:data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-curr" +
"ent=page]))]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(-" +
"-foreground)_10%,_transparent)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant" +
"=ghost]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover" +
":[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_10%,_" +
"transparent)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=secondary]:[&:whe" +
"re(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disab" +
"led,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_20%,_transparent)] " +
"[@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=destructive]:[&:where(:not(:che" +
"cked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disabled,[data-di" +
"sabled])]:[background-color:color-mix(in_oklch,_var(--destructive),_black_12%)] [&:is([data-selec" +
"ted],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [&:is(" +
"[data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_255_/_" +
"15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([d" +
"ata-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pr" +
"essed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(25" +
"5_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-t" +
"ransparent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover" +
")_and_(any-pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:n" +
"ot(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--pr" +
"imary-foreground))] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+" +
"&:hover]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [:" +
"disabled+&]:opacity-50 [:disabled+&]:cursor-not-allowed [&[hidden]]:hidden data-[variant=link]:px" +
"-0 data-[variant=link]:border-0 data-[variant=link]:border-current data-[variant=link]:border-non" +
"e data-[variant=link]:rounded-none data-[variant=link]:bg-transparent data-[variant=link]:text-pr" +
"imary data-[variant=link]:underline data-[variant=link]:[text-underline-offset:0.2em] data-[varia" +
"nt=link]:active:px-0 data-[variant=link]:active:border-0 data-[variant=link]:active:border-curren" +
"t data-[variant=link]:active:border-none data-[variant=link]:active:rounded-none data-[variant=li" +
"nk]:active:bg-transparent data-[variant=link]:active:text-primary data-[variant=link]:active:unde" +
"rline data-[variant=link]:active:[text-underline-offset:0.2em] data-[variant=link]:[min-inline-si" +
"ze:0] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:px-0 [@media_" +
"(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:border-0 [@media_(any-hover" +
":_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:border-current [@media_(any-hover:_ho" +
"ver)_and_(any-pointer:_fine)]:data-[variant=link]:hover:border-none [@media_(any-hover:_hover)_an" +
"d_(any-pointer:_fine)]:data-[variant=link]:hover:rounded-none [@media_(any-hover:_hover)_and_(any" +
"-pointer:_fine)]:data-[variant=link]:hover:bg-transparent [@media_(any-hover:_hover)_and_(any-poi" +
"nter:_fine)]:data-[variant=link]:hover:text-primary [@media_(any-hover:_hover)_and_(any-pointer:_" +
"fine)]:data-[variant=link]:hover:underline [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:da" +
"ta-[variant=link]:hover:[text-underline-offset:0.2em] data-[variant=link]:before:content-none dat" +
"a-[variant=link]:after:content-none data-[variant=link]:focus-visible:[outline:2px_solid_var(--ri" +
"ng)] data-[variant=link]:focus-visible:[outline-offset:3px] [[data-uiify-toggle]>input:focus-visi" +
"ble+&]:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [[d" +
"ata-uiify-toggle-group]_[data-part=item]>input:focus-visible+&]:[box-shadow:0_0_0_var(--ring-widt" +
"h)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [[data-uiify-modal][data-part=close]&]:bord" +
"er-transparent [[data-uiify-modal][data-part=close]&]:[background-color:color-mix(in_oklch,_var(-" +
"-foreground)_8%,_transparent)] [[data-uiify-modal][data-part=close]&]:text-foreground [[data-uiif" +
"y-modal][data-part=close]&:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_14%,_tr" +
"ansparent)] [[data-uiify-modal][data-part=close]&:active]:[background-color:color-mix(in_oklch,_v" +
"ar(--foreground)_20%,_transparent)] [[data-uiify-pagination]_span&:not([data-disabled])]:cursor-d" +
"efault [[data-uiify-input-group]>[data-part=addon]>&]:[min-inline-size:0] [[data-uiify-input-grou" +
"p]>[data-part=addon]>&]:[max-inline-size:100%] [[data-uiify-input-group]>[data-part=addon]>&]:whi" +
"tespace-normal [[data-uiify-input-group]>[data-part=addon]>&]:[overflow-wrap:anywhere] [[data-uii" +
"fy-item-content]>&]:[justify-self:start]"
}
>
New project
</Button>
</nav>
</ModalBody>
</ModalContent>
</Header.Root>
<Breadcrumb.Root
className="
[&_[data-part=list]]:flex [&_[data-part=list]]:flex-wrap [&_[data-part=list]]:items-center
[&_[data-part=list]]:[gap:0.5rem] [&_[data-part=list]]:list-none [&_[data-part=list]]:p-0
[&_[data-part=list]]:m-0 [&_[data-part=item]]:flex [&_[data-part=item]]:items-center
[&_[data-part=item]]:[gap:0.5rem] [&_[data-part=link]:where(:not([data-current]))]:text-primary
[&_[data-part=link]]:no-underline [&_[data-part=link]:hover]:underline
[&_[aria-hidden=true]]:text-muted-foreground [&_[data-current]]:text-foreground
[&_[data-current]]:[font-weight:600]
"
>
<Breadcrumb.List
items={[
{ key: "workspace", label: "Workspace", href: "/" },
{ key: "overview", label: "Overview", current: true },
]}
separator={<Breadcrumb.Separator />}
/>
</Breadcrumb.Root>
</>
);
}
// Optional client entry; SSR remains visible and scroll behavior attaches after hydration.
export function ScrollHeader() {
return (
<HeaderClient
className="
grid gap-md w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))] p-6 border border-border rounded-xl
[corner-shape:squircle] bg-card text-card-foreground shadow-popover [&[popover]:not(:popover-open)]:hidden
motion-safe:[&[popover]]:[transition:var(--transition-presence)]
motion-safe:[&[popover]:not(:popover-open)]:opacity-0
motion-safe:[&[popover]:not(:popover-open)]:[scale:var(--presence-scale)]
motion-safe:starting:[&[popover]:popover-open]:opacity-0
motion-safe:starting:[&[popover]:popover-open]:[scale:var(--presence-scale)]
"
>
<a href="/">Logo</a>
<nav aria-label="Workspace">
<a href="/overview" aria-current="page">
Overview
</a>
<a href="/projects">Projects</a>
<a href="/activity">Activity</a>
</nav>
</HeaderClient>
);
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
/* app.css */
@layer reset, ui, app, tokens, base, demo, components, utilities, theme;
@import "@gunkin/uiify/styles/reset";
@import "@gunkin/uiify/components/behavior.css";
@import "@gunkin/uiify/styles/tokens";
@import "@gunkin/uiify/styles/tailwind";
@import "tailwindcss/utilities.css";
@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }
@source inline('grid gap-md w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))] p-6 border border-border rounded-xl [corner-shape:squircle] bg-card text-card-foreground shadow-popover [&[popover]:not(:popover-open)]:hidden motion-safe:[&[popover]]:[transition:var(--transition-presence)] motion-safe:[&[popover]:not(:popover-open)]:opacity-0 motion-safe:[&[popover]:not(:popover-open)]:[scale:var(--presence-scale)] motion-safe:starting:[&[popover]:popover-open]:opacity-0 motion-safe:starting:[&[popover]:popover-open]:[scale:var(--presence-scale)] focus-visible:[outline:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [--uiify-button-rim:rgb(255_255_255_/_20%)] [--uiify-button-wash:light-dark(rgb(255_255_255_/_15%),_rgb(255_255_255_/_30%))] relative isolate inline-flex items-center justify-center [gap:0.375rem] [min-block-size:44px] [min-inline-size:44px] py-0 [padding-inline:1.25rem] border-[length:var(--border-width)] border-solid border-transparent rounded-[var(--radius-full)] bg-foreground bg-clip-padding text-background text-base font-[number:var(--weight-medium)] leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] before:absolute before:inset-0 before:z-[-1] before:[border-radius:inherit] before:pointer-events-none after:absolute after:inset-0 after:z-[-1] after:[border-radius:inherit] after:pointer-events-none before:[background-color:var(--uiify-button-wash)] before:[filter:blur(10px)] before:[translate:0_-50%] before:[clip-path:inset(50%_0_-50%_0_round_var(--radius-full))] after:[padding:0.5px] after:[background-image:linear-gradient(to_bottom,_var(--uiify-button-rim),_transparent_75%)] after:[mask:linear-gradient(#fff_0_0)_content-box_exclude,_linear-gradient(#fff_0_0)] [&:is([data-size=sm],[data-size=icon-sm])]:[min-block-size:32px] [&:is([data-size=sm],[data-size=icon-sm])]:[min-inline-size:32px] [&:is([data-size=sm],[data-size=icon-sm])]:[padding-inline:0.75rem] [&:is([data-size=sm],[data-size=icon-sm])]:[gap:0.25rem] [&:is([data-size=sm],[data-size=icon-sm])]:text-sm [&:is([data-size=sm],[data-size=icon-sm])]:leading-5 [&:is([data-size=lg],[data-size=icon-lg])]:[min-block-size:56px] [&:is([data-size=lg],[data-size=icon-lg])]:[min-inline-size:56px] [&:is([data-size=lg],[data-size=icon-lg])]:[padding-inline:1.75rem] [&:is([data-size=lg],[data-size=icon-lg])]:text-lg [&:is([data-size=lg],[data-size=icon-lg])]:leading-7 [&[data-size^=icon]]:px-0 [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_90%,_var(--background))] active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_80%,_var(--background))] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button-rim:light-dark(rgb(0_0_0_/_5%),_rgb(255_255_255_/_10%))] data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button-wash:light-dark(rgb(255_255_255_/_20%),_rgb(255_255_255_/_5%))] data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[background-color:color-mix(in_oklch,_var(--foreground)_10%,_transparent)] data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:text-foreground data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button-rim:color-mix(in_oklch,_var(--foreground)_25%,_transparent)] data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[border-color:color-mix(in_oklch,_var(--foreground)_20%,_transparent)] data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:bg-transparent data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:text-foreground data-[variant=outline]:before:content-none data-[variant=outline]:after:[inset:calc(-1_*_var(--border-width))] data-[variant=outline]:after:[padding:var(--border-width)] data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_16%,_transparent)] data-[variant=ghost]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:bg-transparent data-[variant=ghost]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:text-foreground data-[variant=ghost]:before:content-none data-[variant=ghost]:after:content-none data-[variant=ghost]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_16%,_transparent)] data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_26%,_transparent)] data-[variant=destructive]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:[--uiify-button-wash:rgb(255_255_255_/_15%)] data-[variant=destructive]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:bg-destructive data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--destructive),_black_20%)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=outline]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_10%,_transparent)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=ghost]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_10%,_transparent)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=secondary]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foreground)_20%,_transparent)] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=destructive]:[&:where(:not(:checked+*,[data-selected],[aria-pressed=true],[aria-current=page]))]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--destructive),_black_12%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transparent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [:disabled+&]:opacity-50 [:disabled+&]:cursor-not-allowed [&[hidden]]:hidden data-[variant=link]:px-0 data-[variant=link]:border-0 data-[variant=link]:border-current data-[variant=link]:border-none data-[variant=link]:rounded-none data-[variant=link]:bg-transparent data-[variant=link]:text-primary data-[variant=link]:underline data-[variant=link]:[text-underline-offset:0.2em] data-[variant=link]:active:px-0 data-[variant=link]:active:border-0 data-[variant=link]:active:border-current data-[variant=link]:active:border-none data-[variant=link]:active:rounded-none data-[variant=link]:active:bg-transparent data-[variant=link]:active:text-primary data-[variant=link]:active:underline data-[variant=link]:active:[text-underline-offset:0.2em] data-[variant=link]:[min-inline-size:0] [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:px-0 [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:border-0 [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:border-current [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:border-none [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:rounded-none [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:bg-transparent [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:text-primary [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:underline [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:data-[variant=link]:hover:[text-underline-offset:0.2em] data-[variant=link]:before:content-none data-[variant=link]:after:content-none data-[variant=link]:focus-visible:[outline:2px_solid_var(--ring)] data-[variant=link]:focus-visible:[outline-offset:3px] [[data-uiify-toggle]>input:focus-visible+&]:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [[data-uiify-toggle-group]_[data-part=item]>input:focus-visible+&]:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [[data-uiify-modal][data-part=close]&]:border-transparent [[data-uiify-modal][data-part=close]&]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [[data-uiify-modal][data-part=close]&]:text-foreground [[data-uiify-modal][data-part=close]&:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_14%,_transparent)] [[data-uiify-modal][data-part=close]&:active]:[background-color:color-mix(in_oklch,_var(--foreground)_20%,_transparent)] [[data-uiify-pagination]_span&:not([data-disabled])]:cursor-default [[data-uiify-input-group]>[data-part=addon]>&]:[min-inline-size:0] [[data-uiify-input-group]>[data-part=addon]>&]:[max-inline-size:100%] [[data-uiify-input-group]>[data-part=addon]>&]:whitespace-normal [[data-uiify-input-group]>[data-part=addon]>&]:[overflow-wrap:anywhere] [[data-uiify-item-content]>&]:[justify-self:start] [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)] [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)] [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert] [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] [&[data-part=content]]:m-auto [&[data-part=content]]:[inline-size:min(28rem,_calc(100vw_-_2_*_var(--space-lg)))] [&[data-part=content]]:p-xl [&[data-part=content]]:border-[length:var(--border-width)] [&[data-part=content]]:border-solid [&[data-part=content]]:border-border [&[data-part=content]]:rounded-xl [&[data-part=content]]:[corner-shape:squircle] [&[data-part=content]]:bg-popover [&[data-part=content]]:text-popover-foreground [&[data-part=content]]:shadow-modal [&[data-part=content]::backdrop]:[background-color:rgb(0_0_0_/_45%)] [&_[data-part=title]]:m-0 [&_[data-part=title]]:text-[length:var(--text-xl)] [&_[data-part=title]]:font-[number:var(--weight-semibold)] [&_[data-part=title]]:[line-height:1.3] [&_[data-part=description]]:[margin-block:var(--space-sm)_var(--space-lg)] [&_[data-part=description]]:text-muted-foreground [&_[data-part=description]]:text-sm [&_[data-part=description]]:[line-height:var(--leading-normal)] motion-safe:[&[data-part=content]]:[transition:var(--transition-presence)] motion-safe:[&[data-part=content]::backdrop]:[transition:var(--transition-presence)] motion-safe:[&[data-part=content]:not([open])]:opacity-0 motion-safe:[&[data-part=content]:not([open])]:[scale:var(--presence-scale)] motion-safe:[&[data-part=content]:not([open])::backdrop]:opacity-0 motion-safe:starting:[&[data-part=content][open]]:opacity-0 motion-safe:starting:[&[data-part=content][open]]:[scale:var(--presence-scale)] motion-safe:starting:[&[data-part=content][open]::backdrop]:opacity-0 data-[part=content]:[--uiify-modal-inline-size:28rem] data-[part=content]:flex-col data-[part=content]:gap-md data-[part=content]:[inline-size:min(var(--uiify-modal-inline-size),_calc(100vw_-_2_*_var(--space-lg)))] data-[part=content]:[max-block-size:calc(100dvh_-_2_*_var(--space-lg))] data-[part=content]:[&[open]]:flex data-[part=content]:data-[size=sm]:[--uiify-modal-inline-size:24rem] data-[part=content]:data-[size=lg]:[--uiify-modal-inline-size:40rem] data-[part=content]:data-[size=full]:inset-0 data-[part=content]:data-[size=full]:m-0 data-[part=content]:data-[size=full]:[inline-size:100%] data-[part=content]:data-[size=full]:[block-size:100%] data-[part=content]:data-[size=full]:[max-inline-size:none] data-[part=content]:data-[size=full]:[max-block-size:none] data-[part=content]:data-[size=full]:[padding-block:max(var(--space-xl),_env(safe-area-inset-top))_max(var(--space-xl),_env(safe-area-inset-bottom))] data-[part=content]:data-[size=full]:[padding-inline:max(var(--space-xl),_env(safe-area-inset-left))_max(var(--space-xl),_env(safe-area-inset-right))] data-[part=content]:data-[size=full]:border-0 data-[part=content]:data-[size=full]:border-current data-[part=content]:data-[size=full]:border-none data-[part=content]:data-[size=full]:rounded-none [@media_(width_>=_40rem)]:data-[part=content]:data-[align=start]:[&:not([data-size=full])]:[margin-block:var(--space-xl)_auto] data-[part=header]:relative data-[part=header]:flex-none data-[part=header]:[padding-inline-end:2.5rem] data-[part=close]:data-[uiify-button]:border-transparent data-[part=close]:data-[uiify-button]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] data-[part=close]:data-[uiify-button]:text-foreground data-[part=close]:data-[uiify-button]:hover:[background-color:color-mix(in_oklch,_var(--foreground)_14%,_transparent)] data-[part=close]:data-[uiify-button]:active:[background-color:color-mix(in_oklch,_var(--foreground)_20%,_transparent)] [&[data-part=header]>[data-part=close]]:absolute [&[data-part=header]>[data-part=close]]:[inset-block-start:0] [&[data-part=header]>[data-part=close]]:[inset-inline-end:0] [&[data-part=header]>[data-part=close]]:grid [&[data-part=header]>[data-part=close]]:place-items-center [&[data-part=header]>[data-part=close]]:[inline-size:2rem] [&[data-part=header]>[data-part=close]]:[block-size:2rem] [&[data-part=header]>[data-part=close]]:[min-block-size:0] [&[data-part=header]>[data-part=close]]:p-0 [&[data-part=header]>[data-part=close]]:[border-radius:999px] data-[part=body]:flex-auto data-[part=body]:[min-block-size:0] data-[part=body]:overflow-auto data-[part=body]:overscroll-contain data-[part=footer]:flex data-[part=footer]:flex-none data-[part=footer]:flex-wrap data-[part=footer]:justify-end data-[part=footer]:gap-sm [@media_(pointer:_coarse)]:data-[part=header]:[padding-inline-end:2.75rem] [@media_(pointer:_coarse)]:[&[data-part=header]>[data-part=close]]:[min-inline-size:2.75rem] [@media_(pointer:_coarse)]:[&[data-part=header]>[data-part=close]]:[min-block-size:2.75rem] [@media_(pointer:_coarse)]:[&[data-part=footer]>*]:[min-block-size:2.75rem] data-[part=grabber]:hidden data-[part=grabber]:flex-none data-[part=grabber]:[block-size:1.5rem] data-[part=grabber]:[margin-block:calc(-1_*_var(--space-md))_calc(-1_*_var(--space-sm))] data-[part=grabber]:[touch-action:none] data-[part=grabber]:after:block data-[part=grabber]:after:[inline-size:2.25rem] data-[part=grabber]:after:[block-size:0.25rem] data-[part=grabber]:after:[margin-block:0.5rem_0] data-[part=grabber]:after:[margin-inline:auto] data-[part=grabber]:after:[border-radius:999px] data-[part=grabber]:after:bg-border [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[inline-size:100%] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[max-inline-size:100%] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[min-block-size:50dvh] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[max-block-size:80dvh] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[margin-block:auto_0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[margin-inline:0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[padding-block-end:calc(var(--space-xl)_+_env(safe-area-inset-bottom))] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[border-block-end-width:0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[border-end-start-radius:0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])]:[border-end-end-radius:0] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full]):has(>[data-uiify-modal][data-part=body])]:[touch-action:none] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])_[data-uiify-modal][data-part=header]]:[touch-action:none] [@media_(width_<_40rem)]:data-[part=body]:[touch-action:pan-y] [@media_(width_<_40rem)]:data-[part=content]:[&:not([data-size=full])>[data-part=grabber]]:block [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:data-[part=content]:[&:not([data-size=full])]:[transition:translate_var(--duration-fast)_var(--ease-out),_opacity_var(--duration-fast)_var(--ease-out),_display_var(--duration-fast)_allow-discrete,_overlay_var(--duration-fast)_allow-discrete] [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:data-[part=content]:[&:not([data-size=full],[open])]:[translate:0_100%] [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:data-[part=content]:[&:not([data-size=full],[open])]:[scale:1] [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:starting:data-[part=content]:[&:not([data-size=full])[open]]:[translate:0_100%] [@media_(width_<_40rem)_and_(prefers-reduced-motion:_no-preference)]:starting:data-[part=content]:[&:not([data-size=full])[open]]:[scale:1] data-[part=content]:data-[dragging]:[&[open]:not([data-size=full])]:[transition:none] data-[part=content]:data-[dragging]:[&[open]:not([data-size=full])]:[translate:0_var(--uiify-sheet-offset,_0)] data-[part=content]:data-[backdrop=blur]:backdrop:[backdrop-filter:blur(4px)] data-[part=content]:data-[backdrop=none]:backdrop:bg-transparent [&[data-part=content]_[data-uiify-modal][data-part=content]::backdrop]:bg-transparent [&[data-part=content]_[data-uiify-modal][data-part=content]::backdrop]:[backdrop-filter:none] data-[part=content]:[&:has([data-uiify-modal][data-part=content]:modal)]:[filter:brightness(0.9)] [@media_(width_>=_40rem)]:data-[part=content]:[&:has([data-uiify-modal][data-part=content]:modal)]:[scale:0.97] [&_[data-part=list]]:flex [&_[data-part=list]]:flex-wrap [&_[data-part=list]]:items-center [&_[data-part=list]]:[gap:0.5rem] [&_[data-part=list]]:list-none [&_[data-part=list]]:p-0 [&_[data-part=list]]:m-0 [&_[data-part=item]]:flex [&_[data-part=item]]:items-center [&_[data-part=item]]:[gap:0.5rem] [&_[data-part=link]:where(:not([data-current]))]:text-primary [&_[data-part=link]]:no-underline [&_[data-part=link]:hover]:underline [&_[aria-hidden=true]]:text-muted-foreground [&_[data-current]]:text-foreground [&_[data-current]]:[font-weight:600]');
@source inline("before:content-[''] after:content-[''] data-[part=grabber]:after:content-['']");
@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }
/* Authored animation and registered properties used by the Tailwind skin.
* Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
@keyframes uiify-presence-in {
from {
opacity: 0;
scale: var(--presence-scale);
}
}
}
@layer components {
@keyframes uiify-presence-out {
to {
opacity: 0;
scale: var(--presence-scale);
}
}
}
@property --uiify-spinner-tail {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@property --uiify-spinner-length {
syntax: "<angle>";
inherits: false;
initial-value: 36deg;
}
@layer components {
@keyframes uiify-spinner-rotate {
to {
transform: rotate(360deg);
}
}
}
@layer components {
@keyframes uiify-spinner-orbit {
0% {
--uiify-spinner-tail: 0deg;
--uiify-spinner-length: 36deg;
}
50% {
--uiify-spinner-tail: 90deg;
--uiify-spinner-length: 324deg;
}
100% {
--uiify-spinner-tail: 360deg;
--uiify-spinner-length: 36deg;
}
}
}
@layer components {
@keyframes uiify-skeleton-pulse {
50% {
opacity: 0.45;
}
}
}
@layer components {
@keyframes uiify-skeleton-shimmer {
to {
background-position: -200% 0;
}
}
}
@layer components {
@keyframes uiify-skeleton-reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
@property --candle-body-height {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
@property --candle-body-top {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --candle-slot {
syntax: "<percentage>";
inherits: true;
initial-value: 100%;
}
@property --candle-wick-height {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
@property --candle-wick-top {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --candle-x {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
@property --candle-scale {
syntax: "<number>";
inherits: true;
initial-value: 1;
}
@property --line-y {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --line-prev-y {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --line-count {
syntax: "<integer>";
inherits: false;
initial-value: 1;
}
@property --line-scale {
syntax: "<number>";
inherits: true;
initial-value: 1;
}
@layer components {
@keyframes uiify-otp-input-caret-blink {
50% {
opacity: 0;
}
}
}API
Header.Root
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "static" | "sticky" | "static" | Native positioning of the semantic header. Sticky placement stays within its nearest scroll container. |
ref | Ref<HTMLElement> | — | Ref forwarded to the native header element. |
HeaderClient
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "static" | "sticky" | "sticky" | Static placement disables hiding. Native Root defaults to static. |
hideOnScroll | boolean | true | Hide after sustained downward scrolling beyond the Header height; reveal upward or at the top. |
scrollTarget | string | — | Scrollport element id. Omitted uses the owning window. A missing target keeps the Header visible without a window fallback. |
ref | Ref<HTMLElement> | — | Ref forwarded to the same native header; native props, className, style and events are preserved. |
Keyboard
| Key | Action |
|---|---|
| Tab | Move between links and actions; focusing inside HeaderClient reveals it |
| Enter / Space | Open the composed native Modal from its trigger |
| Escape | Close the navigation Modal and return focus to its trigger |
Accessibility
Header.Root renders a semantic <header> without client JavaScript; HeaderClient adds hide-on-scroll. Both are visible before hydration. Focus inside, or an open descendant modal, popover or disclosure, keeps it visible; reduced motion removes the slide. Build mobile navigation from Modal parts with unique ids. Label nav elements, mark the current link with aria-current, and close the dialog before fragment navigation.
Styling hooks
data-uiify-headerdata-placement="static|sticky"data-state="top|visible|hidden" (HeaderClient only)