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

Install

npm install --save cdbreact

or

yarn add cdbreact

React Compatibility

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

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

• How to create Tailwind CSS Modal

• How to use tailwind CSS in HTML

• Get Contrast PRO

• Why tailwind CSS is good

• How to use Tailwind CSS in Nextjs

• How to create Tailwind CSS Components for your Website

• How to create Tailwind CSS Animation

• 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

• Tailwind CSS Flex: How to use Tailwind CSS Flex

• How to use tailwind CSS padding, margin and border in your project

• Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN

• How to set up your first Tailwind CSS Project

• How to use Tailwind CSS in HTML

• Tailwind CSS table-How to Create Tailwind CSS tables

• How to set up your first Tailwind CSS Project

• Why is tailwind CSS better than other CSS framework

• 10 tailwind CSS templates and themes

• How to add tailwind CSS colors and Fonts to your project

• Differences between Tailwind CSS and SASS

• Differences Between Tailwind CSS and Bootstrap

• 10 Awesome projects built with Tailwind CSS.

• How to install Tailwind CSS in Vue.js.

• How to use Tailwind CSS in React

• How to install Tailwind CSS with Laravel

• How to create react date picker

• React bootstrap 5 form-How to create React forms.

• How to create a beautiful React multiselect.

• How to create a beautiful React Bootstrap progress bar.

• How to create a beautiful React Bootstrap select with icons.

• How to create a beautiful Bootstrap 5 stepper

• How to create a beautiful React Bootstrap table

• How to create beautiful React Bootstrap tabs

• 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 Bootstrap 5 Modal.

• How to use Tailwind CSS Width

• Tailwind CSS Colors 3.0

• How to build Tailwind css timepicker with Tailwind elements

• How to Create a Responsive React Sidebar Design Using Tailwind CSS.

• How to implement dark mode in React using tailwind css.

• How to create a beautiful Bootstrap Datatable with Icons

• How to create a React datepicker using React Bootstrap.

• React bootstrap 5 form-How to create React forms

• How to create a beautiful React multiselect.

• How to create a beautiful React Bootstrap

• How to create a responsive React Bootstrap Sidebar

• How to create a beautiful React Bootstrap select with icons.

• Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper

• How to create a beautiful React Bootstrap table.

• How to create beautiful React Bootstrap tabs

• How To Create A Datatable Using Angular Bootstrap

• How To Create Bootstrap Charts using Bootstrap 5

• How To Create A Beautiful Navbar Using Bootstrap 5.

• Major changes to bootstrap 5

• All you need to know about Bootstrap 5

Demo

Pages

Carousel

Dashboards

Cards

Buttons

Sidebar

Footer

Widget

Modal

Stepper

Badge

Form

Browser support

Browsers supported

	IE / Edge	Firefox	Chrome	Safari	Opera
Mac	N/A	supported	supported	supported	supported
Windows	supported	supported	supported	N/A	supported

PRO Version

Contrast Design Bootstrap PRO

License

See License in <license.pdf> © Devwares

Support Devwares

Follow us on Social Media

• Twitter
• Facebook
• Instagram
• Linkedin
• Youtube

Check out and star our GitHub repository

• Github

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