BizUI Component Library

BizUI is a modern React component library built with TypeScript, Tailwind CSS, and Vite. It provides a collection of reusable UI components designed for building consistent and beautiful web applications.

Features

• 🚀 Built with React + TypeScript
• 🎨 Styled with Tailwind CSS
• 📦 Tree-shakeable exports
• 🛠 Fully customizable components
• 🎯 Type-safe props
• 📱 Responsive design

Development and Usage

There are two approaches to use this library:

Approach 1: Using npm link (For Local Development)

1. Clone and build the library:

git clone [repository-url]
cd biz-uibricks
npm install
npm run build

2. Create a local link:

npm link

3. In your project:

cd your-project
npm link @bizongo/biz-uibricks

4. Import and use components:

import { Button } from '@bizongo/biz-uibricks'

<Button label="Click me" type="button" onClick={() => {}} />

Approach 2: Using Component URLs (For SDUI)

1. Build and start the preview server:

npm run build
npm run preview

2. Components will be available at their respective URLs:

http://localhost:4173/components/Button.js
http://localhost:4173/components/Card.js
http://localhost:4173/components/Container.js
// ... etc

3. Use with SDUI Renderer:

// Example of using in SDUI configuration
{
  "component": "http://localhost:4173/components/Button.js",
  "props": {
    "label": "Click me",
    "type": "button",
    "onClick": "() => {}"
  }
}

Available Scripts

• npm run dev - Start development server for local testing
• npm run build - Build the library for production
• npm run preview - Preview the production build locally

Available Components and Their URLs

After running npm run preview, components are available at these URLs:

• Button: /components/Button.js
• Card: /components/Card.js
• Container: /components/Container.js
• ContainerRow: /components/ContainerRow.js
• Div: /components/Div.js
• Dropdown: /components/Dropdown.js
• Form: /components/Form.js
• Header: /components/Header.js
• Image: /components/Image.js
• Input: /components/Input.js
• List: /components/List.js
• ListItem: /components/ListItem.js
• SpecialCard: /components/SpecialCard.js
• Stepper: /components/Stepper.js
• Text: /components/Text.js
• Heading: /components/Heading.js

Troubleshooting

If you encounter peer dependency issues, ensure your project has the following dependencies:

{
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Breaking the Link (For Approach 1)

To remove the npm link when needed:

# In your project directory
npm unlink @bizongo/biz-uibricks

# In the library directory
npm unlink

License

This project is licensed under the MIT License - see the LICENSE file for details.