@bitgrow/bitbybit
v3.6.11
Published
> A Bitgrow React design system
Downloads
120
Readme
BitByBit
A Bitgrow React design system
Installation
This package is hosted in NPM packages and to install, use:
npm install @bitgrow/bitbybit
Usage
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 dev
Create 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.