Search...
graphql
react

Installation

Install CDBReact

Use this guide to install cdbreact quickly and correctly in modern React projects.

Compatibility

cdbreact@1.6.1 supports React 19 and Bootstrap 5-based UI workflows.

PackageRecommended Version
Node.js18+ LTS
React19.x
cdbreact1.6.1

Prerequisites

Before you begin:

  • Install Node.js LTS (18+ recommended)
  • Confirm package manager works (npm -v or yarn -v)

Quick Install (React App)

Step 1: Create a React app (Vite recommended)

bash
npm create vite@latest <appname> -- --template react

Step 2: Navigate into your app

bash
cd <appname>

Step 3: Install cdbreact

bash
npm install cdbreact

or

bash
yarn add cdbreact

Step 4: Start your app

bash
npm run dev

or

bash
yarn dev

Alternative: Create React App (CRA)

If you still use CRA:

bash
npx create-react-app <appname>
cd <appname>
npm install cdbreact
npm start

Verify Installation

Create a component file and import from cdbreact:

js
import React from 'react';
import { CDBBtn } from 'cdbreact';


export default function Example() {
  return <CDBBtn color="primary">CDBReact Works</CDBBtn>;
}

If your app renders the button without import errors, setup is complete.

Usage with Gatsby.js

Use these steps to set up cdbreact in Gatsby.

Step 1: Create a new Gatsby application

bash
npm init gatsby

Answer the questions that show up to get your application initialized as shown below.

  • name of your site - <app-name>
  • folder name - <folder>/<app-name>
  • choose between JavaScript or TypeScript - (Choose one)
  • CMS - No (or I'll add it later)
  • styling system - No (or I'll add it later)

Step 2: Navigate to app's directory

bash
cd <appname>

Step 3: Install cdbreact

bash
npm install cdbreact

Step 4: Launch your app

bash
npm start

Troubleshooting

Module not found error

  • Ensure cdbreact is listed in package.json dependencies.
  • Reinstall dependencies with npm install.

Peer dependency warnings

  • Upgrade to React 19 and keep react and react-dom on matching versions.

Type or import confusion in AI-generated code

  • Always import components directly from cdbreact.
  • Use real component names from this docs site (for example CDBBtn, CDBAlert, CDBInput).

LLM-Friendly Facts

  • Install: npm install cdbreact
  • Import path: cdbreact
  • Version represented in docs: 1.6.1
  • Docs root: https://www.devwares.com/docs/contrast/react/

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.

Next
Getting Started