DEV Community

Cover image for Announcing Wired-Elements 2.0
Preet Shihn
Preet Shihn

Posted on • Originally published at shihn.ca

2 1

Announcing Wired-Elements 2.0

I'm happy to announce the 2.0 release of wired-elements. It started of, and still is, a fun project to work on. In this era of really slick and buttery smooth design systems, a brutal and rough beacon of light 😉

In this release, the underlying base code for all components was refactored to create smaller and more efficient components. By more efficient, I mean fewer re-renders of the sketchy shapes. This was done mainly by not re-rendering shapes if the dimensions do not change, and also by utilizing the Resize Observer where it's available.

View all components in action in the wired-elements showcase.

New components in 2.0 👇

wired-calendar

This is the first fully community contributed component. Eduardo Martinez created this. The calendar is customizable in many ways, for details check out the wired-calendar readme.

wired-calendar example

wired-video

A simple video player that shows a sketchy progress and hand-drawn controls for play/pause and volume.

wired-video example

wired-image

An image component akin the the <img> tag, but it frames the image in a hand-drawn box. The elevation of the box is configurable.

wired-image example

wired-dialog

A modal dialog implementation. This contents of the dialog look like paper cutouts around a hand drawn box.

wired-dialog example

wired-divider

A hand-drawn horizontal line that can be used to divide two sections.

wired-link

Akin to <a> tag, a link with href, and a sketchy underline.

wired-search

A search input control

wired-search example

MORE

Try wired-elements out on Glitch playground.

Checkout wiredjs.com for more.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay