# Contrast Bootstrap React 

> Elegant UI Kit and reusable components for building mobile-first, responsive websites 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 total downloads](https://img.shields.io/npm/dt/cdbreact?label=npm%20total%20downloads)

## Install

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

or 

```bash
yarn add cdbreact
```

## React Compatibility

- Supported React versions: `16.14` to `19.x`
- Verified with React `19.2.4` in this release

## 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)
- [Accordion](https://www.devwares.com/docs/contrast/react/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/react/components/alert/)
- [Autocomplete](https://www.devwares.com/docs/contrast/react/components/autocomplete/)
- [Animation](https://www.devwares.com/docs/contrast/react/components/animations/)
- [Badges](https://www.devwares.com/docs/contrast/react/components/badge/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/react/components/breadcrumb/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/react/components/buttonToolbar/)
- [Box](https://www.devwares.com/docs/contrast/react/components/box/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/react/components/buttonGroup/)
- [Checkbox](https://www.devwares.com/docs/contrast/react/components/checkbox/)
- [Carousel](https://www.devwares.com/docs/contrast/react/components/carousel/)
- [Button](https://www.devwares.com/docs/contrast/react/components/buttons/)
- [Collapse](https://www.devwares.com/docs/contrast/react/components/collapse/)
- [Icon](https://www.devwares.com/docs/contrast/react/components/icon/)
- [Footer](https://www.devwares.com/docs/contrast/react/components/footer/)
- [Iframe](https://www.devwares.com/docs/contrast/react/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/react/components/input/)
- [Card](https://www.devwares.com/docs/contrast/react/components/card/)
- [Mask](https://www.devwares.com/docs/contrast/react/components/mask/)
- [ListGroup](https://www.devwares.com/docs/contrast/react/components/listgroup/)
- [InputGroup](https://www.devwares.com/docs/contrast/react/components/inputgroup/)
- [Multiselect](https://www.devwares.com/docs/contrast/react/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/react/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/react/components/pane/)
- [DropDown](https://www.devwares.com/docs/contrast/react/components/dropdown/)
- [Modal](https://www.devwares.com/docs/contrast/react/components/modal/)
- [Progress](https://www.devwares.com/docs/contrast/react/components/progress/)
- [Rating](https://www.devwares.com/docs/contrast/react/components/rating/)
- [Radio](https://www.devwares.com/docs/contrast/react/components/radio/)
- [Panel](https://www.devwares.com/docs/contrast/react/components/panels/)
- [Select](https://www.devwares.com/docs/contrast/react/components/select/)
- [Slider](https://www.devwares.com/docs/contrast/react/components/slider/)
- [SmoothScroll](https://www.devwares.com/docs/contrast/react/components/smoothscroll/)
- [Select 2](https://www.devwares.com/docs/contrast/react/components/select2/)
- [Spinner](https://www.devwares.com/docs/contrast/react/components/spinner/)
- [Switch](https://www.devwares.com/docs/contrast/react/components/switch/)
- [Stepper](https://www.devwares.com/docs/contrast/react/components/stepper/)
- [Charts](https://www.devwares.com/docs/contrast/react/chart/)
- [Navigation](https://www.devwares.com/docs/contrast/react/navigation/)
- [DatePicker](https://www.devwares.com/docs/contrast/react/sections/datepicker/)
- [FileUploader](https://www.devwares.com/docs/contrast/react/sections/fileuploader/)
- [TimePicker](https://www.devwares.com/docs/contrast/react/sections/timepicker/)
- [EditableTable](https://www.devwares.com/docs/contrast/react/table/editabletable/)
- [Table](https://www.devwares.com/docs/contrast/react/table/table/)
- [DataTable](https://www.devwares.com/docs/contrast/react/table/datatables/)
- [Widgets](https://www.devwares.com/docs/contrast/react/widgets/)
- [Forms](https://www.devwares.com/docs/contrast/react/forms/)

## Blog articles


- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

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

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table](https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to use Tailwind CSS Width](https://www.devwares.com/blog/Tailwind-width/)
- [Tailwind CSS Colors 3.0](https://www.devwares.com/blog/How-to-add-color-to-Tailwind/) 
- [How to build Tailwind css timepicker with Tailwind elements](https://www.devwares.com/blog/how-to-build-tailwindcss-timepicker-with-tailwind-element/)
- [How to Create a Responsive React Sidebar Design Using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-responsive-react-sidebar-design-using-tailwind-css/)
- [How to implement dark mode in React using tailwind css.](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)
- [How to create a beautiful Bootstrap Datatable with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)
- [How to create a React datepicker using React Bootstrap.](https://www.devwares.com/blog/create-datepicker-with-contrast/)
- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)
- [How to create a beautiful React multiselect.](https://www.devwares.com/blog/create-multiselect-with-contrast/)
- [How to create a beautiful React Bootstrap](https://www.devwares.com/blog/create-progress-with-contrast/)
- [How to create a responsive React Bootstrap Sidebar](https://www.devwares.com/blog/create-responsive-sidebar-in-react/)
- [How to create a beautiful React Bootstrap select with icons.](https://www.devwares.com/blog/create-select-with-contrast/)
- [Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)
- [How to create a beautiful React Bootstrap table.](https://www.devwares.com/blog/create-tables-with-contrast/)
- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)
- [How To Create A Datatable Using Angular Bootstrap](https://www.devwares.com/blog/create-datatable-in-angular-10/)
- [How To Create Bootstrap Charts using Bootstrap 5](https://www.devwares.com/blog/create-bootstrap-charts-using-bootstrap5/)
- [How To Create A Beautiful Navbar Using Bootstrap 5.](https://www.devwares.com/blog/bootstrap-5-navbar-using-contrast/)
- [Major changes to bootstrap 5](https://www.devwares.com/blog/bootstrap-5-major-changes/)
- [All you need to know about Bootstrap 5](https://www.devwares.com/blog/bootstrap-5-all-you-need-to-know/)

# 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!