diff --git a/examples/react/css/src/App.tsx b/examples/react/css/src/App.tsx
index 88086c3125..1a4fbd2e5d 100644
--- a/examples/react/css/src/App.tsx
+++ b/examples/react/css/src/App.tsx
@@ -45,7 +45,7 @@ export function App() {
       </header>
       <div className="container two-columns">
         <div className="left-column">
-          <Panel header="categories">
+          <Panel header="categories" footer="This is a footer">
             <HierarchicalMenu
               attributes={[
                 'hierarchicalCategories.lvl0',
diff --git a/examples/react/css/src/Panel.tsx b/examples/react/css/src/Panel.tsx
index bbff1e71fa..474f2adb36 100644
--- a/examples/react/css/src/Panel.tsx
+++ b/examples/react/css/src/Panel.tsx
@@ -1,16 +1,20 @@
 import React from 'react';
 
 type PanelProps = React.PropsWithChildren<{
-  header: string;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
 }>;
 
-export function Panel({ header, children }: PanelProps) {
+export function Panel({ header, children, footer }: PanelProps) {
   return (
     <div className="ais-Panel">
-      <div className="ais-Panel-header">
-        <span>{header}</span>
-      </div>
+      {Boolean(header) && (
+        <div className="ais-Panel-header">
+          <span>{header}</span>
+        </div>
+      )}
       <div className="ais-Panel-body">{children}</div>
+      {Boolean(footer) && <div className="ais-Panel-footer">{footer}</div>}
     </div>
   );
 }
diff --git a/examples/react/css/src/algolia.css b/examples/react/css/src/algolia.css
index 07aec7c1de..677a597016 100644
--- a/examples/react/css/src/algolia.css
+++ b/examples/react/css/src/algolia.css
@@ -7,3 +7,4 @@
 @import url('searchbox.css');
 @import url('hierarchical-menu.css');
 @import url('refinement-list.css');
+@import url('panel.css');
diff --git a/examples/react/css/src/panel.css b/examples/react/css/src/panel.css
new file mode 100644
index 0000000000..12bd1ce406
--- /dev/null
+++ b/examples/react/css/src/panel.css
@@ -0,0 +1,15 @@
+.ais-Panel-header {
+  display: flex;
+  align-items: center;
+  padding: var(--ais-spacing);
+  border-bottom: 1px solid
+    rgba(var(--ais-border-color-rgb), var(--ais-border-color-alpha));
+  margin-bottom: var(--ais-spacing);
+  font-weight: var(--ais-font-weight-medium);
+  text-transform: capitalize;
+}
+
+.ais-Panel-footer {
+  margin-top: calc(var(--ais-spacing) * 0.5);
+  font-size: 0.9em;
+}