React footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
Available in Other JavaScript Frameworks
CoreUI React Footer Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:
On this page
Example
<CFooter>
<div>
<CLink href="https://coreui.io">CoreUI</CLink>
<span>© 2026 creativeLabs.</span>
</div>
<div>
<span>Powered by</span>
<CLink href="https://coreui.io">CoreUI</CLink>
</div>
</CFooter>Customizing
CSS variables
React footers use local CSS variables on .footer for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--cui-footer-min-height: #{$footer-min-height};
--cui-footer-padding-x: #{$footer-padding-x};
--cui-footer-padding-y: #{$footer-padding-y};
--cui-footer-color: #{$footer-color};
--cui-footer-bg: #{$footer-bg};
--cui-footer-border-color: #{$footer-border-color};
--cui-footer-border: #{$footer-border-width} solid var(--cui-footer-border-color);How to use CSS variables
const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
return <CFooter style={vars}>...</CFooter>SASS variables
$footer-min-height: 3rem !default;
$footer-padding-y: $spacer * .5 !default;
$footer-padding-x: $spacer !default;
$footer-bg: var(--cui-tertiary-bg) !default;
$footer-color: var(--cui-body-color) !default;
$footer-border-width: var(--cui-border-width) !default;
$footer-border-color: var(--cui-border-color) !default;API
CFooter
import { CFooter } from '@coreui/react-pro'