docs menuinfo success error dismissible info success error dismissible checking the session — session-dependent links wait signed out signed in session check failed — no false "log in" checking the session — session-dependent links wait signed out signed in session check failed — no false "log in" checking the session — its first render, on the server and in the browser checking the session — its first render, on the server and in the browser small medium large small medium large verified neutral danger verified neutral danger primary — the one main action secondary ghost danger small — 36 px drawn, 44 px hit area loading disabled primary — the one main action secondary ghost danger small — 36 px drawn, 44 px hit area loading disabled with a title without a title with a title without a title the poster — it comes alive on /ui/cat3d/ and on the home page the poster — it comes alive on /ui/cat3d/ and on the home page unchecked checked disabled unchecked checked disabled value with copy — try it in the demo below value with copy — try it in the demo below default contacts your own list default contacts your own list blinking static blinking static with a hint password — with a reveal button error disabled floating label — labelPlacement="float": rests inside while empty, moves onto the border once focused or filled floating label, filled — stays visible on the border; never runs under the reveal button with a hint password — with a reveal button error disabled floating label — labelPlacement="float": rests inside while empty, moves onto the border once focused or filled floating label, filled — stays visible on the border; never runs under the reveal button decorative with a label — becomes an image with a name every icon decorative with a label — becomes an image with a name every icon one key a combination one key a combination empty — send is aria-disabled with text busy — still editable; sends queue floating label — labelPlacement="float": the label shows while empty floating label, with text — the label stays visible on the border empty — send is aria-disabled with text busy — still editable; sends queue floating label — labelPlacement="float": the label shows while empty floating label, with text — the label stays visible on the border with hints with hints eight codes eight codes small medium large small medium large ok wait fail, with an action info ok wait fail, with an action info server render — shows the dark-theme icon until it hydrates server render — shows the dark-theme icon until it hydrates
gallery
Every component in every state, dark and light side by side, at whatever width you're reading on. The screenshot tests compare these sections at phone and desktop sizes.
Alert
dark
your recovery codes were replaced. the old ones no longer work.
saved.
wrong password — try again or reset it.
you can revoke an app's access any time.
light
your recovery codes were replaced. the old ones no longer work.
saved.
wrong password — try again or reset it.
you can revoke an app's access any time.
AppHeader
dark
light
AuthGate
dark
light
Avatar
dark
light
Badge
dark
verified
draft
suspended
light
verified
draft
suspended
Button
dark
light
Card
dark
profile
signed in as alxnko.
a plain card groups related content.
light
profile
signed in as alxnko.
a plain card groups related content.
Cat3D
dark
light
Checkbox
dark
light
Code
dark
meow.alxnko.devk3m9-X2p4-q8w1light
meow.alxnko.devk3m9-X2p4-q8w1ConfirmDialog
Nothing to show without interaction: try it on its page.
ContactLinks
dark
light
Cursor
dark
light
Field
dark
letters, digits and _ only
that name is taken — try another
12–128 characters
light
letters, digits and _ only
that name is taken — try another
12–128 characters
Icon
dark
moonsuneyeeye-offalert-trianglecircle-checkinfo-circlecopycheckxmailbrand-telegrambrand-instagrambrand-githubbrand-linkedinrosette-discount-checklogoutmenu-2settingssearchlinkdotsplustrasheditmessageusersuserarrow-leftsendmood-smilebroadcastreplyforwardrefreshshare
light
moonsuneyeeye-offalert-trianglecircle-checkinfo-circlecopycheckxmailbrand-telegrambrand-instagrambrand-githubbrand-linkedinrosette-discount-checklogoutmenu-2settingssearchlinkdotsplustrasheditmessageusersuserarrow-leftsendmood-smilebroadcastreplyforwardrefreshshare
Kbd
dark
Enter
Shift + Enter
light
Enter
Shift + Enter
Modal
Nothing to show without interaction: try it on its page.
Prompt
dark
light
RadioGroup
dark
light
RecoveryCodes
dark
- b7qk-2m9x
- t4nw-8rd3
- h2vc-6yp1
- m9zs-4kt7
- q3lf-7bn2
- w8xd-1gj5
- e6pr-3hm8
- u1ty-9cs4
light
- b7qk-2m9x
- t4nw-8rd3
- h2vc-6yp1
- m9zs-4kt7
- q3lf-7bn2
- w8xd-1gj5
- e6pr-3hm8
- u1ty-9cs4
Spinner
dark
light
StatusLine
dark
ok: online
working: connecting…
error: offline — check your connection
info: no public service to check
light
ok: online
working: connecting…
error: offline — check your connection
info: no public service to check
ThemeToggle
dark
light
ToastProvider
Nothing to show without interaction: try it on its page.