React wrappers for wired-elements. Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

Wired Elements (github) are implemented as web components. Though you can use these Web Components directly in React (like, here), and in any framework; React's design make them a bit non-trivial to use at times. (More here).

This project wraps the web components in React components to make them easy to use. This is done via @lit-labs/react made by Lit.

Add to your project:

npm i wired-elements-react

And use then in your JSX:

import { WiredButton, WiredInput, WiredCard } from "wired-elements-react";

function App() {
  let textInput = React.createRef();

  function handleClick() {
    window.alert(`Hello ${textInput.current.value}!`);
  }

  return (
    <WiredCard elevation="5">
      <h1>wired-elements demo</h1>
      <section>
        <WiredInput placeholder="your name" />
        <WiredButton elevation={2} onClick={handleClick}>
          Submit
        </WiredButton>
      </section>
    </WiredCard>
  );
}

Here's a basic example on CodeSandbox: Open sandbox

Documentation on individual component can be found here.

MIT License (c) Preet Shihn

Become a financial contributor and help us maintain the Rough libraries like this one. Open Collective or Github Sponsor