Add Components

docs/_react/bulma-customizer/src/pages/Colors.jsx

@@ -2,9 +2,11 @@ import Color from "../components/Color";
 
 const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
 
+import cn from "root/App.module.css";
+
 function Colors() {
   return (
-    <div>
+    <div className={cn.colors}>
       {COLORS.map((color) => {
         return <Color key={color} color={color} />;
       })}

docs/_react/bulma-customizer/src/pages/Generic.jsx

@@ -1,11 +1,13 @@
 import VarItem from "../components/VarItem";
 import { CSSVAR_KEYS } from "../constants";
 
+import cn from "root/App.module.css";
+
 function Generic() {
   const ids = CSSVAR_KEYS.generic.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/Other.jsx

@@ -1,11 +1,13 @@
 import VarItem from "../components/VarItem";
 import { CSSVAR_KEYS } from "../constants";
 
+import cn from "root/App.module.css";
+
 function Other() {
   const ids = CSSVAR_KEYS.other.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/Scheme.jsx

@@ -1,11 +1,13 @@
 import VarItem from "../components/VarItem";
 import { CSSVAR_KEYS } from "../constants";
 
+import cn from "root/App.module.css";
+
 function Scheme() {
   const schemeIds = CSSVAR_KEYS.scheme.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {schemeIds.map((schemeId) => {
         return <VarItem key={schemeId} id={schemeId} />;
       })}

docs/_react/bulma-customizer/src/pages/Skeleton.jsx

@@ -1,11 +1,13 @@
 import VarItem from "../components/VarItem";
 import { CSSVAR_KEYS } from "../constants";
 
+import cn from "root/App.module.css";
+
 function Skeleton() {
   const ids = CSSVAR_KEYS.skeleton.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/Typography.jsx

@@ -1,11 +1,13 @@
 import VarItem from "../components/VarItem";
 import { CSSVAR_KEYS } from "../constants";
 
+import cn from "root/App.module.css";
+
 function Typography() {
   const ids = CSSVAR_KEYS.typography.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/components/Breadcrumb.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Breadcrumb() {
+  const ids = CSSVAR_KEYS.breadcrumb.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Breadcrumb;

docs/_react/bulma-customizer/src/pages/components/Card.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Card() {
+  const ids = CSSVAR_KEYS.card.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Card;

docs/_react/bulma-customizer/src/pages/components/Dropdown.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Dropdown() {
+  const ids = CSSVAR_KEYS.dropdown.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Dropdown;

docs/_react/bulma-customizer/src/pages/components/Menu.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Menu() {
+  const ids = CSSVAR_KEYS.menu.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Menu;

docs/_react/bulma-customizer/src/pages/components/Message.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Message() {
+  const ids = CSSVAR_KEYS.message.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Message;

docs/_react/bulma-customizer/src/pages/components/Modal.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Modal() {
+  const ids = CSSVAR_KEYS.modal.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Modal;

docs/_react/bulma-customizer/src/pages/components/Navbar.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Navbar() {
+  const ids = CSSVAR_KEYS.navbar.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Navbar;

docs/_react/bulma-customizer/src/pages/components/Pagination.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Pagination() {
+  const ids = CSSVAR_KEYS.pagination.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Pagination;

docs/_react/bulma-customizer/src/pages/components/Panel.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Panel() {
+  const ids = CSSVAR_KEYS.panel.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Panel;

docs/_react/bulma-customizer/src/pages/components/Tabs.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Tabs() {
+  const ids = CSSVAR_KEYS.tabs.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Tabs;

docs/_react/bulma-customizer/src/pages/elements/Box.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Box() {
   const ids = CSSVAR_KEYS.box.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       <div className="box">I am in a box</div>
 
       {ids.map((id) => {

docs/_react/bulma-customizer/src/pages/elements/Content.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Content() {
   const ids = CSSVAR_KEYS.content.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/elements/Delete.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Delete() {
   const ids = CSSVAR_KEYS.delete.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/elements/Icon.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Icon() {
   const ids = CSSVAR_KEYS.icon.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/elements/Notification.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Notification() {
   const ids = CSSVAR_KEYS.notification.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/elements/Progress.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Progress() {
   const ids = CSSVAR_KEYS.progress.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/elements/Table.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Table() {
   const ids = CSSVAR_KEYS.table.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/elements/Tag.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Tag() {
   const ids = CSSVAR_KEYS.tag.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/elements/Title.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Title() {
   const ids = CSSVAR_KEYS.title.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/form/Control.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Control() {
   const ids = CSSVAR_KEYS.control.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/form/File.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function File() {
   const ids = CSSVAR_KEYS.file.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/form/Input.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Input() {
   const ids = CSSVAR_KEYS.input.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/grid/Columns.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Columns() {
   const ids = CSSVAR_KEYS.columns.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/grid/Grid.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Grid() {
   const ids = CSSVAR_KEYS.grid.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/layout/Footer.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Footer() {
   const ids = CSSVAR_KEYS.footer.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/layout/Hero.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Hero() {
   const ids = CSSVAR_KEYS.hero.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/layout/Media.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Media() {
   const ids = CSSVAR_KEYS.media.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}

docs/_react/bulma-customizer/src/pages/layout/Section.jsx

@@ -1,11 +1,13 @@
 import VarItem from "components/VarItem";
 import { CSSVAR_KEYS } from "root/constants";
 
+import cn from "root/App.module.css";
+
 function Section() {
   const ids = CSSVAR_KEYS.section.map((i) => i.id);
 
   return (
-    <div>
+    <div className={cn.items}>
       {ids.map((id) => {
         return <VarItem key={id} id={id} />;
       })}