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

๐Ÿข ๐Ÿข ๐Ÿข

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={faceExpressionless} and button={true}

Message with status="error"

โœ‹ bad things went wrong

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

Message with status="help"

๐Ÿ‘‰ here's how to fix it

Message with status="help"and icon={itemKey} 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
  • ๐Ÿฅ“ bacon
  • โœ— ballotMark
  • ๐ŸŒ banana
  • ๐Ÿบ beer
  • ๐Ÿšด biking
  • ๐Ÿฆ bird
  • ๐Ÿง  brain
  • ๐Ÿž bread
  • โ€ข bulletPoint
  • ๐ŸŒฏ burrito
  • ๐ŸšŒ bus
  • ๐Ÿช camel
  • ๐Ÿš— car
  • ๐Ÿˆ cat
  • โœ“ checkmark
  • ๐Ÿฅ‚ cheers
  • ๐Ÿง€ cheese
  • ๐Ÿ’ cherries
  • ๐ŸŒธ cherryblossom
  • ๐ŸŒฐ chestnut
  • ๐Ÿ™๏ธ cityscape
  • โ˜๏ธ cloud
  • โ˜• coffee
  • ๐ŸŒฝ corn
  • ๐Ÿค  cowboy
  • ๐Ÿ˜ž disappointed
  • ๐Ÿ• dog
  • ๐Ÿฉ doughnut
  • ๐Ÿ‘‚ ear
  • ๐Ÿฅš egg
  • ๐Ÿ† eggplant
  • ๐ŸŒฒ evergreen
  • ๐Ÿ‘ ewe
  • ๐Ÿ‘๏ธ eye
  • ๐Ÿ‘€ eyes
  • ๐Ÿ˜Š faceBlush
  • ๐Ÿ˜‘ faceExpressionless
  • ๐Ÿค” faceThink
  • ๐Ÿ˜‰ faceWink
  • ๐Ÿ’š felt
  • ๐Ÿ”ฅ fire
  • ๐Ÿ’ช flex
  • ๐ŸฆŠ fox
  • ๐Ÿธ frog
  • ๐ŸŒ globe
  • ๐Ÿ’š greenheart
  • ๐Ÿ˜ฌ grimace
  • ๐Ÿ˜ grin
  • ๐ŸŒฐ gro
  • โœ‹ handFacingForward
  • ๐Ÿ‘Œ handOk
  • ๐Ÿ‘‡ handPointDown
  • ๐Ÿ‘ˆ handPointLeft
  • ๐Ÿ‘‰ handPointRight
  • ๐Ÿ‘† handPointUp
  • ๐Ÿ‘Ž handThumbsDown
  • ๐Ÿ‘ handThumbsUp
  • ๐Ÿ  house
  • ๐Ÿฅ‘ itemAvocado
  • ๐Ÿ”‘ itemKey
  • ๐Ÿ† leopard
  • ๐Ÿ maple
  • ๐Ÿ… medal
  • ๐Ÿคฏ mindblown
  • ๐Ÿค‘ moneymouth
  • ๐Ÿ„ mushroom
  • ๐Ÿคข nauseated
  • ๐Ÿข office
  • ๐Ÿฅš ouef
  • ๐Ÿฆ‰ owl
  • ๐ŸŒด palm
  • ๐Ÿ‘ peach
  • ๐Ÿ pear
  • ๐ŸŒถ๏ธ pepper
  • ๐Ÿ pineapple
  • ๐Ÿ• pizza
  • ๐Ÿ’ฉ poop
  • ๐Ÿฅ” potato
  • ๐Ÿ™ pray
  • ๐Ÿฐ rabbitFace
  • ๐Ÿ™Œ raisedhands
  • โœ‹ raisehand
  • ๐Ÿ€ rat
  • ๐Ÿš rice
  • ๐Ÿš€ rocket
  • ๐Ÿคฃ rofl
  • ๐Ÿ™„ rolleyes
  • ๐Ÿง‚ salt
  • ๐ŸŒฑ seedling
  • ๐Ÿ‘ sheep
  • ๐Ÿšข ship
  • ๐Ÿ’€ skull
  • ๐Ÿ snake
  • โ„๏ธ snowflake
  • โ˜ƒ๏ธ snowman
  • ๐Ÿ˜ญ sob
  • โšฝ soccer
  • โœจ sparkle
  • ๐ŸŒถ๏ธ spicy
  • ๐Ÿคฉ starstruck
  • ๐Ÿ˜Ž sunglasses
  • ๐Ÿต tea
  • ๐Ÿงต thread
  • ๐Ÿ‘Ž thumbsdown
  • ๐Ÿ‘ thumbsup
  • ๐Ÿฅƒ tumbler
  • ๐Ÿข turtle
  • ๐Ÿฆ„ unicorn
  • ๐Ÿ™ƒ upsidedown
  • ๐Ÿ‘‹ waving
  • ๐Ÿท wine
  • โœ๏ธ writing
  • ๐Ÿคช zany
  • โšก zap