Home

Awesome

Contrast Bootstrap React

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

NPM JavaScript Style Guide npm

Install

npm install --save cdbreact

or

yarn add cdbreact

Usage

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

Blog articles

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" /><br/>IE / Edge<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br/>Firefox<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br/>Chrome<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br/>Safari<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" /><br/>Opera
MacN/Asupportedsupportedsupportedsupported
WindowssupportedsupportedsupportedN/Asupported

PRO Version

Contrast Design Bootstrap PRO

License

See License in <license.pdf> © Devwares

Support Devwares

Follow us on Social Media

Check out and star our GitHub repository

We truly appreciate everyone who has contributed to this project.

Thank you!