welcome to the library 🪧 🐿

This code is pre-alpha and the 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


details and summary

Click me, a summary, to see the rest of the details

Here's an unfinished detail: what styling should the summary have?

pre-alpha: not ready for production

form input textarea select button

create an account

form <input type="range" />


form <input type="checkbox" />


form <input type="radio" />


<button disabled>:|</button>


button with CSS class .selected

.selected buttons with the .deselectable class continue to be clickable when selected:


.buttonlike CSS class

the .buttonlike class is useful when you want interactive builtin elements to be wrapped in a larger clickable area:

.buttonlike with .selected
.buttonlike with .selected and .deselectable
TODO: add more deselectable signifiers?

the --icon_size property's variants

icon sizes usepx not rem, so they're insensitive to browser font size
--icon_size_xs18px
🐢
--icon_size_sm32px
🐢
--icon_size_md48px
🐢
--icon_size_lg80px
🐢
--icon_size_xl128px
🐢
--icon_size_xl2196px
🐢
--icon_size_xl3316px
🐢
--icon_size_xl4512px
🐢

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

Dialog

HueInput

hue: 180

Breadcrumbs

Breadcrumbs with slot content 🏠

Breadcrumbs with
path="/a/b/c"
selectedPath="/a/b"
basePath="/sketch/library"
and slot "separator" content . and default slot content 🔡

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 and slot content {<div slot="icon" style:line-height="1"><div style:font-size="var(--font_size_xl3)">🔥</div>😊</div>

Message with status="help"

👉
here's how to fix it

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

PendingAnimation

with running={}

with slot

and --font_size_xl6

and --animation_duration set to --duration_6

🐢 🐢 🐢

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

⏳ 0 🐸
⏳ 1 🐸
⏳ 2 🐸

PendingButton

PendingButton preserves the normal width of the button while animating

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 like unwanted style inheritance.

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

Use only when necessary or fun.