welcome to the library🪧🐿 these docs are currently lacking, so we recommend opening your browser's devtools and searching the source code from GitHub to improve the experience
pre-alpha: not ready for production

👆 blockquote

👇 hr 👈 code


PendingAnimation

with running={}

with slot

and --font_size_xl6

🐢 🐢 🐢

with running={}
and slots
⏳<span style="font-size: var(--font_size_xl5)">{🐸}</span>

🐸
🐸
🐸

PendingButton

PendingButton preserves the normal width of the button while animating

form input textarea select button

pre-alpha: not ready for production

form <input type="range"/>


button with css class .selected


Dialog


Teleport

TheDialog uses the Teleport to mount itself to a top-level DOM element, instead of the location that the Dialog component appears in code, solving various issues.

The Teleport can be used to relocate other elements too, in the rare cases that's useful.

Use only when necessary or fun.


Checkbox

Checkbox with content={ballotMark}


Message

this api is experimental (the button prop may be changed to an optional action callback)
:-)

Message with icon="😑" and button={true}

Message with status="error"

bad things went wrong

Message with status="error"and icon="😊" and button={true}

Message with status="help"

👉 here's how to fix it

Message with status="help"and icon="🔑" and button={true}


typography

h1

h2

h3

h4

h5
h6

--font_size_xs: 0.989rem;

--font_size_sm: 1.258rem;

--font_size_md: 1.6rem;

--font_size_lg: 2.035rem;

--font_size_xl: 2.589rem;

--font_size_xl2: 3.293rem;

--font_size_xl3: 4.189rem;

pink

xl4 xl5 xl6 xl7 xl8 xl9


icon sizes

icon sizes usepx not rem, so they're insensitive to browser font size
icon_size_xs
🐢
icon_size_sm
🐢
icon_size_md
🐢
icon_size_lg
🐢
icon_size_xl
🐢
icon_size_xl2
🐢
icon_size_xl3
🐢
icon_size_xl4
🐢

💚 icons 💚

  • ← arrowLeft
  • → arrowRight
  • ✗ ballotMark
  • • bulletPoint
  • ✓ checkmark
  • 💚 feltHeart
  • ✋ handFacingForward
  • 👇 handPointDown
  • 👈 handPointLeft
  • 👉 handPointRight
  • 👆 handPointUp
  • 👎 handThumbsDown
  • 👍 handThumbsUp
  • ✨ sparkle

FeltHeart

felt heart

LinkPath

LinkPath with slot="🏠"

LinkPath with
path="/a/b/c"
selectedPath="/a/b"
basePath="/sketch/library"

Nav