To see how easy it is to consume Bluprint components, let's add an application menu or application toolbar:

1. First, append the following code to the index.css file:

@import '~normalize.css';
@import '~@blueprintjs/core/lib/css/blueprint.css';
@import '~@blueprintjs/icons/lib/css/blueprint-icons.css';

2. Then, go to the src/App.js file and import the following types from the @blueprintjs/core package:

import { Navbar, Button, Alignment } from '@blueprintjs/core';

3. This allows you to use the Navbar and Button components, as well as the Alignment enumerable, in your JSX templates. Update the code according to the following listing:

<Navbar>
  <Navbar.Group align={Alignment.LEFT}>
    <Navbar.Heading>Blueprint</Navbar.Heading>
    <Navbar.Divider />
    <Button className="bp3-minimal" icon="home" text="Home" />
    <Button className="bp3-minimal" icon="document" text="Files" />
  </Navbar.Group>
</Navbar>

4. At runtime, you should see a nice-looking toolbar with a Blueprint label and two buttons, Home and Files:

If you like dark themes, you will be pleased to know that Blueprint supports them. Given that the default React template is dark, let's update the Navbar to match the theme:

1. All you need to do is add the bp3-dark class name to the navbar:

<Navbar className="bp3-dark">
  <Navbar.Group align={Alignment.LEFT}>
    <Navbar.Heading>Blueprint</Navbar.Heading>
    <Navbar.Divider />
    <Button className="bp3-minimal" icon="home" text="Home" />
    <Button className="bp3-minimal" icon="document" text="Files" />
  </Navbar.Group>
</Navbar>

2. Check out your application. Notice that the application menu bar now has a dark theme:

Now, let's see what it takes to enable routing features for a React application and Electron shell.