Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unify-ui-dev/flexilla
Interactive Component Library
https://github.com/unify-ui-dev/flexilla
component-library flexilla hacktoberfest hacktoberfest2024 interactive-component javascript tailwind-component typescript unifyui unocss-component
Last synced: 3 days ago
JSON representation
Interactive Component Library
- Host: GitHub
- URL: https://github.com/unify-ui-dev/flexilla
- Owner: unify-ui-dev
- License: mit
- Created: 2024-01-14T13:35:52.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-11-08T07:55:50.000Z (about 1 month ago)
- Last Synced: 2024-12-12T01:35:26.898Z (11 days ago)
- Topics: component-library, flexilla, hacktoberfest, hacktoberfest2024, interactive-component, javascript, tailwind-component, typescript, unifyui, unocss-component
- Language: TypeScript
- Homepage: https://flexilla-docs.vercel.app/
- Size: 1.7 MB
- Stars: 17
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.MD
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Flexilla
Flexilla is an open-source set of unstyled interactive UI components for building interactive and customizable user interfaces.
## Why Flexilla
Flexilla is a set of unstyled components that help you quickly add interactivity to your UI Element with accessibility in mind. Flexilla includes Dropdown, collapse, accordion, tabs, Offcanvas and more.
## Installation
### Install all components
To install the library :
1. Install It From Npm
You need to add it as a dependency in your project using npm or any other package manager
```bash
npm install @flexilla/flexilla
```
Or
```bash
yarn add @flexilla/flexilla
```
2. Use CDN
Import Module from CDN
```html
import * as flexilla from 'https://cdn.jsdelivr.net/npm/@flexilla/flexilla@latest/+esm';
new flexilla.Accordion("#ac-el")
```
> **Note** : You can use any available CDN Deliver
### Install a single package
If you want to use only one package or two then we recommand you to install only those packages
1. let's say you need an Accordion component only
```shell
npm install @flexilla/accordion
```
2. From CDN
```html
import * as flexillatabs from 'https://cdn.jsdelivr.net/npm/@flexilla/tabs@latest/+esm'
new flexillatabs.Tabs("#myTabs")
```
[Check all packages](./packages/)
## Usage
See examples [Here](./examples/vanilla/)
## Contributing
To contribute to this project, please make sure you read our [contributing guide](CONTRIBUTING.MD) before submitting a pull request.
## ✨ Maintainers
Johnkat MJ
@johnkat-mj
Tresor Kasenda
@tresor-kasenda
## 🙌 Acknowledgement
Flexilla is made possible thanks to the inspirations from the following projects:
- Preline Plugins
- Flowbite Plugin
## Community
Connect with us for future updates
- [Discord](https://discord.gg/6VN6zTPZAy).
## 📄 License
This project is licensed under the **MIT License** - see the [**MIT License**](LICENSE) file for details.