

# Contrast Bootstrap React 

> Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps

[![NPM](https://img.shields.io/npm/v/cdbreact.svg)](https://www.npmjs.com/package/cdbreact) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
![npm](https://img.shields.io/npm/dm/cdbreact)

## Install

```bash
npm install --save cdbreact
```

or 

```bash
yarn add cdbreact
```

## Usage

```jsx
import React from 'react'
import { CDBAlert } from 'cdbreact'

const Alert = () => {
  return (
        <CDBAlert color="primary">
          A simple alert built with contrast design 
        </CDBAlert>
  )
}

export default Alert;
```


## Documentation

[Check out our documentation here](https://www.devwares.com/docs/contrast/react/index)


# Demo

## Pages

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326758/sign-up-form-1-2_td39ot.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326759/sign-up_k89hu8.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326758/sign-up-form-1-7_nxkipe.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326674/sign-up-form-1-1_nyfoso.png" width="80%" height="auto"/>
</a>



## Carousel

<a href="https://www.devwares.com/docs/contrast/react/components/carousel">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800447/carousel_gu7ooz.gif"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/iframe">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800599/iframe_ck7tdd.png" width="80%" height="auto"/>
</a>

## Dashboards

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326755/dashboard-premium-1_a5n58x.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326755/dashboard-premium-dark_rah6ys.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326755/dashboard-premium_o49gxh.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326755/dashboard-freemium_jadxee.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/product/admin-contrast">
<img src="https://res.cloudinary.com/speedwares/image/upload/v1632326754/dashboard-pro_toi6vv.png" width="80%" height="auto"/>
</a>


## Cards

<a href="https://www.devwares.com/docs/contrast/react/components/card">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800622/carrd2_tf4wtd.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/card">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800563/card_lp8nzr.png" width="80%" height="auto"/>
</a>

## Buttons

<a href="https://www.devwares.com/docs/contrast/react/components/buttons">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800644/button_pspxqb.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/buttons">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800644/button2_h3anyq.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/buttons">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800645/button3_fvm1sw.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/buttons">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800645/button4_lsqt1r.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/buttons">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800561/button5_t7bbqz.png" width="80%" height="auto"/>
</a>

## Sidebar

<a href="https://www.devwares.com/docs/contrast/react/navigation/sidebar">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800631/sidebar_vh4r4s.gif"/>
</a>

## Footer

<a href="https://www.devwares.com/docs/contrast/react/components/footer">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800579/footer_wxryi3.png" width="80%" height="auto"/>
</a>

## Widget

<a href="https://www.devwares.com/docs/contrast/react/widgets">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800642/widget1_uiuxby.png"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/widgets">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800640/widget2_jlwv1u.png"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/widgets">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800640/widget3_mmvxqy.png"/>
</a>

## Modal

<a href="https://www.devwares.com/docs/contrast/react/components/modal">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800627/modal_1_qgfjha.gif" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/chart">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800617/polar_fcq8bx.gif" width="80%" height="auto"/>
</a>

## Stepper

<a href="https://www.devwares.com/docs/contrast/react/components/stepper">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800637/stepper_vy3cz6.gif" width="80%" height="auto"/>
</a>

## Badge

<a href="https://www.devwares.com/docs/contrast/react/components/badge">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800642/bag1_ho7wzy.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/badge">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800642/bag2_frbyce.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/badge">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800642/bag3_pn29fi.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/badge">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800642/bag4_vn7oao.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/components/badge">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800643/bag5_acs6nj.png" width="80%" height="auto"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/chart">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800571/Dynamic_bar_j1hlky.gif" width="80%" height="auto"/>
</a>

## Form

<a href="https://www.devwares.com/docs/contrast/react/forms">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800603/form_uxe9qq.png"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/forms">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800579/form_4_oo00es.png"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/forms">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800582/forms6_ycmpao.png"/>
</a>

<a href="https://www.devwares.com/docs/contrast/react/forms">
<img src="https://res.cloudinary.com/devwares/image/upload/v1610800582/forms5_ixmrox.png"/>
</a>


# Browser support

## Browsers supported

|     |  [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
|-----|  --------- | --------- | --------- | --------- | --------- |
|Mac | N/A  | supported  | supported   | supported   | supported  |
|Windows | supported  |supported   |supported   | N/A | supported  |

## PRO Version

[Contrast Design Bootstrap PRO](https://www.devwares.com/product/contrast-pro)

## License

See License in &lt;license.pdf&gt; © [Devwares](https://github.com/Devwares)

## Support Devwares

### Follow us on Social Media

* [Twitter](https://twitter.com/devwares)
* [Facebook](https://www.facebook.com/Devwares-102291481719158/)
* [Instagram](https://instagram.com/devwares)
* [Linkedin](https://www.linkedin.com/company/devwares)
* [Youtube](https://www.youtube.com/channel/UCl0MxA8KB7EdmPcSsVwT3pQ)

### Check out and star our GitHub repository

* [Github](https://github.com/Devwares)
  
* Create pull requests
* Submit bugs
* Suggest new features
* Help us Improve our documentation with updates

We truly appreciate everyone who has contributed to this project. 

Thank you!