Mono - Minimal UI Component Library for React and Tailwind CSS

Mono is a lightweight and minimal UI component library designed to make building beautiful and functional user interfaces with React and Tailwind CSS a breeze. It offers a collection of customizable and ready-to-use components that follow a simple and consistent design philosophy. Mono is currently in active development and will soon be released for public use.

Features

• Minimalistic Design: Mono follows a clean and minimal design approach to ensure your UI remains clutter-free.

• Tailwind CSS Integration: Built with Tailwind CSS, Mono components are highly customizable, allowing you to match your application's unique style.

• React Components: Mono provides a set of reusable React components for common UI elements, making it easy to integrate them into your project.

• Responsive: All components are designed to be fully responsive, ensuring a seamless user experience across various devices and screen sizes.

• Easy to Customize: You can easily customize Mono components using Tailwind CSS classes or by extending the default styles.

• Developer-Friendly: Mono is designed with developers in mind, offering clear documentation and straightforward usage.

Getting Started

To get started with Mono, follow these simple steps:

1. Install the library via npm or yarn:

   npm install @verareyou/mono
   # or
   yarn add @verareyou/mono

2. Import the components you want to use:

   import { Button, Box } from '@verareyou/mono';

3. Start using the components in your React application:

   <Box
        rounded='xl'
        p='sm'
      >
        <Button
          theme="dark"
          onClick={() => setCount((count) => count + 1)}>
          count is: {count}
        </Button>
   
        <Box
          p='sm'
          rounded='xl'
          m='sm'
          gap='10px'
          text='md'
        >
          <Button
            borderWidth='sm'
            rounded='full'
            theme="light"
            bg='red'
            text='md'
            color='white'
            onClick={() => setCount((count) => count - 1)}>
            count is: {count}
          </Button>
          <Button
            theme="light"
            onClick={() => setCount((count) => count - 1)}>
            count is: {count}
          </Button>
          <Button
            theme="light"
            onClick={() => setCount((count) => count - 1)}>
            count is: {count}
          </Button>
        </Box>
        <Box>
          <TextField
            onChange={() => setCount((count) => count - 1)}
          />
        </Box>
      </Box>

Documentation

The documentation for Mono is currently under development and will be available soon.

Contributing

Mono is currently in active development and is not yet ready for public use. However, if you would like to contribute to the project, please feel free to submit a pull request or open an issue.

License

Mono is licensed under the [MIT License]

[mit license]:

Mono - Minimal UI Component Library