@verma-consulting/design-library

Shared MUI-based React components for Verma Consulting applications. Use this package for consistent UI patterns, forms, and design tokens across projects.

Installation

npm install @verma-consulting/design-library
# or
pnpm add @verma-consulting/design-library
# or
yarn add @verma-consulting/design-library

Peer dependencies

Install these in your app (they are not bundled):

• react (>=17)
• react-dom (>=17)
• @mui/material (^5.15.15)
• @mui/icons-material (^7.3.0)
• @mui/styles (^5.15.15)

The package also depends on @verma-consulting/common-library; it will be installed automatically.

Quick start

Wrap your app with MUI’s ThemeProvider (or use the re-exported one), then import components as needed:

import {
  ThemeProvider,
  Button,
  Logo,
  FormDialog,
  Loader,
} from "@verma-consulting/design-library";

function App() {
  return (
    <ThemeProvider theme={yourTheme}>
      <Logo organization={{ name: "Acme" }} handleClick={() => {}} />
      <Button variant="contained">Click me</Button>
    </ThemeProvider>
  );
}

The library re-exports all of @mui/material, so you can use MUI components from this single package if desired. It also re-exports useTheme, styled, createTheme, ThemeProvider from @mui/material/styles and makeStyles from @mui/styles.

Components

| Component | Description | | ------------------------------------------------ | ------------------------------------------------------- | | Logo | Organization logo and name (centered or horizontal). | | FormDialog | Modal dialog with title, content, and actions. | | FormDrawer | Side/bottom drawer for forms with optional actions. | | FormPopover | Popover triggered by an icon button (e.g. row actions). | | FormSnackBar | Snackbar for form success/error messages. | | ClearableSelect | Select with optional clear and view/edit modes. | | SearchableSelect | Searchable single/multi select with view/edit modes. | | PhoneNumberField | Phone input with country code and E.164 output. | | InputFileUpload | Button that opens a file picker. | | ImageUploadAvatar | Avatar-style image upload with preview and clear. | | TabPanel | Panel content for MUI Tabs (by index). | | TablePagination | MUI table pagination with modern footer UX and copy. | | Pill | Filter-style pill button with optional icons. | | StatusPill | Chip showing user status (Pending, Active, etc.). | | IOSSwitch | iOS-style switch (accepts MUI Switch props). | | Loader | Full-screen loading overlay with spinner. | | SkeletonBar | Horizontal shimmer bar for loading placeholders. | | EmptyState | Centered empty-state view with optional icon and label. |

Detailed docs for each component are in docs/.

Scripts

| Command | Description | | ---------------- | ------------------------------------------------------------------------------ | | pnpm run dev | Start the Vite dev server to preview components (e.g. /EmptyState, /Pill, /TablePagination). | | pnpm run build | Build the library (output in dist/). | | pnpm run watch | Watch and rebuild on changes. | | pnpm run clean | Remove dist/. | | pnpm run lint | Run ESLint on src/. |

License

MIT © Verma Consulting