Components collection


Common web patterns, building blocks…

πŸš€Β Β Astro β€” Base document enclosure

Provide sensible defaults for HTML base document. The goal is to reduce boilerplate when using multiple layouts in Astro projects.


πŸš€Β Β Astro β€” Breakpoints handlers with (S)CSS / DOM / JS

Provides cross languages breakpoints handlers for your app. SCSS mixin, JS hook and a DOM data attribute, all share the same responsive scale you choose to feed in.


πŸš€Β Β Astro β€” Color mode, with user override

Provides system or user-defined color scheme preference, with a toggle mechanism. Settings are persisted, component is progressively enhanced and flash of unstyled content avoided. Also, it will provide an easier way to target theme with CSS / SCSS / JS.

Demonstration


↑ Click me!

πŸš€Β Β Astro β€” URLs prefetching on hover

This component capture mouse hovering on links with internal URLs. Then, it will prefetch the HTML document beforehand.

Demonstration

Hover links below!

πŸš€Β Β Astro β€” Full page transition overlay

This component relies on the good old browser router, still, it will give to your website an SPA feel, without all the JS overhead.


πŸš€Β Β Astro β€” Scroll observer

Viewport scroll position and direction watcher. Binds states data attributes to `HTML` for further JS/CSS usage. Scroll event is throttled for performance economy.


πŸš€Β Β Astro β€” Diagrams with Mermaid JS πŸ§œπŸ»β€β™€οΈ

Embed you Mermaid diagrams inside your Astro templates. Features server-side rendering and smart caching.

Demonstration

AliceBobJohnBob thinks a longlong time, so longthat the text doesnot fit on a row.Hello Bob, how are you?How about you John?I am good thanks!I am good thanks!Checking with John...Yes... John, how are you?AliceBobJohn

πŸš€Β Β Astro β€” Geographical map embed (Leaflet)

Embed an interactive map in your webpage. Using Leaflet.js under the hood.

Demonstration


You can extend this HTML element with generic attributes like aria-label …


πŸš€Β Β Astro β€” Packages licenses report generator

Give credits to the awesome JS open-source community with this component. It will generate a table with important informations about packages used by your project.

Demonstration

Comes unstyled.
This component is easily stylable, and fully accessible.


Dependencies of the current website you are visiting (depth is set to 1):
Nom
Auteur
License
URL
@astropub/flow
Jonathan Neal <jonathantneal@hotmail.com>
CC0-1.0
@fontsource/exo-2
Lotus <declininglotus@gmail.com>
MIT
@iconify-json/system-uicons
-
Unlicense
@julian_cataldo/astro-lightbox
Julian Cataldo
ISC
@julian_cataldo/astro-resets
Julian Cataldo
ISC
@wbmnky/license-report-generator
Sebastian Roming
MIT
asciinema-player
Marcin Kulik
Apache-2.0
astro
withastro
MIT
astro-base-document
Julian Cataldo
ISC
astro-google-analytics
Julian Cataldo
ISC
astro-page-transition
Julian Cataldo
ISC
astro-seo-metadata
Julian Cataldo
ISC
d3-collection
Mike Bostock
BSD-3-Clause
d3-voronoi
Mike Bostock
BSD-3-Clause
glob
Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)
ISC
glob-promise
Ahmad Nassri <ahmad@ahmadnassri.com> (https://www.ahmadnassri.com/)
MIT
heroicons
-
MIT
is-fullwidth-code-point
Sindre Sorhus
MIT
leaflet
-
BSD-2-Clause
mermaid
Knut Sveidqvist
MIT
p-try
Sindre Sorhus
MIT
path-is-absolute
Sindre Sorhus
MIT
pseudomap
Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)
ISC
puppeteer
The Chromium Authors
Apache-2.0
react-dom
-
MIT
rehype-rewrite
Kenny Wong <wowohoo@qq.com>
MIT
remark-gfm
Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
MIT
sass
Natalie Weizenbaum
MIT
tr46
Sebastian Mayr <npm@smayr.name>
MIT
tsparticles
Matteo Bruni <matteo.bruni@me.com>
MIT
tsparticles-preset-stars
Matteo Bruni
MIT
unist-util-visit
Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
MIT
unplugin-icons
Anthony Fu <anthonyfu117@hotmail.com>
MIT
webidl-conversions
Domenic Denicola <d@domenic.me> (https://domenic.me/)
BSD-2-Clause
whatwg-url
Sebastian Mayr <github@smayr.name>
MIT

πŸš€Β Β Astro β€” Tabs bar + panels

A tabs bar + panels component which works entirely without JS. Supports height equalization and automatic vertical scroll bar for tabs bar.

Demonstration

WITH "tallest" panel equalization

Use panel-<n>-tallest.

Panel 1

Hello world

Panel 2

Panel 3

Heya


WITHOUT "tallest" equalization

The content below this component will reflow depending on panel content height.

Panel 1

Hello world

Panel 2

Panel 3

HΓ© HΓ΄

HΓ© HΓ΄

HΓ© HΓ΄

Unstyled

Panel 1

Panel 2

Panel 3


πŸš€Β Β Astro β€” Terminal Player (Asciinema)

Embed player for terminal sessions (recorded with asciinema) in your Astro project. Using asciinema player under the hood. Comes with full asciinema player settings support, typings and docs hints.

Demonstration


πŸš€Β Β Astro β€” Testbed πŸ‘©πŸ»β€πŸ”¬πŸ§«

Complete toolbox for Astro / JSX component testing and analysis. For design systems, storybooks, local dev. isolation, documentation…