How to create a responsive sidebar in react using bootstrap and contrast
Tags: css, react, programming, webdev
Published: 2021-02-02 19:59:28

---
title: How to create a responsive sidebar in react using bootstrap and contrast
published: true
date: 2021-01-22 23:46:37 UTC
tags: [css, react, programming, webdev]
canonical_url: https://www.devwares.com/blog/create-responsive-sidebar-in-react
---

![Bootstrap](https://dev-to-uploads.s3.amazonaws.com/i/nodklzgzlfvl753lew6w.png)


Most websites these days are filled with lots of content and one of the ways to separate or set apart a part of the website is by using sidebars. Sidebars can be used to show different supplementary information such as social media links, navigational links, and ads.

  

Today, we’ll be creating a sidebar in react using a react library knows as Contrast. Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

  

### Prerequisites
  

The Sidebar would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

- Basic React Knowledge
- Basic Bootstrap knowledge
- NPM installed

The sidebar that we will be building is pictured below.

  
[![Bootstrap React Sidebar](https://dev-to-uploads.s3.amazonaws.com/i/bu9le7ahajvur55csk9v.jpg "Bootstrap React Sidebar")](/static/4747cc3f873ce6194deb052d18b81586/e60b6/bootstrap-sidebar.jpg)

### Setup

First Check that you have node installed. To do this, run the following command in your terminal.

```bash
node -v

```

This should show you the current version of node you have installed on your machine.

If you don’t have nodejs installed, download it here.

Installing node also installs npm on your PC but you can still confirm using npm -v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

```bash
npx create-react-app sidebar-app

```

I named the project sidebar-app but you can use whatever name of your choice.

### Install CDBReact

Now, we have to install CDBReact in our project

Run the following command to install CBDReact

```bash
npm install --save cdbreact 

```

Or using Yarn

```bash
yarn add cdbreact 

```

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Our sidebar would be making use of the Navlink component from React router, so let us install it by running the command below

```bash
npm install react-router-dom

```

Now run `npm start` to make sure that everything works well and there are no errors.

Before we proceed, let’s go ahead and wrap our app with the BrowserRouter component from react-router-dom as Navlinks can’t work outside it.

```javascript
import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';
 
function App() {
  return (
    <Router>
      <div className="App">
        
      </div>
    </Router>
  );
}
 
export default App;

```

### Sidebar

Let us go ahead to create a file named sidebar.js which would contain our sidebar component. Import the various sidebar components that we’ll be using.

```javascript
import React from 'react';
import {
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
} from 'cdbreact';
import { NavLink } from 'react-router-dom';
 
const Sidebar = () => {
  return (
    <div></div>
  );
};
 
export default Sidebar;

```

In the file above, we import a few things from CDBReact such as

- The sidebar itself (CDBSidebar)
- CDBSidebarContent which contains the main part of the sidebar
- CDBSidebarFooter which is the footer of the sidebar
- CDBSidebarHeader which is the header of the sidebar
- CDBSidebarMenu and 
- CDBSidebarMenuItem

We also import NavLink from React-router

Now, let’s create the sidebar and also include the sidebar header and footer. We’ll also add some inline styles to these components to make them look good.

```javascript
...

const Sidebar = () => {
  return (
    <div
      style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}
    >
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: 'inherit' }}
          >
            Sidebar
          </a>
        </CDBSidebarHeader>
 
        
        <CDBSidebarFooter style={{ textAlign: 'center' }}>
          <div
            className="sidebar-btn-wrapper"
            style={{
              padding: '20px 5px',
            }}
          >
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
  );
};
 
export default Sidebar;

```

With this, you should have something that looks like the image below. Note the Textcolor and background color props that we use to add color to the sidebar.

Lets go ahead to add the body of the sidebar. Add the following to your code:

```javascript
import React from 'react';
import {
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
} from 'cdbreact';
import { NavLink } from 'react-router-dom';
 
const Sidebar = () => {
  return (
    <div
      style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}
    >
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: 'inherit' }}
          >
            Sidebar
          </a>
        </CDBSidebarHeader>
 
        <CDBSidebarContent className="sidebar-content">
          <CDBSidebarMenu>
            <NavLink exact to="/" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="columns">Dashboard</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/tables" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="table">Tables</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/profile" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="user">Profile page</CDBSidebarMenuItem>
            </NavLink>
            <NavLink exact to="/analytics" activeClassName="activeClicked">
              <CDBSidebarMenuItem icon="chart-line">
                Analytics
              </CDBSidebarMenuItem>
            </NavLink>
 
            <NavLink
              exact
              to="/hero404"
              target="_blank"
              activeClassName="activeClicked"
            >
              <CDBSidebarMenuItem icon="exclamation-circle">
                404 page
              </CDBSidebarMenuItem>
            </NavLink>
          </CDBSidebarMenu>
        </CDBSidebarContent>
 
        <CDBSidebarFooter style={{ textAlign: 'center' }}>
          <div
            style={{
              padding: '20px 5px',
            }}
          >
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
  );
};
 
export default Sidebar;

```

In the code above, we used the CDBSidebar,CDBSidebarMenu,Navlink and CDBSidebarMenuItem to add some content which is mostly links to the sidebar.

Let us go ahead to import our newly created sidebar component into our app component.

```javascript
import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';
 
function App() {
  return (
    <Router>
      <div className="App">
        <Sidebar />
      </div>
    </Router>
  );
}
 
export default App;

```

At this point, your sidebar should look like the images below.

[![Bootstrap React Sidebar](https://dev-to-uploads.s3.amazonaws.com/i/bu9le7ahajvur55csk9v.jpg "Bootstrap React Sidebar")](/static/4747cc3f873ce6194deb052d18b81586/e60b6/bootstrap-sidebar.jpg)

  

[![Bootstrap React Sidebar](https://dev-to-uploads.s3.amazonaws.com/i/pxs0vzknvkffoam9wf4b.jpg "Bootstrap React Sidebar")](/static/00bad7c189982d9a711be046df746b12/04b03/bootstrap-mobile-sidebar.jpg)

With this, we have successfully created our sidebar and can now use it as navigation to different parts of our website or add other content to it as required.

### Multilevel Advanced Sidebar

If you want step the sidebar up a little further to include features like multilevel selection you will need the pro version of contrast to this. [Get Contrast Pro here](https://devwares.com/product/contrast-pro).

We use the pro sidebar the same way we use the free sidebar. After downloading the files for the contrast pro package which you can get by clicking the link above you follow this steps to get the multilevel advanced sidebar working.

#### Install CDBReact-pro

Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running 

```bash
npm install --save ./path-to-the-cdbreact-pro-tgz-file
```

Or using Yarn

```bash
yarn add ./path-to-the-cdbreact-pro-tgz-file
 ```


Our Multilevel Advanced Sidebar would also be making use of the Navlink component from React router that we installed above.


Now restart the server by running ```npm start``` to make sure that everything works well and there are no errors.

Before we proceed, let’s go ahead and wrap our app with the BrowserRouter component from react-router-dom as Navlinks can’t work outside it.


```javascript 
import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">

      </div>
    </Router>
  );
}
export default App;
```

Let us go ahead to create a file named prosidebar.js which would contain our Prosidebar component. Import the various sidebar components that we’ll be using.

```javascript
import React from 'react';
import {
  CDBBadge,
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
  CDBSidebarSubmenu

} from 'cdbreact-pro';
import { NavLink } from 'react-router-dom';

const ProSidebar = () => {
  return (
    <div></div>
  );
};

export default ProSidebar;
```


In the file above, we import a few things from CDBReactPro such as

- The sidebar itself (CDBSidebar)
- CDBSidebarContent which contains the main part of the sidebar
- CDBSidebarFooter which is the footer of the sidebar
- CDBSidebarHeader which is the header of the sidebar
- CDBSidebarMenu
- CDBSidebarMenuItem and
- CDBSidebarSubmenu

We also imported NavLink from React-router

Now, let’s create the sidebar and also include the sidebar header and footer. We’ll also add some inline styles to these components to make them look good like we did before.
<br/>

```javascript
<div
 style={{ display: "flex", height: "100vh", overflow: "scroll initial" }}>
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: "inherit" }}>
            Sidebar
          </a>
        </CDBSidebarHeader>
 
        <CDBSidebarFooter style={{ textAlign: "center" }}>
          <div
            style={{
              padding: "20px 5px",
            }}>
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
```

<br/>
Let’s go ahead and add the body(content) of the sidebar to it. Below is what our code should look like after this:  
<br/>

```javascript
import React from "react";
import {
  CDBBadge,
  CDBSidebar,
  CDBSidebarContent,
  CDBSidebarFooter,
  CDBSidebarHeader,
  CDBSidebarMenu,
  CDBSidebarMenuItem,
  CDBSidebarSubMenu,
} from "cdbreact-pro";
import { NavLink } from "react-router-dom";
 
const Sidebar = () => {
  return (
    <div
      style={{ display: "flex", height: "100vh", overflow: "scroll initial" }}>
      <CDBSidebar textColor="#fff" backgroundColor="#333">
        <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
          <a
            href="/"
            className="text-decoration-none"
            style={{ color: "inherit" }}>
            Sidebar
          </a>
        </CDBSidebarHeader>
 
        <CDBSidebarContent>
          <CDBSidebarMenu>
            <CDBSidebarMenuItem
              suffix={
                <CDBBadge color="danger" size="small" borderType="pill">
                  new
                </CDBBadge>
              }
              icon="th-large">
              Dashboard
            </CDBSidebarMenuItem>
            <CDBSidebarMenuItem
              icon="sticky-note"
              suffix={
                <CDBBadge color="danger" size="small" borderType="pill">
                  new
                </CDBBadge>
              }>
              Components
            </CDBSidebarMenuItem>
          </CDBSidebarMenu>
          <CDBSidebarMenu>
            <CDBSidebarSubMenu title="Sidemenu" icon="th">
              <NavLink exact to="/sub1" activeClassName="activeClicked">
                <CDBSidebarMenuItem>submenu 1</CDBSidebarMenuItem>
              </NavLink>
              <NavLink exact to="/sub2" activeClassName="activeClicked">
                <CDBSidebarMenuItem>submenu 2</CDBSidebarMenuItem>
              </NavLink>
              <NavLink exact to="/sub3" activeClassName="activeClicked">
                <CDBSidebarMenuItem>submenu 3</CDBSidebarMenuItem>
              </NavLink>
            </CDBSidebarSubMenu>
            <CDBSidebarSubMenu
              title="Sidemenu2"
              icon="book"
              suffix={
                <CDBBadge color="danger" size="small" borderType="pill">
                  new
                </CDBBadge>
              }>
              <CDBSidebarMenuItem>submenu 1</CDBSidebarMenuItem>
              <CDBSidebarMenuItem>submenu 2</CDBSidebarMenuItem>
              <CDBSidebarMenuItem>submenu 3</CDBSidebarMenuItem>
            </CDBSidebarSubMenu>
            <CDBSidebarSubMenu title="MultiLevel with Icon" icon="table">
              <CDBSidebarMenuItem>submenu 1 </CDBSidebarMenuItem>
              <CDBSidebarMenuItem>submenu 2 </CDBSidebarMenuItem>
              <CDBSidebarSubMenu title="submenu 3">
                <CDBSidebarMenuItem>submenu 3.1 </CDBSidebarMenuItem>
                <CDBSidebarMenuItem>submenu 3.2 </CDBSidebarMenuItem>
                <CDBSidebarSubMenu title="subnt">
                  <CDBSidebarMenuItem>submenu 3.3.1 </CDBSidebarMenuItem>
                  <CDBSidebarMenuItem>submenu 3.3.2 </CDBSidebarMenuItem>
                  <CDBSidebarMenuItem>submenu 3.3.3 </CDBSidebarMenuItem>
                </CDBSidebarSubMenu>
              </CDBSidebarSubMenu>
            </CDBSidebarSubMenu>
          </CDBSidebarMenu>
        </CDBSidebarContent>
 
        <CDBSidebarFooter style={{ textAlign: "center" }}>
          <div
            style={{
              padding: "20px 5px",
            }}>
            Sidebar Footer
          </div>
        </CDBSidebarFooter>
      </CDBSidebar>
    </div>
  );
};
 
export default Sidebar;
```
 <br/>

In the code above, you would notice the addition of the   CDBSidebarSubMenu which adds submenus that can be nested to the sidebar.
 
Let us now go ahead to import our newly created sidebar component into our app component.

<br/>
```javascript
import './App.css';
import Sidebar from './sidebar';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Sidebar />
      </div>
    </Router>
  );
}

export default App;
```
<br/>

Your sidebar should now look and work like the gif below: 

![Contrast Bootstrap Sidebar Pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhn4hj74wixllbnnmwso.gif)

Thats it we have successfully created our Multilevel advanced sidebar with submenus and can use it for navigation on our projects.



### Resources

[CDBReact Sidebar Docs](https://www.devwares.com/docs/contrast/react/navigation/sidebar)

[Link to code on github](https://github.com/Chimdiya1/article-sidebar)

[Get Contrast Pro](https://devwares.com/product/contrast-pro)


###Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. [Try contrast pro!](https://www.devwares.com/product/contrast-pro)

![Contrast Design Boostrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro)

## Resources 

- [Get Contrast PRO](https://www.devwares.com/product/bootstrap-contrast-pro)

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind css in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

[Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [Getting Started] (https://www.devwares.com/docs/contrast/react/index/)
- [Accordion](https://www.devwares.com/docs/contrast/react/components/accordion/)
- [Autocomplete](https://www.devwares.com/docs/contrast/react/components/autocomplete/)
- [Alert](https://www.devwares.com/docs/contrast/react/components/alert/)
- [Badges](https://www.devwares.com/docs/contrast/react/components/badge/)
- [Animation](https://www.devwares.com/docs/contrast/react/components/animations/)
- [Box](https://www.devwares.com/docs/contrast/react/components/box/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/react/components/buttonToolbar/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/react/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/react/components/buttonGroup/)
- [Checkbox](https://www.devwares.com/docs/contrast/react/components/checkbox/)
- [Button](https://www.devwares.com/docs/contrast/react/components/buttons/)
- [Collapse](https://www.devwares.com/docs/contrast/react/components/collapse/)
- [Carousel](https://www.devwares.com/docs/contrast/react/components/carousel/)
- [Iframe](https://www.devwares.com/docs/contrast/react/components/iframe/)
- [Card](https://www.devwares.com/docs/contrast/react/components/card/)
- [DropDown](https://www.devwares.com/docs/contrast/react/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/react/components/footer/)
- [Input](https://www.devwares.com/docs/contrast/react/components/input/)
- [ListGroup](https://www.devwares.com/docs/contrast/react/components/listgroup/)
- [InputGroup](https://www.devwares.com/docs/contrast/react/components/inputgroup/)
- [Icon](https://www.devwares.com/docs/contrast/react/components/icon/)
- [Multiselect](https://www.devwares.com/docs/contrast/react/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/react/components/notification/)
- [Mask](https://www.devwares.com/docs/contrast/react/components/mask/)
- [Progress](https://www.devwares.com/docs/contrast/react/components/progress/)
- [Rating](https://www.devwares.com/docs/contrast/react/components/rating/)
- [Radio](https://www.devwares.com/docs/contrast/react/components/radio/)
- [Select](https://www.devwares.com/docs/contrast/react/components/select/)
- [Modal](https://www.devwares.com/docs/contrast/react/components/modal/)
- [Pane](https://www.devwares.com/docs/contrast/react/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/react/components/panels/)
- [Slider](https://www.devwares.com/docs/contrast/react/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/react/components/spinner/)
- [Select 2](https://www.devwares.com/docs/contrast/react/components/select2/)
- [SmoothScroll](https://www.devwares.com/docs/contrast/react/components/smoothscroll/)
- [Switch](https://www.devwares.com/docs/contrast/react/components/switch/)
- [Stepper](https://www.devwares.com/docs/contrast/react/components/stepper/)
- [Charts](https://www.devwares.com/docs/contrast/react/chart/)
- [Navbar](https://www.devwares.com/docs/contrast/react/navigation/navbar/)
- [Tab](https://www.devwares.com/docs/contrast/react/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/react/navigation/sidebar/)
- [Pagination](https://www.devwares.com/docs/contrast/react/navigation/pagination/)
- [DatePicker](https://www.devwares.com/docs/contrast/react/sections/datepicker/)
- [FileUploader](https://www.devwares.com/docs/contrast/react/sections/fileuploader/)
- [TimePicker](https://www.devwares.com/docs/contrast/react/sections/timepicker/)
- [EditableTable](https://www.devwares.com/docs/contrast/react/table/editabletable/)
- [Table](https://www.devwares.com/docs/contrast/react/table/table/)
- [DataTable](https://www.devwares.com/docs/contrast/react/table/datatables/)
- [Widgets](https://www.devwares.com/docs/contrast/react/widgets/)
- [Forms](https://www.devwares.com/docs/contrast/react/forms/)