# shards-react

> A free, beautiful and modern React UI kit powered by Bootstrap 4 and the Shards UI kit.

Latest version **1.0.3** (published 2019-02-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install shards-react
pnpm add shards-react
yarn add shards-react
bun add shards-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-02-25 |
| First published | 2018-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | DesignRevision |
| Maintainers | hisk |
| Keywords | shards, bootstrap, react, ui-kit, ui, kit, uikit, component, components |

## Links

- npm: https://www.npmjs.com/package/shards-react
- npm.io page: https://npm.io/package/shards-react

## Dependencies (12)

- [shortid](https://npm.io/package/shortid.md) ^2.2.14
- [bootstrap](https://npm.io/package/bootstrap.md) ^4.1.3
- [shards-ui](https://npm.io/package/shards-ui.md) ^2.1.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [nouislider](https://npm.io/package/nouislider.md) ^12.1.0
- [lodash.omit](https://npm.io/package/lodash.omit.md) ^4.5.0
- [lodash.pick](https://npm.io/package/lodash.pick.md) ^4.4.0
- [react-popper](https://npm.io/package/react-popper.md) ^1.3.0
- [lodash.tonumber](https://npm.io/package/lodash.tonumber.md) ^4.0.3
- [react-datepicker](https://npm.io/package/react-datepicker.md) ^2.0.0
- [lodash.isfunction](https://npm.io/package/lodash.isfunction.md) ^3.0.9
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.5.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2019-02-25
- 1.0.2 — 2019-02-24
- 1.0.1 — 2018-12-29
- 1.0.0 — 2018-12-27
- 0.0.5 — 2018-12-21
- 0.0.4 — 2018-12-19
- 0.0.3 — 2018-12-10
- 0.0.2 — 2018-12-10
- 0.0.1 — 2018-12-07

## README

<p align="center">
<img src="logo.jpg" width="230" />
</p>

<p align="center">
Shards React is a free, beautiful and modern React UI kit <br /> based on <a href="https://github.com/designrevision/shards-ui">Shards</a>.
</p>

<br />

<p align="center">
  <a href="#">
    <img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" />
  </a>
  <a href="https://twitter.com/designrevision">
    <img src="https://img.shields.io/twitter/follow/DesignRevision.svg?style=social&label=Follow" />
  </a>
</p>

<br />

<p align="center">
  <a href="https://designrevision.com/docs/shards-react/"><strong>Documentation & Demo</strong></a> •
  <a href="https://designrevision.com/downloads/shards-react/"><strong>Official Page</strong></a>
</p>


### Getting Started

Getting started with Shards React is fairly simple. You can download Shards React via the official website, here on GitHub as a release package or by using a package manager such as Yarn or NPM.

* [Official Website](https://designrevision.com/downloads/shards-react)
* [Release Package](https://github.com/DesignRevision/shards-react/releases)

<br />

### Quick Start

You can install Shards React via Yarn or NPM.

```bash
# Yarn
yarn add shards-react

# NPM
npm i shards-react
```

<br />

### Module Bundlers

If you are using a module bundler such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/), you can import components as follows:

```javascript
import { Alert } from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css"

// ...
```

<br />

### Built Using

* [Shards UI Kit](https://designrevision.com/downloads/shards/)
* [React Datepicker](https://reactdatepicker.com/)
* [React Popper](https://github.com/FezVrasta/react-popper)
* [noUiSlider by Léon Gersen (WTFPL License)](https://refreshless.com/nouislider/download/)

<br />

### Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

<br />

### Roadmap

[View the roadmap.](http://designrevision.com/docs/shards-react/roadmap)

<br />

### Changelog

[View notable changes.](CHANGELOG.md)

---
_Source: https://npm.io/package/shards-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._