Component gallery

50 components · 263 stories

Content

8 components

Quotes

Auto

src/components/blocks/quote.astro4 stories

default

It's not a diary, it's a journal.

Greg HeffleyAuthor of a diary, not a journal

no-avatar

A quote with no avatar.

Greg HeffleyMiddle schooler

name-only

A quote with just a name.

Greg Heffley

long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Greg Heffley

Stats

Auto

src/components/blocks/stat.astro4 stories

Counts up on first scroll into view, with JS.

default

12,480

Downloads

prefix

$1.2M

Spent on kebab this year

percent

99.95%

Uptime over the last 90 days

decimals

4.0/5

Average rating, from a long list of reviewers that wraps

Heatmap

Auto

src/components/blocks/heatmap/3 stories

Levels from 0 to 4 on a grid of any size, optionally as a calendar. Can play the Game of Life on its cells.

calendar

1,204 contributions in the last year

small, secondary

life

Icon lists

Auto

src/components/ui/icon-list.astro2 stories

default

Somewhere on Earth
UTC+1
Open source first

wrapping

Full-stack developer
English, French
Runs on tea
Likes accessible things
Portal soundtrack

Masonry

Auto

src/components/blocks/masonry.astro2 stories

Columns of uneven items. `min` sets the narrowest column, `columns` the most there are.

quotes

Short.

Person 1

A quote of middling length, long enough to wrap onto a second line.

Person 2

A much longer quote, to show items keeping their own height. In a grid, the other items in its row would stretch to match it and leave blank space at the bottom; here they don't.

Person 3

Another short one.

Person 4

Items read down each column, then across.

Person 5

The last one.

Person 6

two-columns

Short.

Person 1

A quote of middling length, long enough to wrap onto a second line.

Person 2

A much longer quote, to show items keeping their own height. In a grid, the other items in its row would stretch to match it and leave blank space at the bottom; here they don't.

Person 3

Another short one.

Person 4

Accordion

Auto

src/components/blocks/accordion/2 stories

default

What is this?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Does it need JavaScript?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

A much longer question that wraps onto a second line at narrow widths?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

exclusive

What is this?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Does it need JavaScript?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

A much longer question that wraps onto a second line at narrow widths?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Code

Auto

src/components/blocks/code.astro8 stories

Highlighted at build time by Shiki, in the palette's colours. The copy button needs JS and is absent without it.

typescript

/** Writes the pointer position on each subscriber, once a frame. */
export const track = (targets: HTMLElement[]) => {
    let raf = 0;
    addEventListener("pointermove", (event) => {
        if (event.pointerType !== "mouse") return; // touch has no hover
        raf ||= requestAnimationFrame(() => {
            raf = 0;
            for (const el of targets) el.style.setProperty("--x", `${event.clientX}`);
        });
    });
};

astro-numbered

---
import Button from "../components/ui/button.astro";

const { label = "Save" } = Astro.props;
---

<form method="post">
    <Button type="submit">{label}</Button>
</form>

css

.card {
    padding: var(--space-md);
    border: 1px solid var(--color-border);

    &:hover {
        border-color: var(--color-primary);
    }
}

shell

$ deno run build
✓ Completed in 1.2s
$ deno run check

wrap

const message = "A line long enough that it runs past the edge of the block, which shows whether it wraps or scrolls";

scroll

const message = "A line long enough that it runs past the edge of the block, which shows whether it wraps or scrolls";

plain

No language: plain text.

inline

font: var(--type-code)

Contact methods

Auto

src/components/blocks/contact-method.astro3 stories

default

GitHub

github.com/example

copyable

Email

test@example.com

name-only

Email

Media

5 components

Figures

Auto

src/components/blocks/figure.astro4 stories

A test pattern of colour bars — default

A test pattern of colour bars — no-caption

Greg Heffley — portrait

A test pattern of colour bars — cropped

Audio player

Auto

src/components/blocks/audio-player.astro4 stories

Falls back to the browser's own player without JS.

default

titled

Test Tone

secondary

Test Tone

unframed

Test Tone

Media player

Auto

src/components/blocks/media-player.astro3 stories

Falls back to the browser's own player without JS. K, J/L, M, C and F work while focus is inside.

default

titled

Test pattern

captions

Test pattern

Radio

Auto

src/components/blocks/radio/5 stories

Without JS, the browser's own player for the first track, and links to each file.

default

secondary

capped

single track

unframed

Shorts

Auto

src/components/blocks/shorts/2 stories

Without JS, a feed of the browser's own players. Up/Down, K and M work while focus is inside.

default

@test-pattern

Zooming into the Mandelbrot set until something happens (nothing happens) #math #fractal

@greg

Conway's Game of Life but the cells are pink

@calm-pixels

8 seconds of gradients to reset your brain

@test-pattern

Rule 110 is Turing complete and it looks like this

secondary

@greg

Conway's Game of Life but the cells are pink

@calm-pixels

8 seconds of gradients to reset your brain