React Horizontal Line (HR) - Flowbite
Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS
The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.
Default HR#
Use this example to separate text content with a <hr /> horizontal line.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
import { HR } from "flowbite-react";
function Component() {
return (
<>
<p className="text-gray-500 dark:text-gray-400">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
data from other software development tools, so your IT support and operations teams have richer contextual
information to rapidly respond to requests, incidents, and changes.
</p>
<HR />
<p className="text-gray-500 dark:text-gray-400">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
change.
</p>
</>
);
}Trimmed#
Use this example to show a shorter version of the horizontal line.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
import { HR } from "flowbite-react";
function Component() {
return (
<>
<p className="text-gray-500 dark:text-gray-400">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
data from other software development tools, so your IT support and operations teams have richer contextual
information to rapidly respond to requests, incidents, and changes.
</p>
<HR.Trimmed />
<p className="text-gray-500 dark:text-gray-400">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
change.
</p>
</>
);
}Icon HR#
This example can be used to set a custom SVG icon in the middle of the HR element.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
import { HR } from "flowbite-react";
function Component() {
return (
<>
<p className="text-gray-500 dark:text-gray-400">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
data from other software development tools, so your IT support and operations teams have richer contextual
information to rapidly respond to requests, incidents, and changes.
</p>
<HR.Icon />
<p className="text-gray-500 dark:text-gray-400">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
change.
</p>
</>
);
}HR with Text#
Use this example to add a text in the middle of the HR component.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
or
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
import { HR } from "flowbite-react";
function Component() {
return (
<>
<p className="text-gray-500 dark:text-gray-400">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
data from other software development tools, so your IT support and operations teams have richer contextual
information to rapidly respond to requests, incidents, and changes.
</p>
<HR.Text text="or" />
<p className="text-gray-500 dark:text-gray-400">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
change.
</p>
</>
);
}HR Shape (square)#
This example can be used to separate content with an HR tag as a shape instead of a line.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
import { HR } from "flowbite-react";
function Component() {
return (
<>
<p className="text-gray-500 dark:text-gray-400">
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest
data from other software development tools, so your IT support and operations teams have richer contextual
information to rapidly respond to requests, incidents, and changes.
</p>
<HR.Square />
<p className="text-gray-500 dark:text-gray-400">
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate
critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every
change.
</p>
</>
);
}Theme#
To learn more about how to customize the appearance of components, please see the Theme docs.
{
"root": {
"base": "my-8 h-px border-0 bg-gray-200 dark:bg-gray-700"
},
"trimmed": {
"base": "mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 md:my-10 dark:bg-gray-700"
},
"icon": {
"base": "inline-flex w-full items-center justify-center",
"hrLine": "my-8 h-1 w-64 rounded border-0 bg-gray-200 dark:bg-gray-700",
"icon": {
"base": "absolute left-1/2 -translate-x-1/2 bg-white px-4 dark:bg-gray-900",
"icon": "h-4 w-4 text-gray-700 dark:text-gray-300"
}
},
"text": {
"base": "inline-flex w-full items-center justify-center",
"hrLine": "my-8 h-px w-64 border-0 bg-gray-200 dark:bg-gray-700",
"text": "absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-gray-900 dark:text-white"
},
"square": {
"base": "mx-auto my-8 h-8 w-8 rounded border-0 bg-gray-200 md:my-12 dark:bg-gray-700"
}
}