@bitgrow/bitbybit NPM

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.