cdbreact
Version:
Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps
402 lines (278 loc) • 20.5 kB
Markdown
# Contrast Bootstrap React
> Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps
[](https://www.npmjs.com/package/cdbreact) [](https://standardjs.com)
## 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)
- [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 <license.pdf> © [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!