@verma-consulting/design-library

Shared Material UI React components, forms, and design tokens. Use this package for consistent UI patterns across apps.

Requirements

• Node.js >=24.4.1 (see engines in package.json). For local development, use 24.4.1 via .nvmrc, .node-version, .mise.toml, or Volta (volta field in package.json).

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 (^18 or ^19)
• react-dom (^18 or ^19)
• @mui/material (^5.16.8 or ^7.3)
• @mui/icons-material (^5.16.8 or ^7.3)
• @mui/styles (^5.16.8 or ^7.3)

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 logoUrl="/logo.png" name="Acme" slogan="Your slogan" 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 | Centered auth brand: logo URL, name, and slogan. | | 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. | | SearchableSelect | Searchable single/multi select with view/edit modes. | | PhoneNumberField | Phone input with country code and E.164 output. | | OTPField | One-time code input (single-character cells, paste, mask). | | 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. |

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/. | | pnpm test / test:ci | Jest (CI adds coverage; 100% gate). |

License

Copyright Verma Consulting. All rights reserved. Proprietary — no public grant. See LICENSE.