Getting Started with React Development with the Shards React Library — Alert, Badge, and Breadcrumbs

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Installation

We can install the package by running:

yarn add shards-react

with Yarn or:

npm i shards-react

with NPM.

Bootstrap styles are required for some components.

We can add it by running:

npm i bootstrap

Alert

After we install the package, we can add an alert with the Alert component:

import React from "react";
import { Alert } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Alert theme="primary">Alert</Alert>
    </div>
  );
}

We import the CSS to import the styles.

We set the theme prop to set background color of the alert.

Other options include secondary , success , danger , info , light , and dark .

We can add a dismissible alert with the dismissible prop:

import React, { useState } from "react";
import { Alert } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";
export default function App() {
  const [visible, setVisible] = useState();
  const dismiss = () => {
    setVisible(false);
  };
  return (
    <div className="App">
      <Alert theme="primary" dismissible={dismiss} open={visible}>
        Alert
      </Alert>
    </div>
  );
}

We set the open prop to the visible state to let us control its visibility.

Badge

We can add a badge into our React app with the Badge component.

For instance, we can write:

import React from "react";
import { Badge } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge theme="secondary">Secondary</Badge>
    </div>
  );
}

The theme is set to secondary to display a gray background.

We can also set it to success , danger , info , light , and dark .

If we leave theme out, then it’s set to a blue background.

We can add the pill prop to make it pill-shaped:

import React from "react";
import { Badge } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge pill theme="secondary">
        Secondary
      </Badge>
    </div>
  );
}

And we can add the outline prop to make it outlined:

import React from "react";
import { Badge } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge outline theme="secondary">
        Secondary
      </Badge>
    </div>
  );
}

We can have both together.

And we can make it a link with the href prop:

import React from "react";
import { Badge } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Badge href="http://yahoo.com" theme="secondary">
        Secondary
      </Badge>
    </div>
  );
}

Breadcrumb

We can add a breadcrumb into our React app with the Breadcrumb and BreadcrumbItem components.

For instance, we can write:

import React from "react";
import { Breadcrumb, BreadcrumbItem } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#">Home</a>
        </BreadcrumbItem>
        <BreadcrumbItem active>Library</BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
}

BreadcrumbItem has the items. href has the URL for the link.

Conclusion

We can add a few basic components into our React app with Shards React.