@bitgrow/bitbybit
v3.6.11
Published
> A Bitgrow React design system
Downloads
186
Readme
BitByBit
A Bitgrow React design system
Installation
This package is hosted in NPM packages and to install, use:
npm install @bitgrow/bitbybitUsage
After install in your project, import the style.css on head of your main css file.
@import "@bitgrow/bitbybit/dist/style.css";if you use tailwind on your project, import the preset and content on your tailwind.config.ts:
{
presets: [
require("@bitgrow/bitbybit/tailwind.config.cjs"),
],
content: [
'./node_modules/@bitgrow/bitbybit/dist/**/*.{js,ts,jsx,tsx}',
]
}Theming
To define default theme, set data-theme property in your html tag.
<html data-theme="bitgrow">
<body>
{...}
</body>
</html>You can use the setTheme function to change theme your app:
import { setTheme, BitThemes } from '@bitgrow/bitbybit';
<button onClick={() => setTheme(BitThemes.DARK)}>dark</button>
<buttonon Click={() => setTheme(BitThemes.DEFAULT)}>light</button>
import { BitButton } from '@bitgrow/bitbybit';
<BitButton
text="Submit"
color="primary"
onClick={() => handleSubmit()}
icon={</MyIcon />}
/>Development
Create new components in src/components and export on src/index.ts;
Example App
Use storybook to documentation and development.
npm run devCreate new Theme
To create a new theme in Design System define the styles on index.css, and add the theme in setTheme.ts file, include type, and key on BitThemes object.