---
title: React Footer Component
name: Footer
description: 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.
menu: Components
route: /components/footer
other_frameworks: footer
---

import { CFooter, CLink } from '@coreui/react/src/index'

## Example

```jsx preview demo
<CFooter>
  <div>
    <CLink href="https://coreui.io">CoreUI</CLink>
    <span>&copy; 2024 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.

<ScssDocs file="_footer.scss" capture="footer-css-vars"/>

#### How to use CSS variables

```jsx
const vars = { 
  '--my-css-var': 10,
  '--my-another-css-var': "red" 
}
return <CFooter style={vars}>...</CFooter>
```

### SASS variables

<ScssDocs file="_variables.scss" capture="footer-variables"/>

## API

### CFooter

`markdown:CFooter.api.mdx`
