# Wireframes

**Wireframes** is a set of components for building wireframes and prototypes with React, Vue or JavaScript.

<p align="center">
  <a href="./LICENSE">
    <img alt="Released under the BSD license." src="https://img.shields.io/badge/license-BSD-blue.svg"  />
  </a>
  <a href="https://www.npmjs.com/package/wireframes">
    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/wireframes"  />
  </a>
  <a href="../../issues">
    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
  </a>
  <a href="https://twitter.com/salteadorneodev">
    <img alt="Follow me on Twitter" src="https://img.shields.io/twitter/follow/salteadorneodev.svg?label=follow+@salteadorneodev&style=social&logo=twitter"/>
  </a>
</p>

![Wireframes](https://raw.githubusercontent.com/salteadorneo/wireframes/main/src/assets/og.png)

## Installation

```bash
npm i wireframes
```
```bash
npm i wireframes-react
```
```bash
npm i wireframes-vue
```

## Packages

| Name | Version | Downloads |
| - | - | - |
| [`wireframes`](https://github.com/salteadorneo/wireframes/tree/main) | [![npm version](https://img.shields.io/npm/v/wireframes.svg)](https://www.npmjs.com/package/wireframes) | [![npm downloads](https://img.shields.io/npm/dt/wireframes.svg)](https://www.npmjs.com/package/wireframes) |
| [`wireframes-react`](https://github.com/salteadorneo/wireframes/tree/main/packages/wireframes-react) | [![npm version](https://img.shields.io/npm/v/wireframes-react.svg)](https://www.npmjs.com/package/wireframes-react) | [![npm downloads](https://img.shields.io/npm/dt/wireframes-react.svg)](https://www.npmjs.com/package/wireframes-react) |
| [`wireframes-vue`](https://github.com/salteadorneo/wireframes/tree/main/packages/wireframes-vue) | [![npm version](https://img.shields.io/npm/v/wireframes-vue.svg)](https://www.npmjs.com/package/wireframes-vue) | [![npm downloads](https://img.shields.io/npm/dt/wireframes-vue.svg)](https://www.npmjs.com/package/wireframes-vue) |

## Usage

```html
<wf-image aspect-ratio="16/9" />

<wf-title>
    Hello world!
</wf-title>

<wf-button>
    Click me!
</wf-button>
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

BSD-3-Clause