Awesome
Contrast Bootstrap React
Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps
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
- Check out our documentation here
- Accordion
- Alert
- Autocomplete
- Animation
- Badges
- Breadcrumb
- ButtonToolbar
- Box
- ButtonGroup
- Checkbox
- Carousel
- Button
- Collapse
- Icon
- Footer
- Iframe
- Input
- Card
- Mask
- ListGroup
- InputGroup
- Multiselect
- Notification
- Pane
- DropDown
- Modal
- Progress
- Rating
- Radio
- Panel
- Select
- Slider
- SmoothScroll
- Select 2
- Spinner
- Switch
- Stepper
- Charts
- Navigation
- DatePicker
- FileUploader
- TimePicker
- EditableTable
- Table
- DataTable
- Widgets
- Forms
Blog articles
-
Tailwind grid-How to use tailwind CSS grid templates in your project
-
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
-
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
-
How to use tailwind CSS padding, margin and border in your project
-
How to create a beautiful React Bootstrap select with icons.
-
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
-
Tailwind Modal-How to create a React Modal using Tailwind CSS.
-
How to Create a Responsive React Sidebar Design Using Tailwind CSS.
-
How to create a beautiful React Bootstrap select with icons.
-
Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper
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
PRO Version
License
See License in <license.pdf> © Devwares
Support Devwares
Follow us on Social Media
Check out and star our GitHub repository
-
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!