diff --git a/packages/docs/content/blocks/assets/images/brand/coreui-signet.svg b/packages/docs/content/blocks/assets/images/brand/coreui-signet.svg
new file mode 100755
index 00000000..6c49210b
--- /dev/null
+++ b/packages/docs/content/blocks/assets/images/brand/coreui-signet.svg
@@ -0,0 +1,11 @@
+
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="102px" height="116px" viewBox="0 0 102 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Untitled 3</title>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="coreui-signet" fill="#3C4B64" fill-rule="nonzero">
+ <path d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z" id="Shape"></path>
+ <path d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z" id="Path"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/docs/content/blocks/footers.mdx b/packages/docs/content/blocks/footers.mdx
new file mode 100644
index 00000000..931d6b08
--- /dev/null
+++ b/packages/docs/content/blocks/footers.mdx
@@ -0,0 +1,34 @@
+---
+title: CoreUI React.js Footers
+name: Footers
+description: Use these CoreUI footer examples, built with CoreUI and CoreUI UI React Components, to add valuable information at the bottom of each page. Include a sitemap to enhance site navigation, links to your social media profiles, or a newsletter sign-up form. These examples, crafted by the CoreUI team, showcase various styles and layouts to fit your needs.
+full_width: true
+---
+
+import { default as Footer1 } from './footers/FreeFooter1.tsx'
+import { default as Footer1Src } from '!raw-loader!./footers/FreeFooter1.tsx'
+
+<Block className="p-0" code={Footer1Src} title="5-column with company mission and socials">
+ <Footer1 />
+</Block>
+
+import { default as Footer2 } from './footers/FreeFooter2.tsx'
+import { default as Footer2Src } from '!raw-loader!./footers/FreeFooter2.tsx'
+
+<Block className="p-0 overflow-hidden" code={Footer2Src} title="5-column with company mission and socials">
+ <Footer2 />
+</Block>
+
+import { default as Footer3 } from './footers/ProFooter1.tsx'
+import { default as Footer3Src } from '!raw-loader!./footers/ProFooter1.tsx'
+
+<Block className="p-0" code={Footer3Src} pro title="5-column with company mission, newsletter, and socials">
+ <Footer3 />
+</Block>
+
+import { default as Footer4 } from './footers/ProFooter2.tsx'
+import { default as Footer4Src } from '!raw-loader!./footers/ProFooter2.tsx'
+
+<Block className="p-0" code={Footer4Src} pro title="5-column with company mission, newsletter, and socials">
+ <Footer4 />
+</Block>
diff --git a/packages/docs/content/blocks/footers/FreeFooter1.tsx b/packages/docs/content/blocks/footers/FreeFooter1.tsx
new file mode 100644
index 00000000..3cb609d5
--- /dev/null
+++ b/packages/docs/content/blocks/footers/FreeFooter1.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CCol, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg'
+
+export default function FreeFooter1() {
+ console.log(CoreUISignetImg)
+ return (
+ <div className="p-5">
+ <CRow className="py-3">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Consulting</li>
+ <li className="py-1">Analytics</li>
+ <li className="py-1">Development</li>
+ <li className="py-1">Design</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <hr />
+ <div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/footers/FreeFooter2.tsx b/packages/docs/content/blocks/footers/FreeFooter2.tsx
new file mode 100644
index 00000000..3d5c2c5d
--- /dev/null
+++ b/packages/docs/content/blocks/footers/FreeFooter2.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CCol, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg'
+
+export default function FreeFooter2() {
+ return (
+ <div>
+ <CRow className="p-5">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <div className="d-flex flex-wrap align-items-center gap-3 bg-body-tertiary text-body-secondary py-4 px-5">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/footers/ProFooter1.tsx b/packages/docs/content/blocks/footers/ProFooter1.tsx
new file mode 100644
index 00000000..3cc06ddf
--- /dev/null
+++ b/packages/docs/content/blocks/footers/ProFooter1.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CButton, CCol, CForm, CFormInput, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg'
+
+export default function ProFooter1() {
+ return (
+ <div className="p-5">
+ <CRow className="py-3">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <hr />
+ <div className="d-flex align-items-center py-3">
+ <div className="me-auto">
+ <h3 className="fs-6 fw-semibold">Join our newsletter</h3>
+ <div className="small text-body-secondary">
+ Get the most recent news, articles, and resources delivered to your inbox every week.
+ </div>
+ </div>
+ <CForm className="row g-3">
+ <CCol xs="auto">
+ <CFormInput
+ type="email"
+ id="newsletter"
+ placeholder="Enter your email"
+ aria-describedby="exampleFormControlInputHelpInline"
+ />
+ </CCol>
+ <CCol xs="auto">
+ <CButton color="primary" type="submit">
+ Subscribe
+ </CButton>
+ </CCol>
+ </CForm>
+ </div>
+ <hr />
+ <div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/footers/ProFooter2.tsx b/packages/docs/content/blocks/footers/ProFooter2.tsx
new file mode 100644
index 00000000..440bc650
--- /dev/null
+++ b/packages/docs/content/blocks/footers/ProFooter2.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CButton, CCol, CForm, CFormInput, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg'
+
+export default function ProFooter2() {
+ return (
+ <div>
+ <CRow className="p-5">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <div className="d-flex align-items-center bg-body-tertiary py-4 px-5">
+ <div className="me-auto">
+ <h3 className="fs-6 fw-semibold">Join our newsletter</h3>
+ <div className="small text-body-secondary">
+ Get the most recent news, articles, and resources delivered to your inbox every week.
+ </div>
+ </div>
+ <CForm className="row g-3">
+ <CCol xs="auto">
+ <CFormInput
+ type="email"
+ id="newsletter"
+ placeholder="Enter your email"
+ aria-describedby="exampleFormControlInputHelpInline"
+ />
+ </CCol>
+ <CCol xs="auto">
+ <CButton color="primary" type="submit">
+ Subscribe
+ </CButton>
+ </CCol>
+ </CForm>
+ </div>
+ <div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-4 px-5">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/paginations.mdx b/packages/docs/content/blocks/paginations.mdx
new file mode 100644
index 00000000..76aeee84
--- /dev/null
+++ b/packages/docs/content/blocks/paginations.mdx
@@ -0,0 +1,13 @@
+---
+title: CoreUI React Pagination
+name: Pagination
+description: Use these CoreUI pagination components to add page navigation controls to your application's resource pages, featuring page numbers, next/previous buttons, and ellipses for handling large amounts of pages. These components are built with CoreUI and CoreUI UI React Components, and include a variety of different styles and layouts to fit your needs.
+full_width: true
+---
+
+import { default as FreePagination1 } from './paginations/FreePagination1.tsx'
+import { default as FreePagination1Src } from '!raw-loader!./paginations/FreePagination1.tsx'
+
+<Block className="bg-body-tertiary" code={FreePagination1Src} title="Card footer with pagination">
+ <FreePagination1 />
+</Block>
diff --git a/packages/docs/content/blocks/paginations/FreePagination1.tsx b/packages/docs/content/blocks/paginations/FreePagination1.tsx
new file mode 100644
index 00000000..5905d040
--- /dev/null
+++ b/packages/docs/content/blocks/paginations/FreePagination1.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import {
+ CCard,
+ CCardFooter,
+ CListGroup,
+ CListGroupItem,
+ CPagination,
+ CPaginationItem,
+} from '@coreui/react'
+
+export default function FreePagination1() {
+ return (
+ <CCard className="mx-auto" style={{ maxWidth: '50rem' }}>
+ <CListGroup flush className="opacity-25">
+ <CListGroupItem>1. Cras justo odio</CListGroupItem>
+ <CListGroupItem>2. Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>...</CListGroupItem>
+ <CListGroupItem>...</CListGroupItem>
+ <CListGroupItem>...</CListGroupItem>
+ <CListGroupItem>10. Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ <CCardFooter className="d-flex align-items-center">
+ <div className="small text-secondary me-auto">Showing 1 to 10 of 200 results</div>
+ <CPagination className="mb-0" aria-label="Page navigation example">
+ <CPaginationItem aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </CPaginationItem>
+ <CPaginationItem>1</CPaginationItem>
+ <CPaginationItem>2</CPaginationItem>
+ <CPaginationItem>3</CPaginationItem>
+ <CPaginationItem>...</CPaginationItem>
+ <CPaginationItem>18</CPaginationItem>
+ <CPaginationItem>19</CPaginationItem>
+ <CPaginationItem>20</CPaginationItem>
+ <CPaginationItem aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </CPaginationItem>
+ </CPagination>
+ </CCardFooter>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats.mdx b/packages/docs/content/blocks/stats.mdx
new file mode 100644
index 00000000..422bc104
--- /dev/null
+++ b/packages/docs/content/blocks/stats.mdx
@@ -0,0 +1,34 @@
+---
+title: CoreUI React Stats
+name: Stats
+description: Use these CoreUI stats components to display key metrics and data insights on your application's dashboard. Featuring various layouts and styles, these components help you present statistics, progress indicators, and performance summaries effectively. Built with CoreUI and CoreUI UI React Components, these stats modules are designed to seamlessly integrate with your application’s interface.
+full_width: true
+---
+
+import { default as Stats1 } from './stats/FreeStats1.tsx'
+import { default as Stats1Src } from '!raw-loader!./stats/FreeStats1.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats1Src} title="Primary card with data and chart">
+ <Stats1 />
+</Block>
+
+import { default as Stats2 } from './stats/FreeStats2.tsx'
+import { default as Stats2Src } from '!raw-loader!./stats/FreeStats2.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats2Src} title="Info card with data and chart">
+ <Stats2 />
+</Block>
+
+import { default as Stats3 } from './stats/FreeStats3.tsx'
+import { default as Stats3Src } from '!raw-loader!./stats/FreeStats3.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats3Src} title="Warning card with data and chart">
+ <Stats3 />
+</Block>
+
+import { default as Stats4 } from './stats/FreeStats4.tsx'
+import { default as Stats4Src } from '!raw-loader!./stats/FreeStats4.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats4Src} title="Danger card with data and chart">
+ <Stats4 />
+</Block>
diff --git a/packages/docs/content/blocks/stats/FreeStats1.tsx b/packages/docs/content/blocks/stats/FreeStats1.tsx
new file mode 100644
index 00000000..4d836102
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats1.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export default function FreeStats1() {
+ return (
+ <CCard className="mx-auto" color="primary" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartLine
+ className="mt-3 mx-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'transparent',
+ borderColor: 'rgba(255,255,255,.55)',
+ pointBackgroundColor: '#5856d6',
+ data: [65, 59, 84, 84, 51, 55, 40],
+ },
+ ],
+ }}
+ options={{
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ border: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ y: {
+ min: 30,
+ max: 89,
+ display: false,
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ },
+ elements: {
+ line: {
+ borderWidth: 1,
+ tension: 0.4,
+ },
+ point: {
+ radius: 4,
+ hitRadius: 10,
+ hoverRadius: 4,
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats/FreeStats2.tsx b/packages/docs/content/blocks/stats/FreeStats2.tsx
new file mode 100644
index 00000000..2e5d723b
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats2.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export default function FreeStats2() {
+ return (
+ <CCard className="mx-auto" color="info" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartLine
+ className="mt-3 mx-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'transparent',
+ borderColor: 'rgba(255,255,255,.55)',
+ pointBackgroundColor: '#39f',
+ data: [1, 18, 9, 17, 34, 22, 11],
+ },
+ ],
+ }}
+ options={{
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ border: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ y: {
+ min: -9,
+ max: 39,
+ display: false,
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ },
+ elements: {
+ line: {
+ borderWidth: 1,
+ },
+ point: {
+ radius: 4,
+ hitRadius: 10,
+ hoverRadius: 4,
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats/FreeStats3.tsx b/packages/docs/content/blocks/stats/FreeStats3.tsx
new file mode 100644
index 00000000..e5628d6e
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats3.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export default function FreeStats3() {
+ return (
+ <CCard className="mx-auto" color="warning" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartLine
+ className="mt-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(255,255,255,.2)',
+ borderColor: 'rgba(255,255,255,.55)',
+ data: [78, 81, 80, 45, 34, 12, 40],
+ fill: true,
+ },
+ ],
+ }}
+ options={{
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ display: false,
+ },
+ y: {
+ display: false,
+ },
+ },
+ elements: {
+ line: {
+ borderWidth: 2,
+ tension: 0.4,
+ },
+ point: {
+ radius: 0,
+ hitRadius: 10,
+ hoverRadius: 4,
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats/FreeStats4.tsx b/packages/docs/content/blocks/stats/FreeStats4.tsx
new file mode 100644
index 00000000..a2bca4ad
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats4.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartBar } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react'
+
+export default function FreeStats4() {
+ return (
+ <CCard className="mx-auto" color="danger" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartBar
+ className="mt-3 mx-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ ],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(255,255,255,.2)',
+ borderColor: 'rgba(255,255,255,.55)',
+ data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
+ barPercentage: 0.6,
+ },
+ ],
+ }}
+ options={{
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ display: false,
+ drawTicks: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ y: {
+ border: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ drawTicks: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/src/assets/images/brand/coreui-react.svg b/packages/docs/src/assets/images/brand/coreui-react.svg
new file mode 100755
index 00000000..00738947
--- /dev/null
+++ b/packages/docs/src/assets/images/brand/coreui-react.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 134">
+ <g>
+ <g fill="#00a1ff">
+ <path d="M361.773,90.1513,353.0054,69.415a.25.25,0,0,0-.2558-.1914h-9.9844a.2263.2263,0,0,0-.2559.2558v20.543a.5659.5659,0,0,1-.64.6406h-1.2163a.5654.5654,0,0,1-.64-.6406v-43.52a.5656.5656,0,0,1,.64-.64h12.5444a9.9785,9.9785,0,0,1,7.7437,3.2315,12.2042,12.2042,0,0,1,2.9443,8.5449,12.4389,12.4389,0,0,1-2.24,7.584,9.3707,9.3707,0,0,1-6.08,3.7441c-.1709.0859-.2139.1914-.1279.3193l8.7041,20.6084.0639.2559c0,.3418-.1919.5117-.5757.5117h-1.1523A.7029.7029,0,0,1,361.773,90.1513Zm-19.2637-41.793V66.8544a.2263.2263,0,0,0,.2559.2569h10.3037a7.6687,7.6687,0,0,0,6.0166-2.5928,9.878,9.878,0,0,0,2.3037-6.8154,10.2858,10.2858,0,0,0-2.272-6.9756,7.601,7.601,0,0,0-6.0483-2.625H342.7652A.2263.2263,0,0,0,342.5093,48.3583Z"/>
+ <path d="M401.0816,48.1025H381.05a.2263.2263,0,0,0-.2559.2558V66.8544a.2263.2263,0,0,0,.2559.2569h13.8237a.5663.5663,0,0,1,.6406.64v.96a.566.566,0,0,1-.6406.64H381.05a.2263.2263,0,0,0-.2559.2559V88.1669a.2259.2259,0,0,0,.2559.2559h20.0317a.567.567,0,0,1,.6406.6406v.959a.5663.5663,0,0,1-.6406.6406H378.938a.5656.5656,0,0,1-.64-.6406v-43.52a.5657.5657,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.566.566,0,0,1,401.0816,48.1025Z"/>
+ <path d="M438.8023,90.1513l-2.4316-8.832a.2962.2962,0,0,0-.32-.1924H419.2828a.2946.2946,0,0,0-.32.1924l-2.3682,8.7676a.6576.6576,0,0,1-.7036.5761h-1.2163a.5883.5883,0,0,1-.4795-.1914.5822.5822,0,0,1-.0962-.5127L426.13,46.3749a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1924c0,.3418-.2138.5117-.64.5117h-1.2163A.6428.6428,0,0,1,438.8023,90.1513ZM419.6988,78.9189a.3026.3026,0,0,0,.2236.0957h15.4883a.3039.3039,0,0,0,.2236-.0957c.0645-.0645.0742-.1172.0323-.16L427.7945,49.831c-.043-.085-.086-.1279-.1279-.1279s-.086.0429-.128.1279l-7.872,28.9277C419.6236,78.8017,419.6343,78.8544,419.6988,78.9189Z"/>
+ <path d="M456.357,87.9111a11.6374,11.6374,0,0,1-3.3277-8.7041V57.19a11.4135,11.4135,0,0,1,3.36-8.5752,12.0908,12.0908,0,0,1,8.8-3.2647,12.2528,12.2528,0,0,1,8.8643,3.2324,11.3906,11.3906,0,0,1,3.36,8.6075v.6406a.5663.5663,0,0,1-.6406.6406l-1.28.0635q-.6408,0-.64-.5762v-.832a9.2874,9.2874,0,0,0-2.6558-6.9121,10.67,10.67,0,0,0-14.0161,0,9.2838,9.2838,0,0,0-2.6562,6.9121V79.3994a9.2824,9.2824,0,0,0,2.6562,6.9121,10.6734,10.6734,0,0,0,14.0161,0,9.286,9.286,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5663.5663,0,0,1,.6406.64V79.27a11.4976,11.4976,0,0,1-3.36,8.6407,13.6262,13.6262,0,0,1-17.6963,0Z"/>
+ <path d="M514.1929,46.5029v.96a.5655.5655,0,0,1-.64.64h-10.752a.2262.2262,0,0,0-.2558.2558V90.0224a.5663.5663,0,0,1-.6407.6406H500.689a.5654.5654,0,0,1-.64-.6406V48.3583a.2267.2267,0,0,0-.2559-.2558H489.6172a.5653.5653,0,0,1-.64-.64v-.96a.5657.5657,0,0,1,.64-.64h23.9361A.5659.5659,0,0,1,514.1929,46.5029Z"/>
+ <path d="M521.8218,89.5107a2.8346,2.8346,0,0,1-.8-2.0479,2.9233,2.9233,0,0,1,.8-2.1123,2.7577,2.7577,0,0,1,2.08-.832,2.8467,2.8467,0,0,1,2.9439,2.9443,2.7544,2.7544,0,0,1-.8321,2.08,2.9213,2.9213,0,0,1-2.1118.8A2.754,2.754,0,0,1,521.8218,89.5107Z"/>
+ <path d="M542.1607,88.0068a11.3094,11.3094,0,0,1-3.2-8.416V74.1513a.5663.5663,0,0,1,.64-.6406h1.2159a.5667.5667,0,0,1,.64.6406v5.5039a9.1437,9.1437,0,0,0,2.5283,6.72,8.9735,8.9735,0,0,0,6.6875,2.56,8.7894,8.7894,0,0,0,9.28-9.2793V46.5029a.5655.5655,0,0,1,.64-.64h1.2163a.5661.5661,0,0,1,.64.64V79.5908a11.2516,11.2516,0,0,1-3.2324,8.416,13.0622,13.0622,0,0,1-17.0557,0Z"/>
+ <path d="M580.1055,88.1025a10.4824,10.4824,0,0,1-3.36-8.127V78.1826a.5655.5655,0,0,1,.64-.64h1.0884a.566.566,0,0,1,.64.64v1.6005a8.5438,8.5438,0,0,0,2.752,6.6553,10.5357,10.5357,0,0,0,7.36,2.4961,9.8761,9.8761,0,0,0,6.9761-2.3672,8.2153,8.2153,0,0,0,2.56-6.3359,8.3974,8.3974,0,0,0-1.12-4.416,11.3828,11.3828,0,0,0-3.3282-3.3926,71.6257,71.6257,0,0,0-6.1762-3.7119,71.3024,71.3024,0,0,1-6.24-3.84,12.174,12.174,0,0,1-3.4238-3.6806,10.2567,10.2567,0,0,1-1.28-5.3438,9.8592,9.8592,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6953,0,8.96,3.1045a10.8233,10.8233,0,0,1,3.2641,8.2236v1.6006a.5658.5658,0,0,1-.64.64h-1.1519a.5653.5653,0,0,1-.64-.64V56.8076a8.8646,8.8646,0,0,0-2.624-6.6885,9.9938,9.9938,0,0,0-7.232-2.5283,9.3654,9.3654,0,0,0-6.5278,2.1445,7.8216,7.8216,0,0,0-2.3682,6.1113,7.8007,7.8007,0,0,0,1.0245,4.16,10.3761,10.3761,0,0,0,3.0078,3.04,62.8289,62.8289,0,0,0,5.9521,3.4883,71.0575,71.0575,0,0,1,6.72,4.2559,13.4537,13.4537,0,0,1,3.648,3.9365,10.0487,10.0487,0,0,1,1.28,5.1836,10.7141,10.7141,0,0,1-3.2637,8.1914q-3.2637,3.0732-8.832,3.0722Q583.4649,91.1747,580.1055,88.1025Z"/>
+ </g>
+ <g fill="var(--cui-body-color, currentColor)">
+ <g>
+ <path d="M99.59,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0337,12.0337,0,0,0-6,10.3924V91.4833a12.0331,12.0331,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V46.45A12.0336,12.0336,0,0,0,99.59,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
+ <path d="M77.612,82.0046H74.746a4.001,4.001,0,0,0-1.9247.4934L55.5406,91.9833,35.59,80.4648V57.4872L55.54,45.9687l17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.3833,38.9521a8.0389,8.0389,0,0,0-7.8427.09L31.59,50.56a8.0245,8.0245,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0427,8.0427,0,0,0,7.8432.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.612,82.0046Z"/>
+ </g>
+ <g>
+ <path d="M172.3351,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.3351,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
+ <path d="M135.6692,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9892.9892,0,0,0,.9842.865h6.03a1.0109,1.0109,0,0,0,.9988-1.0971,15.0183,15.0183,0,0,0-15.7162-13.8837A15.2881,15.2881,0,0,0,121.59,60.7968V77.2037A15.288,15.288,0,0,0,135.8346,92.62a15.0184,15.0184,0,0,0,15.7162-13.8842,1.0109,1.0109,0,0,0-.9988-1.0971h-6.03a.9892.9892,0,0,0-.9842.865,7.0106,7.0106,0,0,1-7.868,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.6692,53.4211Z"/>
+ <path d="M218.5125,72.9277a12.1584,12.1584,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.5474,46H196.59a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6215l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5912a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.5479,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
+ <path d="M260.59,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.59,46Z"/>
+ <path d="M298.59,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.59,46Z"/>
+ <rect x="307.5904" y="46" width="8" height="38" rx="1"/>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/docs/src/components/Block.tsx b/packages/docs/src/components/Block.tsx
new file mode 100644
index 00000000..c07f3836
--- /dev/null
+++ b/packages/docs/src/components/Block.tsx
@@ -0,0 +1,99 @@
+import React, { FC, ReactNode } from 'react'
+import { Highlight } from 'prism-react-renderer'
+import { cilClone, cilCode, cilMediaPlay } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs, CTooltip } from '@coreui/react'
+
+interface BlockProps {
+ children: ReactNode
+ className?: string
+ code?: string
+ pro?: boolean
+ title?: string
+}
+
+const Block: FC<BlockProps> = ({ children, className, code, pro, title, ...rest }) => {
+ return pro ? (
+ <>
+ <div className="d-flex align-items-baseline">
+ <h2 className="fs-5 mb-4 me-auto">{title}</h2>
+ <a
+ className="link-primary link-underline link-underline-opacity-0 fw-semibold"
+ href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=blocks"
+ >
+ Get the code →
+ </a>
+ </div>
+ <div
+ className={`docs-block mb-5 ${className} ${className && className.includes('p-') ? '' : 'p-3'}`}
+ {...rest}
+ >
+ {children}
+ </div>
+ </>
+ ) : (
+ <CTabs activeItemKey="preview" className="mb-5">
+ <div className="d-flex align-items-baseline mb-3">
+ <h2 className="fs-5 me-auto">{title}</h2>
+ <div className="actions d-flex flex-nowrap">
+ <CTabList className="tabs-blocks flex-nowrap">
+ <CTab className="flex-nowrap" itemKey="preview">
+ <CIcon icon={cilMediaPlay} className="me-2" /> Preview
+ </CTab>
+ <CTab className="flex-nowrap" itemKey="code">
+ <CIcon icon={cilCode} className="me-2" />
+ Code
+ </CTab>
+ </CTabList>
+ <div
+ className="d-flex vr mx-4 my-auto text-body text-opacity-75"
+ style={{ height: '1.5rem' }}
+ ></div>
+ <CTooltip content="Copied!" placement="top" trigger={['click', 'focus']}>
+ <button
+ className="btn-clipboard"
+ onClick={() => {
+ code && navigator.clipboard.writeText(code)
+ }}
+ >
+ <CIcon icon={cilClone} />
+ </button>
+ </CTooltip>
+ </div>
+ </div>
+ <CTabContent>
+ <CTabPanel itemKey="preview">
+ <div
+ className={`docs-block ${className} ${className && className.includes('p-') ? '' : 'p-3'}`}
+ {...rest}
+ >
+ {children}
+ </div>
+ </CTabPanel>
+ {code && (
+ <CTabPanel itemKey="code">
+ <div className="highlight blocks">
+ <Highlight code={code?.trim()} language="tsx" theme={{ plain: {}, styles: [] }}>
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+ <pre className={className} style={{ ...style }}>
+ {tokens.map((line, i) => (
+ <div key={i} {...getLineProps({ line, key: i })}>
+ {line.map((token, key) => (
+ <span key={key} {...getTokenProps({ token, key })} />
+ ))}
+ </div>
+ ))}
+ </pre>
+ )}
+ </Highlight>
+ </div>
+ </CTabPanel>
+ )}
+ </CTabContent>
+ </CTabs>
+ )
+}
+
+Block.displayName = 'Block'
+
+export default Block
diff --git a/packages/docs/src/components/Footer.tsx b/packages/docs/src/components/Footer.tsx
index d5282cff..7dbdbc96 100644
--- a/packages/docs/src/components/Footer.tsx
+++ b/packages/docs/src/components/Footer.tsx
@@ -34,7 +34,10 @@ const Footer: FC = () => {
.{' '}
<strong>
CoreUI PRO requires a{' '}
- <a href="https://coreui.io/pricing/?framework=react&docs=footer">commercial license</a>.
+ <a href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=footer">
+ commercial license
+ </a>
+ .
</strong>
</p>
</CContainer>
diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx
index 9b13856d..ba39ffbd 100644
--- a/packages/docs/src/components/Header.tsx
+++ b/packages/docs/src/components/Header.tsx
@@ -137,7 +137,7 @@ const Header = forwardRef<HTMLDivElement>(({}, ref) => {
<CButton
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
color="primary"
- href="https://coreui.io/pricing/?framework=react&docs=coreui-header-button"
+ href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=coreui-header-button"
>
Get CoreUI PRO
</CButton>
diff --git a/packages/docs/src/components/index.ts b/packages/docs/src/components/index.ts
index 3770af70..f08fd420 100644
--- a/packages/docs/src/components/index.ts
+++ b/packages/docs/src/components/index.ts
@@ -1,5 +1,6 @@
import Ads from './Ads'
import Banner from './Banner'
+import Block from './Block'
import Callout from './Callout'
import CodeBlock from './CodeBlock'
import ClassNamesDocs from './ClassNamesDocs'
@@ -18,6 +19,7 @@ import Toc from './Toc'
export {
Ads,
Banner,
+ Block,
Callout,
CodeBlock,
ClassNamesDocs,
diff --git a/packages/docs/src/nav.tsx b/packages/docs/src/nav.tsx
index 6aebda1d..41115706 100644
--- a/packages/docs/src/nav.tsx
+++ b/packages/docs/src/nav.tsx
@@ -315,6 +315,35 @@ const nav = [
},
],
},
+ {
+ name: 'Blocks',
+ to: '/blocks/',
+ icon: (
+ <CIcon
+ customClassName="nav-icon text-primary"
+ icon={[
+ '512 512',
+ "<path fill='var(--ci-primary-color, currentColor)' d='M16,496H200V312H16ZM48,344H168V464H48Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M16,248H200V64H16ZM48,96H168V216H48Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M272,496H456V312H272Zm32-152H424V464H304Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M493.588,156.52,363.48,26.411,233.373,156.52,363.48,286.628ZM363.48,71.667l84.853,84.853L363.48,241.372,278.627,156.52Z' class='ci-primary'/>",
+ ]}
+ width={64}
+ height={64}
+ />
+ ),
+ items: [
+ {
+ name: 'Footers',
+ to: '/blocks/footers/',
+ },
+ {
+ name: 'Paginations',
+ to: '/blocks/paginations/',
+ },
+ {
+ name: 'Stats',
+ to: '/blocks/stats/',
+ },
+ ],
+ },
{
name: 'Templates',
to: '/templates/',
diff --git a/packages/docs/src/styles/_block.scss b/packages/docs/src/styles/_block.scss
new file mode 100644
index 00000000..a4e853bb
--- /dev/null
+++ b/packages/docs/src/styles/_block.scss
@@ -0,0 +1,50 @@
+@use "@coreui/coreui/scss/mixins/border-radius" as *;
+@use "@coreui/coreui/scss/variables" as *;
+
+.docs-block {
+ border: 1px solid var(--#{$prefix}border-color);
+ @include border-radius(var(--#{$prefix}border-radius));
+}
+
+.tabs-blocks {
+ display: inline-flex;
+ flex-wrap: nowrap;
+ background-color: var(--#{$prefix}secondary-bg);
+ padding: .125rem;
+ border-radius: var(--#{$prefix}border-radius);
+ gap: .125rem;
+
+ .nav-link {
+ padding: .375rem .75rem;
+ color: var(--#{$prefix}body-color);
+ white-space: nowrap;
+
+ &.active .icon {
+ color: var(--#{$prefix}primary);
+ }
+
+ &.active,
+ &:hover {
+ background-color: var(--#{$prefix}body-bg);
+ border-radius: var(--#{$prefix}border-radius-sm);
+ }
+ }
+}
+
+.btn-clipboard {
+ display: block;
+ padding: 0;
+ line-height: 1;
+ color: var(--cui-body-color);
+ background-color: transparent;
+ border: 0;
+ @include border-radius(.25rem);
+
+ &:hover {
+ color: var(--#{$prefix}primary);
+ }
+}
+
+.highlight.blocks pre {
+ max-height: initial !important;
+}
diff --git a/packages/docs/src/styles/styles.scss b/packages/docs/src/styles/styles.scss
index 40a7a1dd..d0b4c9f5 100644
--- a/packages/docs/src/styles/styles.scss
+++ b/packages/docs/src/styles/styles.scss
@@ -9,6 +9,7 @@
@forward "root";
@forward "ads";
@forward "anchor";
+@forward "block";
@forward "callouts";
@forward "component-examples";
@forward "component-sub-nav";
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
index 00aa6f11..a8895730 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo } from 'react'
import { graphql, PageProps } from 'gatsby'
import { MDXProvider } from '@mdx-js/react'
import {
+ Block,
Callout,
CodeBlock,
ClassNamesDocs,
@@ -50,6 +51,11 @@ interface Toc {
const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
const components = useMemo(
() => ({
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ Block: (props: any) => {
+ const { children, ...rest } = props
+ return <Block {...rest}>{children}</Block>
+ },
Callout: (props: CalloutProps) => {
const { children, title, ...rest } = props
return (
@@ -83,7 +89,7 @@ const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
</div>
),
}),
- [],
+ []
)
return <MDXProvider components={components}>{children}</MDXProvider>
}