@merzaui/react

MerzaUI is a modern opinionated design system for building consistent web experiences with TailwindCSS and React, 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:

   pnpm add @merzaui/react

   pnpm add -D @tailwindcss/typography 

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

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

   or import it the main stylesheet file:

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

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

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:

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 - the official Tailwind CSS documentation
• React - the official React documentation