npm package: @merzaui/react
Description: Merza design system for building consistent web experiences with React.
Author: Mataga Believe
Latest version: 1.0.0

# @merzaui/react

MerzaUI is a modern opinionated design system for building consistent web experiences with [TailwindCSS](https://tailwindcss.com) and [React](https://react.dev/), designed and built for Merza Labs.

## Getting started

To get started, first copy the component files included in the downloaded ZIP file into wherever you keep components in your own project. The components are provided in both TypeScript and plain JavaScript, pick whichever set you prefer.

Next, follow below guide to use the design system:

1. Install base package and its dependencies:

   ```shell
   pnpm add @merzaui/react
   ```

   ```shell
   pnpm add -D @tailwindcss/typography 
   ```

2. Import theme css file from the package in your root file:

   ```jsx
   import "@merzaui/react/dist/theme.css";
   ```

   or import it the main stylesheet file:

   ```css
   @import "@merzaui/react/dist/theme.css";
   ```

3. Add `'./node_modules/@merzaui/react/dist/**/*.{js,ts,jsx,tsx}'` to the Tailwind `content` paths.

```jsx
import type { Config } from 'tailwindcss';
//import merzaui tailwind base config theme
 const merzaTheme = require('@merzaui/react/tailwind');

const externalPathPrefix =
  process.env.NODE_ENV === 'development' ? '../..' : '.';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    `${externalPathPrefix}/node_modules/@merzaui/react/dist/**/*.{js,ts,jsx,tsx}`,
  ],
  ...merzaTheme,
  plugins: [require('@tailwindcss/typography')],
};
export default config;

```

Additional installation instructions can be found in the MerzaUI documentation.

## Customisation

An example of how to customise the default design system's tailwind theme:

```jsx

import type { Config } from 'tailwindcss';
 const merzaTheme = require('@merzaui/react/tailwind');

const externalPathPrefix =
  process.env.NODE_ENV === 'development' ? '../..' : '.';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    `${externalPathPrefix}/node_modules/@merzaui/react/dist/**/*.{js,ts,jsx,tsx}`,
  ],
  // pass tailwind config options in the exported theme.
  ...merzaTheme(
    {
    fontSize: {
        inherit: [
          'inherit',
          {
            lineHeight: 'inherit',
            letterSpacing: 'inherit',
            fontWeight: 'inherit',
          },
        ],
      },
    }
  ),
  plugins: [
    // register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants
    function ({ addUtilities }) {
        addUtilities({
          '.utility-name': {
            filter:
              'drop-shadow(0 3px 10px rgba(0, 0, 0, 0.12)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.07))',
          },
        });
      },
    require('@tailwindcss/typography')],
};
export default config;

```

## Documentation

You can find the MerzaUI documentation at <https://merzaui.com/docs>.

## Learn more

To learn more about the technologies used in this design system, see the following resources:

- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
- [React](https://react.dev) - the official React documentation