manolis-ui

Manolis UI - Accelerate Your Vue 3 Development

Manolis UI is a high-quality Vue 3 component library meticulously crafted to accelerate your development process without compromising on visual appeal or ease of use. Built on the solid foundation of Tailwind CSS 4 and enhanced with the extensive component set of Daisy UI v5 (including potential additions), Manolis UI provides you with a rich collection of ready-to-use, customizable components. Spend less time building the basics and more time focusing on the unique aspects of your application.

✨ Features

• Comprehensive Component Library: Includes all components from Daisy UI v5, ensuring you have a wide range of UI elements at your fingertips. We are committed to continuously expanding this library with additional high-quality components where needed.
• Interactive Showcase with Storybook: Explore and experiment with each component in isolation using our integrated Storybook. This provides clear documentation and live examples to understand component behavior and customization options.
• Built for Vue 3: Leverages the latest features and performance improvements of Vue 3, ensuring a modern and efficient development experience.
• Beautiful Icons with Lucide: Features a consistent and elegant set of icons powered by Lucide, enhancing the visual appeal of your application.
• Powered by Tailwind CSS 4 and Vite: Built with the utility-first approach of Tailwind CSS 4 for rapid styling and customization, and bundled with the lightning-fast Vite build tool for an optimized development workflow.
• Effortless Integration: Easily integrate Manolis UI into your existing Vue 3 project with a simple CSS import.

🚀 Getting Started

1. Installation: First, ensure you have Tailwind CSS and Daisy UI installed in your Vue 3 project. Follow their respective documentation for installation instructions.

2. Install Manolis UI:

   # Using npm
   npm install manolis-ui
   
   # Or using yarn
   yarn add manolis-ui
   
   # Or using pnpm
   pnpm add manolis-ui

3. Import Styles: Add the following lines to your main CSS file (e.g., src/assets/main.css or similar), after your Tailwind CSS and Daisy UI imports:

   @source '../../../';
   
   @plugin "daisyui" {
     /* themes: light --default; */
     themes: all;
     root: ":root";
   }

   Explanation:

   • @source '../../../'; tells the CSS preprocessor where to find the Manolis UI styles. Adjust the relative path if your main.css file is located in a different directory structure.
   • The @plugin "daisyui" block configures Daisy UI themes. Uncomment themes: light --default; for a single light theme, or keep themes: all; to include all Daisy UI themes.

4. Import and Use Components: You can now import and use individual components in your Vue 3 templates:

   <template>
     <ButtonComponent>Click Me</ButtonComponent>
   </template>
   
   <script setup>
   import { ButtonComponent } from 'manolis-ui';
   </script>

📖 Documentation and Examples

Explore the full range of components and their usage in our interactive Storybook:

[[Check our componentent documentation]]

Within Storybook, you'll find detailed documentation, live examples, and the ability to customize component properties to see the effects in real-time.

🤝 Contributing

We welcome contributions to Manolis UI! If you have suggestions, bug reports, or would like to contribute new components or features, please refer to our Contributing Guidelines.

📄 License

This project is licensed under the GNU General Public License v3.0. You can find the full text of the license in the LICENSE file.

Key aspects of the GPL v3.0 license include:

• Copyleft: Any derivative works (modifications or works that include Manolis UI code) must also be licensed under the GPL v3.0.
• Attribution: You must provide appropriate attribution to the original authors of Manolis UI.
• Source Code Availability: You must make the source code of any derivative works available.
• Permissions: The license explicitly grants users permission to run, study, share, and modify the software.

For more details, please refer to the complete GNU General Public License v3.0.

---

Enjoy building amazing user interfaces with Manolis UI!