React JAM UI
Install
npm i react-jam-ui --save
For set custom theme need create ui.config.json file in root of project
Use Component
import 'Component' from 'react-jam-ui/components/{Component}
Components used React and stylus and you need build it with webpack loaders.
Docs: https://drzoom.gitlab.io/react-jam-ui/
docker build -t react-jam-ui . docker run -d -ti -p 8080:8080 -v {path}:/app --name react-jam-ui react-jam-ui
Example full config
{ "$breakpoints": { "xs": { "breakpoint": "480px", "width": "460px" }, "sm": { "breakpoint": "768px", "width": "750px" }, "md": { "breakpoint": "992px", "width": "970px" }, "xl": { "breakpoint": "1200px", "width": "1170px" }, "xxl": { "breakpoint": "1430px", "width": "1250px" } }, "$layout": { "color": "#000000", "bg": "#FFFFFF", "font-family": "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'", "font-size": "1rem", "link": { "default": "#0f90fd", "hover": "#0f6dbc" }, "p-gap": "20px" }, "$sizes": {// Sizes (Buttons, inputs) "default": {// size without size class, required! "height": "32px", "font-size": "14px" }, "xs": { "height": "20px", "font-size": "12px" }, "sm": { "height": "26px", "font-size": "14px" }, "lg": { "height": "38px", "font-size": "16px" }, "xl": { "height": "68px", "font-size": "18px" } }, "$grid": { "default": { "cols": 12, "gap": "15px" } }, "$buttons": { "default": { "theme": "flat", "default": { "bg": "#2085e4", "color": "#FFFFFF", "border": "1px solid #105799", "radius": "8px", "textShadow": "0px 1px 0px rgba(0, 0, 0, 0.4)" }, "hover": { "bg": "#186be7", "color": "#FFFFFF", "border": "1px solid #105799" }, "active": { "bg": "#004ab8", "color": "#FFFFFF", "border": "1px solid #105799" }, "disabled": { "bg": "#b8b8b8", "color": "#FFFFFF", "border": "1px solid #b8b8b8" } }, "other": { "theme": "flat", "default": { "bg": "none", "color": "#FFFFFF", "border": "2px solid #ff9000", "radius": "8px", "textShadow": "0px 1px 0px rgba(0, 0, 0, 0.4)" }, "hover": { "bg": "#ff9000", "color": "#FFFFFF", "border": "2px solid #ff9000" }, "active": { "bg": "#e17f00", "color": "#FFFFFF", "border": "2px solid #e17f00" }, "disabled": { "bg": "#b8b8b8", "color": "#FFFFFF", "border": "1px solid #b8b8b8" } } }, "$inputs": { "default": { "theme": "default", "default": { "bg": "#FFFFFF", "color": "#404040", "border": "#d0d0d0", "radius": "4px" }, "focus": { "bg": "#FFFFFF", "color": "#404040", "border": "#d0d0d0", "radius": "4px" }, "valid": { "bg": "lighten(#ebebeb, 20%)", "color": "#FF4040", "border": "red", "radius": "4px" }, "error": { "bg": "darken(#ebebeb, 20%)", "color": "#4040FF", "border": "red", "radius": "4px" } }, "material": { "theme": "material", "default": { "bg": "none", "color": "#5d5d5e", "border": "#c9c9c9", "radius": 0 }, "focus": { "bg": "none", "color": "#5d5d5e", "border": "#2085e4", "radius": 0 }, "valid": { "bg": "none", "color": "#5d5d5e", "border": "#87e057", "radius": 0 }, "error": { "bg": "none", "color": "#ff0000", "border": "#ff0000", "radius": 0 } } }, "$checkboxes": { "default": { "theme": "simple", "default": { "bg": "#FFFFFF", "color": "#83909D", "border": "#9BA3A9", "radius": "4px" }, "checked": { "bg": "#FFFFFF", "color": "#06213B", "border": "1px solid #21BAFA", "radius": "4px" } } }, "$radios": { "default": { "theme": "simple", "default": { "bg": "#FFFFFF", "color": "#83909D", "border-color": "#21BAFA" }, "checked": { "bg": "#FFFFFF", "color": "#06213B", "border-color": "#21BAFA" } } }, "$forms": { "gap": "20px", "hLabel": "200px", "labelGap": "5px" }, "$tooltips": { "default": { "theme": "default" } }, "$loaders": { "default": { "theme": "cube-grid", "color": "#2085e4" } }}