We can add an instant theme to the ReactJS project by using Bootswatch.
Bootswatch: It is an open-source project, that provides a number of free themes for bootstrap that a web developer can use. It helps the developer to get proper UI without spending hours and energy on styling different elements.
Prerequisite:
- ReactJS Introduction and Working
- ReactJS Setting up Development Environment
To start follow the given link. Scroll down a bit, the themes will appear. Some of the most used themes are cosmos, darkly.
Link:
https://bootswatch.com/
Project structure:

Installation of Bootswatch in ReactJS project:
- Click on the preview button to have a wider perspective of the different components like forms, dropdown, and others to see how these components will appear if we use this particular theme.
- After selecting the theme, click on the download button, to download the bootstrap.min.css file.
- Inside your react.js folder open terminal, write command, this will install react-bootstrap in your application.
npm install react-bootstrap bootstrap
- As an example we choose Cyborg or https://bootswatch.com/cyborg/ is the theme that is chosen. Now add the downloaded bootstrap.min.css file, in the src folder.
- Import the bootstrap.min.css file in index.js. Filename- index.js: Here we will just import the bootstrap.min.css. Now the theme is applicable to the entire application.
Javascript
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import reportWebVitals from './reportWebVitals' ;
import './bootstrap.min.css' ;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById( 'root' )
);
reportWebVitals();
|
- In the src folder create another folder Components and inside it create a file and name it as Home.js it will be our functional component.
- Create a functional component in the file, like below. Now add any bootstrap component in your react.js application and it will be styled according to the theme.
Filename- Home.js:
Javascript
import React from 'react' ;
import {Image , Row} from 'react-bootstrap' ;
const Home = () => {
return (
<div>
<h1>Welcome to GeeksforGeeks</h1>
<h2>Let's Learn</h2>
{ }
<Row className= "justify-content-md-center" >
<Image src=
roundedCircle fluid />
</Row>
</div>
)
}
export default Home
|
- Now we just need to import the Home.js component in our App.js root component.
Filename- App.js: Remove the unnecessary things from this file and add the below code.
Javascript
import './App.css' ;
import Home from './component/Home' ;
function App() {
return (
<div className= "App" >
<Home />
</div>
);
}
export default App;
|
Start the Server: Run the below command to start the server.
npm start
Output: The applied theme is Cyborg (dark theme) and here is the output.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
25 Aug, 2022
Like Article
Save Article