React.js Blueprint HTML Elements Component Nested Usage

Last Updated : 26 Apr, 2025

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.

We can add styles and the features of React.js BluePrint HTML elements Component to the HTML elements just by providing a className {Classes.RUNNING_TEXT} to the parent element, which will change the style of all the nested elements.

Syntax:

<div className={Classes.RUNNING_TEXT}>
    ...
</div>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create a React application using the following command:

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this.

Example 1: We are importing Classes and H1 from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css” and following the below-written code.

App.js

Javascript

import { Classes, H1 } from '@blueprintjs/core'; 
import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
function App() { 
    return ( 
        <div style={{ 
            margin: 50 
        }}> 
            <h2 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h2> 
            <h4> 
                React.js BluePrint HTML elements  
                Component Nested usage 
            </h4> 
            <H1 > 
                H1 Tag 
            </H1> 
            <h1>h1 Tag</h1> 
            <div className={Classes.RUNNING_TEXT}> 
                <h1>h1 Tag style like H1 Tag</h1> 
            </div> 
        </div > 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: We are creating a table with two Columns differentiating between HTML elements and using another with HTML elements using Classes.RUNNING_TEXT.

App.js

Javascript

import { Classes } from '@blueprintjs/core'; 
import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
function App() { 
    return ( 
        <div style={{ 
            margin: 50 
        }}> 
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2> 
            <h4> 
                React.js BluePrint HTML elements Component  
                Nested usage 
            </h4> 
  
            <table border="1"> 
                <thead> 
                    <tr> 
                        <th>Using RUNNING_TEXT</th> 
                        <th>Without Using RUNNING_TEXT</th> 
                    </tr> 
                    <tr> 
                        <th> 
                            <div className={Classes.RUNNING_TEXT}> 
                                <code>code tag</code> 
                                <blockquote>blockquote tag</blockquote> 
                                <pre>pre tag</pre> 
                            </div> 
                        </th> 
                        <th> 
                            <div> 
                                <code>code tag</code> 
                                <blockquote>blockquote tag</blockquote> 
                                <pre>pre tag</pre> 
                            </div> 
                        </th> 
                    </tr> 
                </thead> 
            </table> 
        </div > 
    ); 
} 
  
export default App;