Getting Started

Contrast Design Bootstrap React (CDBReact)

Modern React UI library built on Bootstrap 5 components. Latest documented release: cdbreact@1.6.1 with React 19 support.

Quick Summary

Package: cdbreact
Best for: dashboards, admin panels, SaaS product UIs, and Bootstrap-styled React apps
Works with: React 19 (and earlier maintained React versions)
Styling base: Bootstrap 5

Install in 1 Minute

bash

npm install cdbreact

Need step-by-step setup? Follow the installation guide.

Basic Usage

These examples show the most common first components teams use in production.

Alert Component Demo

import React from 'react';
import { CDBAlert } from 'cdbreact';

const AlertDemo = () => {
  return (
    <>
      <CDBAlert color="primary">A simple alert built with Contrast Design</CDBAlert>
      <CDBAlert color="danger" dismiss>
        A dismissible alert built with Contrast Design
      </CDBAlert>
    </>
  );
};

export default AlertDemo;

Button Component Demo

import React from 'react';
import { CDBBtn, CDBContainer } from 'cdbreact';

export const ButtonDemo = () => {
  return (
    <CDBContainer>
      <CDBBtn color="primary">Primary</CDBBtn>
      <CDBBtn color="secondary">Secondary</CDBBtn>
      <CDBBtn color="danger">Danger</CDBBtn>
      <CDBBtn color="success">Success</CDBBtn>
      <CDBBtn color="dark">Dark</CDBBtn>
      <CDBBtn color="warning">Warning</CDBBtn>
      <CDBBtn color="info">Info</CDBBtn>
    </CDBContainer>
  );
};

LLM-Friendly Package Facts

If you are using an AI coding assistant, these are the key facts to provide in prompts:

Use package name: cdbreact
Import components from: cdbreact
Install command: npm install cdbreact
Primary docs root: https://www.devwares.com/docs/contrast/react/
Version used in these docs: 1.6.1

Next Steps

Read the installation guide for React, Gatsby, and common workflows.
Browse component docs to copy tested patterns quickly.

Visually build tailwind css projects 10x faster using AI

Build Tailwind websites visually and ship projects to production in minutes instead of days. Generates code from your designs to export to your favourite frameworks like React, Vue, Angular.

Try Windframe out for free.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Installation

Components