````markdown # **Weavify - Reusable UI Components**
npm install weavify```markdownWeavify - Reusable UI Components
Weavify is a collection of reusable React UI components built with Material-UI (MUI) and Tailwind CSS. It is designed to accelerate development, improve consistency, and provide a seamless UI/UX experience.
---
Install Weavify using npm:
`sh`
npm install weavify-ui
or with Yarn:
`sh`
yarn add weavify-ui
> Note: Ensure Tailwind CSS is set up in your project before using these components. The library comes with an index.css that imports Tailwind's base, components, and utilities. Import it at the root of your project:`
>
> tsx`
> import 'weavify-ui/dist/index.css';
>
---
Weavify provides a collection of prebuilt UI components. Import them as needed:
`tsx`
import {
AddButton,
Avatar,
Button,
CustomSwitch,
Drawer,
Dropdown,
Input,
Label,
Menu,
Modal,
MultiCheckbox,
MultiPeoplePicker,
MultiSelectDropdown,
OverflowSet,
OverflowSetV2,
PeoplePicker,
RadioButtonGroup,
Select,
TabList,
TinyTab,
Tooltip,
Alerts,
ConfirmAlerts,
} from 'weavify-ui';
Each component follows the Material-UI structure and is enhanced with Tailwind CSS classes to ensure consistency and flexibility.
---
Weavify includes the following components:
- Buttons & Actions:
AddButton, Button, Menu, OverflowSet, OverflowSetV2
- Form Inputs:
, Select, Dropdown, MultiSelectDropdown, MultiCheckbox, RadioButtonGroup, CustomSwitch, Label
- Pickers:
, MultiPeoplePicker
- Navigation:
, TinyTab
- Display:
, Tooltip
- Overlays:
, Modal
- Feedback:
, ConfirmAlerts
---
AddButton
A button component with an icon and text.
Props:
| Prop | Type | Default | Description |
| --------- | --------------- | ------------ | ---------------------------------------------- |
| text | string | — | The button label. |icon
| | ReactNode | — | Icon displayed before the label. |onClick
| | () => void | — | Click event handler. |
| Others | MUI ButtonProps | See MUI docs | All other props are forwarded to MUI's Button. |
Example:
`tsx
import { AddButton } from 'weavify-ui';
import { AddRegular } from '@fluentui/react-icons';
`
Avatar
An avatar component with size and fallback text options.
Props:
| Prop | Type | Default | Description |
| -------------- | --------------------- | -------- | ---------------------------------------------------------- | ------------- | --- | ------------------------------------ |
| imageUrl | string | — | URL of the avatar image. |fallbackText
| | string | "" | Fallback initials if image not provided (first 2 letters). |size
| | 'small' | 'medium' | 'large' | 'extraLarge' | — | Determines dimensions of the avatar. |customStyles
| | React.CSSProperties | — | Additional inline styles. |
Example:
`tsx
import { Avatar } from 'weavify-ui';
`
Button
A thin wrapper around the MUI Button allowing additional icon support.
Example:
`tsx
import { Button } from 'weavify-ui';
;
`
CustomSwitch
A toggle switch component with custom colors.
Props:
| Prop | Type | Default | Description |
| ---------- | -------------------------------- | ------- | --------------------- |
| id | string | — | Unique identifier. |checked
| | boolean | — | Current switch state. |onChange
| | (e: React.ChangeEvent) => void | — | Change event handler. |
Example:
`tsx
import { CustomSwitch } from 'weavify-ui';
`
Drawer
A flexible side-drawer component for overlays and navigation.
Props:
| Prop | Type | Default | Description |
| ------------- | ------------ | ------------ | ----------------------------- | ------------- | ------------------------ | --------- | ------------------------- |
| isOpen | boolean | — | Controls drawer visibility. |onClose
| | () => void | — | Function to close the drawer. |headerTitle
| | string | — | Title in the header. |size
| | 'small' | 'medium' | 'large' | 'full' | number | 'small' | Sets width of the drawer. |type
| | 'temporary' | 'persistent' | 'permanent' | 'temporary' | Defines drawer behavior. |isSave
| | boolean | false | If true, shows a save button. |onSave
| | () => void | — | Callback for save action. |
Example:
`tsx
import { Drawer } from 'weavify-ui';
onClose={() => console.log('Drawer closed')}
headerTitle="My Drawer"
size="medium"
type="temporary"
>
Dropdown (Single-Select)
A single-select dropdown based on MUI's Autocomplete.
Props:
| Prop | Type | Default | Description |
| ------------- | ------------------------ | -------------------- | ------------------------- |
|
| array | [] | Options for selection. |
| value | Any | — | Currently selected value. |
| onChange | (event, value) => void | — | Change event callback. |
| placeholder | string | 'Select an option' | Placeholder text. |Example:
`tsx
import { Dropdown } from 'weavify-ui';
label="Country"
options={[
{ label: 'USA', value: 'usa' },
{ label: 'Canada', value: 'canada' },
]}
value="usa"
onChange={(e, v) => console.log(v)}
/>;
`
Input
A customizable text input with built-in label support.
Props:
| Prop | Type | Default | Description |
| ----------------- | --------- | -------- | ------------------------------ |
|
, label | string | — | Input field identifier & label |
| type | string | "text" | HTML input type |
| placeholder | string | "" | Placeholder text |
| isLabelRequired | boolean | false | Display label if true |Example:
`tsx
import { Input } from 'weavify-ui';;
`
Label
A simple, bold
wrapper for forms.Example:
`tsx
import { Label } from 'weavify-ui';;
`
Menu
An icon-triggered menu with customizable menu items.
Props:
| Prop | Type | Description |
| ----------- | -------------------------------------------------------------------- | ------------------------------------------------- |
|
| ReactNode | Icon to trigger the menu. |
| menuItems | Array of { label: string; icon?: ReactNode; onClick?: () => void } | Menu items with optional icons and click handler. |Example:
`tsx
import { Menu } from 'weavify-ui';
import { MoreRegular } from '@fluentui/react-icons';
menuItems={[
{ label: 'Edit', onClick: () => console.log('Edit') },
{ label: 'Delete', onClick: () => console.log('Delete') },
]}
/>;
`
Modal
A centered modal with customizable title, content, and actions.
Props:
| Prop | Type | Default | Description |
| --------- | ------------ | ------- | ------------------------------ |
|
| boolean | — | Modal visibility state. |
| onClose | () => void | — | Callback to close modal. |
| title | string | "" | Modal title text. |
| content | ReactNode | "" | Content for modal body. |
| actions | ReactNode | "" | Buttons or additional actions. |Example:
`tsx
import { Modal } from 'weavify-ui';
onClose={() => console.log('Modal closed')}
title="Modal Title"
content={
Hello Modal!}
actions={}
/>;
`
MultiCheckbox
A multi-select checkbox group with layout options.
Example:
tsx
import { MultiCheckbox } from 'weavify-ui';
label="Select Options"
name="options"
value={['opt1']}
onChange={(e) => console.log(e.target.value)}
options={[
{ value: 'opt1', label: 'Option 1', name: 'opt1' },
{ value: 'opt2', label: 'Option 2', name: 'opt2' },
]}
alignment="row"
/>;
`
MultiPeoplePicker
A chip-based multi-select people picker with avatar support.
Example:
tsx
import { MultiPeoplePicker } from 'weavify-ui';
options={[
{ id: 1, name: 'John Doe', email: 'john@example.com', avatar: 'https://...' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' },
]}
value={[]}
onChange={(e, value) => console.log(value)}
label="Select People"
isLabelRequired
/>;
`
MultiSelectDropdown
A generic multi-select dropdown.
Example:
tsx
import { MultiSelectDropdown } from 'weavify-ui';
label="Select Tags"
options={[
{ label: 'React', value: 'react' },
{ label: 'MUI', value: 'mui' },
]}
value={[]}
onChange={(e, value) => console.log(value)}
/>;
`
OverflowSet / OverflowSetV2
Components to display actions which collapse under a menu if necessary.
Example (OverflowSet):
tsx
import { OverflowSet } from 'weavify-ui';
{[
,
,
,
,
]}
`Example (OverflowSetV2):
tsx
import { OverflowSetV2 } from 'weavify-ui';
{ key: 'a', content: 'A', onClick: () => console.log('A') },
{ key: 'b', content: 'B', onClick: () => console.log('B'), hideOnOverflow: true },
{ key: 'c', content: 'C', onClick: () => console.log('C') },
{ key: 'd', content: 'D', onClick: () => console.log('D') },
]}
maxVisibleItems={2}
/>;
`
PeoplePicker
A single-select people picker.
Example:
tsx
import { PeoplePicker } from 'weavify-ui';
options={[
{ id: 1, name: 'Alice', email: 'alice@example.com', avatar: 'https://...' },
{ id: 2, name: 'Bob', email: 'bob@example.com' },
]}
value={null}
onChange={(e, value) => console.log(value)}
label="Select a Person"
isLabelRequired
/>;
`
RadioButtonGroup
A group of radio buttons with horizontal or vertical alignment.
Example:
tsx
import { RadioButtonGroup } from 'weavify-ui';
name="group1"
label="Choose one"
value="option1"
onChange={(e) => console.log(e.target.value)}
options={[
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
]}
alignment="row"
isLabelRequired
/>;
`
Select
A custom MUI select with placeholder support.
Example:
tsx
import { Select } from 'weavify-ui';
label="Select an option"
value="1"
onChange={(e, child) => console.log(e.target.value)}
options={[
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
]}
/>;
`
TabList / TinyTab
Tab navigation components.
- TabList: Larger tabs with badge count support.
- TinyTab: Compact 32px-tall tabs ideal for dense UIs.
TabList Example:
tsx
import { TabList } from 'weavify-ui';
{ key: 'tab1', label: 'Tab One' },
{ key: 'tab2', label: 'Tab Two' },
]}
selectedPivot="tab1"
setSelectedPivot={(key) => console.log(key)}
/>;
`TinyTab Example:
tsx
import { TinyTab } from 'weavify-ui';
{ key: 'tabA', label: 'Tab A' },
{ key: 'tabB', label: 'Tab B' },
]}
selectedPivot="tabA"
setSelectedPivot={(key) => console.log(key)}
/>;
`
Tooltip
A simple tooltip wrapper for any element.
Example:
tsx
import { Tooltip } from 'weavify-ui';
import { InfoRegular } from '@fluentui/react-icons';
`
Alerts & ConfirmAlerts
Pre-configured alert dialogs based on SweetAlert2.
Alerts Example:
tsx
import { Alerts } from 'weavify-ui';
`ConfirmAlerts Example:
tsx
import { ConfirmAlerts } from 'weavify-ui';
text="Are you sure you want to delete?"
isSuccessAlert
onConfirm={() => console.log('Deleted')}
onCancel={() => console.log('Cancelled')}
/>;
`---
📚 Contributing
We welcome contributions! Feel free to:
- Submit issues for bugs or enhancements 🐞
- Create pull requests to improve existing components ✨
- Suggest new features that align with the project goals 🚀
Contributing Steps:
1. Fork the repository and create a feature branch.
2. Run the storybook with
---
Weavify is licensed under the MIT License. See LICENSE for details.
---
Integrate MUI + Tailwind components into your React projects and boost your development velocity. Pull requests welcome!
---