mingle-ui

mingle-ui-cover

mingle-ui is a powerful design system built with Tailwind CSS and Storybook.\
It’s designed to help developers and designers create consistent, beautiful interfaces effortlessly.

Installation

Install mingle-ui into your project using NPM:

``bash npm install mingle-ui`

If you are already using mingle-ui and want to update to the latest version, use the following command:

`bash npm install mingle-ui@latest`

`Usage`

`$3`


To use InputField with react-hook-form, follow the example below:

`ts import { FormProvider, useForm } from 'react-hook-form'; import { InputField, PrimaryButton } from "mingle-ui";

function LoginPage() { const methods = useForm({ mode: 'all', });

const onSubmit = (data) => {console.log(data)};

return (


                  formMethod={methods}
          name='email'
          type='email'
          placeholder='Email'
          label='Email'
          errorMessage='Email is Required'
          isRequired
        />
                  formMethod={methods}
          name='password'
          type='password'
          placeholder='Password'
          label='Password'
          errorMessage='Password is Required'
          isRequired
        />
        Login
      
    
  );
}

export default LoginPage;``

This ensures that all mingle-ui components render with the intended design specifications.

Components

mingle-ui offers a wide range of components that are ready to use in your projects. To see the components available and learn how to use them, refer to the Storybook documentation provided with the package.

Storybook

🔗 Mingle Design System - Storybook

License

mingle-ui is released under the MIT License.