Import any component from 'base-elements-react'.
'base-elements-react'
Import css file separately
import React, { Component } from 'react' import Button from 'base-elements-react' import 'base-elements-react/dist/index.css' class Example extends Component { render() { return <Button>Click Here<Button> } }
Use custom themes by wrapping components with ThemeWrapper.
ThemeWrapper
You can pass theme jsons to ThemeWrapper component.
The theme json creates css variables on your root element. These variables are then referred throughout the library.
These css variables do not replace existing root variables. So if required css variables are already set in the root element, then this approach can be skipped.
import React from 'react'; import 'base-elements-react/dist/index.css'; import { Button, ThemeWrapper } from 'base-elements-react/dist'; const themes = [ { id: 'light', vars: { colors: { primaryColor: '#29B6F6', primaryColorHover: '#03A9F4', primaryColorDisabled: '#4FC3F7', primaryColorBackground: '#E1F5FE' } } } ]; const App = () => { return ( <ThemeWrapper themes={themes} currentThemeId='light'> <Button>Click Here</Button> </ThemeWrapper> ); };
Default theme
{ "id": "default", "vars": { "colors": { "fontColor": "#000", "fontColorLight": "#222", "fontColorLighter": "#555", "fontColorInverted": "#FFFFFF", "primaryColor": "#00BCD4", "primaryColorHover": "#0097A7", "primaryColorDisabled": "#80DEEA", "primaryColorBackground": "#B2EBF2", "secondaryColor": "#607D8B", "secondaryColorHover": "#546E7A", "secondaryColorDisabled": "#90A4AE", "dangerColor": "#F44336", "dangerColorHover": "#D32F2F", "dangerColorDisabled": "#E57373", "neutralColor": "#FFFFFF", "neutralColorHover": "#F5F5F5", "codeBackgroundColor": "#aeaeae40", "shadowColor": "#00000030", "shadowColorHeavy": "#00000040", "stateSuccessColor": "#4CAF50", "stateNeutralColor": "#607D8B", "stateErrorColor": "#F44336", "textFieldBorderColor": "#88888888" }, "spacings": { "padding": "12px", "paddingSmall": "8px", "paddingLarge": "16px", "margin": "12px", "marginSmall": "8px", "marginLarge": "16px", "borderRadius": "4px", "gap": "12px", "gapSmall": "8px", "gapSmaller": "4px", "gapLarge": "16px", "gapLarger": "24px" }, "others": { "shadowDims": "0 0 6px 0", "shadowDimsLight": "0 0 3px 0", "shadowDimsHeavy": "0 0 10px 0", "labelFontWeight": "normal", "requiredMarker": "*", "textFieldBorderWidth": "1px", "textFieldBorderWidthFocus": "2px", "checkboxWidth": "16px", "checkboxWidthLarge": "24px", "headingMargin": "0 0 0.67em", "paragraphMargin": "0" } } }