@verareyou/mono v0.0.6
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:
Install the library via npm or yarn:
npm install @verareyou/mono # or yarn add @verareyou/mono
Import the components you want to use:
import { Button, Box } from '@verareyou/mono';
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