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 (like that button prop)
โœจ :-)

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


Icons

<div>s with width and height set to icon_size_xs, icon_size_sm, icon_size_md, icon_size_lg, icon_size_xl, icon_size_xl2, icon_size_xl3, & the max icon_size_xl4 aka icon_size_max -- these are insensitive to browser font size, using px not rem

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

๐Ÿ’š 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
  • ๐ŸŒ€ cyclone
  • ๐Ÿ˜ž 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