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?

`aside`

the aside looks like this, learn more on MDN

<div class="centered"><aside>aside</aside>/div>

pre-alpha: not ready for production

`form` `label` `input` `textarea` `select` `button`

`form`

<input type="range" />

<input type="range" disabled />

`form` with checkboxes

The above are wrapped with:

<label class="row">

with the .disabled class as needed:

<label class="row disabled">

`form` with radio buttons

<label class="row selected">
	<input type="radio" checked/>
</label>

<label class="row">
	<input type="radio" />
</label>

<label class="row">
	<input type="radio" disabled />
</label>

<label class="row">
	<input type="radio" checked disabled />
</label>

disabled button

<button disabled>
	:|
</button>

<button disabled>
	a bigger disabled button
</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:

this entire thing is buttonlike, not just the checkbox

this is a .disabled buttonlike

.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

`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

`Redirect`

`Redirect` with `auto={false}`

auto={false} is only used here to prevent the page from redirecting!

redirect to /library

`Redirect` with `auto={false}`, `host="https://www.felt.dev"`, `path="/sketch/library"`, and a custom slot that shows the slot prop `url`

the url is https://www.felt.dev/library

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.

`Whiteboard`

circle
opacity: 1 x y radius

fill
circle
opacity: 1 x y radius

fill
circle
opacity: 0.62 x y radius

fill

<Whiteboard
	width="750px"
	height="512px"
	scale=undefined
	pointerX=undefined
	pointerY=undefined
	pointerDown=undefined
>
	<WhiteboardEntityList
		entities={[ ... ]}
	/>
</Whiteboard>

width 750px

height 512px

box shadow

styles

components

👆 `blockquote`

👇 `hr` 👈 `code`

`details` and `summary`

`aside`

`form` `label` `input` `textarea` `select` `button`

`form`

`form` with checkboxes

`form` with radio buttons

disabled button

`button` with CSS class `.selected`

`.buttonlike` CSS class

the `--icon_size` property's variants

h1

h2

h3

h4

h5

h6

`Breadcrumbs`

`Breadcrumbs` with slot content `🏠`

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

`Dialog`

`HueInput`

`Message`

`PendingAnimation`

`PendingButton`

`Redirect`

`Redirect` with `auto={false}`

`Redirect` with `auto={false}`, `host="https://www.felt.dev"`, `path="/sketch/library"`, and a custom slot that shows the slot prop `url`

`Scaled`

`Surface`

`Teleport`

`Whiteboard`

styles

components

👆 blockquote

👇 hr 👈 code

details and summary

aside

form label input textarea select button

form

form with checkboxes

form with radio buttons

disabled button

button with CSS class .selected

.buttonlike CSS class

the --icon_size property's variants

h1

h2

h3

h4

h5

h6

Breadcrumbs with slot content 🏠

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

Redirect with auto={false}

Redirect with auto={false}, host="https://www.felt.dev", path="/sketch/library", and a custom slot that shows the slot prop url

👆 `blockquote`

👇 `hr` 👈 `code`

`details` and `summary`

`aside`

`form` `label` `input` `textarea` `select` `button`

`form`

`form` with checkboxes

`form` with radio buttons

`button` with CSS class `.selected`

`.buttonlike` CSS class

the `--icon_size` property's variants

`Breadcrumbs` with slot content `🏠`

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

`Redirect` with `auto={false}`

`Redirect` with `auto={false}`, `host="https://www.felt.dev"`, `path="/sketch/library"`, and a custom slot that shows the slot prop `url`