Installation Process

To begin utilizing Shards React, you'll need to install the library. You can do this by executing the following command using Yarn:

yarn add shards-react

Alternatively, if you prefer NPM, you can run:

npm i shards-react

Keep in mind that some components require Bootstrap styles. To add Bootstrap to your project, run:

npm i bootstrap

Adding Alerts to Your App

After installing the package, you can easily incorporate an alert using the Alert component. Here’s an example of how to do it:

import React from "react";

import { Alert } from "shards-react";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

return (

<Alert theme="primary">Alert</Alert>

);

}

Make sure to import the CSS for proper styling. The theme prop allows you to specify the alert's background color, with options such as secondary, success, danger, info, light, and dark.

For a dismissible alert, you can use the dismissible prop as shown below:

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(true);

const dismiss = () => setVisible(false);

return (

<Alert open={visible} dismissible onDismiss={dismiss}>

Alert

</Alert>

);

}

Here, the open prop is controlled by the visible state, allowing you to manage the alert's visibility dynamically.

Inserting Badges

To include a badge in your React application, utilize the Badge component like this:

import React from "react";

import { Badge } from "shards-react";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

return (

<Badge theme="secondary">Secondary</Badge>

);

}

The badge's theme can be set to secondary, success, danger, info, light, or dark. If no theme is specified, it defaults to a blue background.

You can also create pill-shaped badges by adding the pill prop:

<Badge pill theme="secondary">Secondary</Badge>

Additionally, you can make a badge outlined by using the outline prop:

<Badge outline theme="secondary">Secondary</Badge>

Combining both properties is also possible, and you can transform it into a link using the href prop:

<Badge href="#" theme="secondary">Secondary</Badge>

Creating Breadcrumbs

To implement a breadcrumb navigation in your React application, use the Breadcrumb and BreadcrumbItem components:

import React from "react";

import { Breadcrumb, BreadcrumbItem } from "shards-react";

import "shards-ui/dist/css/shards.min.css";

export default function App() {

return (

<Breadcrumb>

<BreadcrumbItem href="#">Home</BreadcrumbItem>

<BreadcrumbItem active>Library</BreadcrumbItem>

</Breadcrumb>

);

}

Each BreadcrumbItem can include an href attribute for the link destination.