Introduction

BIND (Biofarma Innovative Next-level Design) UI is a React component library built with React and Tailwind CSS.

Pre-requisite

Before you start, make sure you have already know the basics of

• React and
• Tailwind CSS

To run the project, you need to install the following:

• Node.js (v22.11.0)

How to run

To run the project, you need to install the dependencies by running the following command in the terminal:

npm install

After that, you can create component and build the project by running the following command in the terminal:

npm run build

How to contribute

To start contribute, you can start by create a new branch and create/update component then build the project by running the following command in the terminal:

npm run build

After that, make sure you also update the application that uses this component library by running the following command in the terminal:

npm install

Then, you can create a PR to the main branch.

Code / folder convention

bind-ui/ ├─ lib/ │ ├─ components/ │ ├─ Badge/ │ │ ├─ Badge.css │ │ ├─ index.tsx │ ├─ Button/ │ │ ├─ index.tsx │ │ ├─ Button.css │ ├─ ... | ├─ eslint.config.js ├─ package.json ├─ postcss.config.js ├─ tailwind.config.js ├─ tsconfig.json ├─ tsconfig.node.json ├─ tsconfig.tsbuildinfo ├─ vite.config.js

Most of the time, you will only need to modify the lib folder. The lib folder contains the source code of the components that you want to use in your project. You can add new components or modify existing ones as needed.

We use css to style our components. For example, the lib/components/Button/Button.css file contains the styles for the Button component. You can modify this file to customize the appearance of the button.

The lib/components/Button/index.tsx file contains the implementation of the Button component. You can modify this file to add new functionality or change the behavior of the button.