Winify is an innovative UI component library, framework-agnostic and based on Lit technology. Its distinctive feature lies in the exclusive utilization of web components, ensuring a modular and efficient web development experience.

Table of contents

• 🚀 Features
• 📦 Installation
• 💻 Usage

• 📝 Contributing

• ✨ Contributors

Features

• 🔩 Easily Customizable
• 🖱 Flexible & Reusable - Winify components are built on top of Lit to allow interoperability
• 🕊 Lightweight
• 😍 Framework-agnostic - Web components are designed to be framework agnostic, meaning they can be used with any framework or library, or on their own, without requiring additional dependencies

Installation

To use winify components, all you need to do is install the winify package.

According to the package manager you use, use the suitable command line:

# with Yarn
$ yarn add winify

# with npm
$ npm i winify

# with pnpm
$ pnpm add winify

# with Bun
$ bun add winify

Usage

Once installed, you can import the necessary web components into your application. Here are different ways to use components according to your frontend framework or library.

Note : Winify web components follow a naming convention. They start with "w-" followed by the component name, with the exception of React.

In a React project

For React, use the component with a capital letter and without the "w-" prefix:

import { Button } from "winify";

// Use the Button component
function App() {
  return <Button>My Button</Button>;
}

In other frameworks/libraries (Vuejs, Angular) or in Vanilla JavaScript

For other frameworks, use the lower-case prefix "w-":

import { w-button } from "winify";

<w-button>My Button</w-button>

Components can take attributes. For example, for the button:

<w-button variant="outline">My Button</w-button>
<w-button loading>My Button</w-button>

Contributing

Your contribution is welcome! Here's how you can participate in the development of Winify:

• Report issues: If you find a bug or have an improvement idea, please create an issue on our GitHub page.

• Propose enhancements: Do you have ideas for new components or additional features? Let us know on GitHub.

• Submit pull requests: If you are familiar with the code, feel free to submit pull requests to fix issues or add features.

• Share and support: Share Winify with other developers and give it a ⭐ on GitHub if you appreciate it.