npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@flexilla/flexilla

v2.0.7

Published

A set of unstyled interactive components for building interactive, and customizable user interfaces. Open-Source

Downloads

48

Readme

Flexilla (flexilla)

Flexilla is an open-source set of unstyled interactive UI components for building interactive and customizable user interfaces.

Why Flexilla(flexilla)

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. It's mainly designed to be integrated beautifully with Tailwind CSS or UnoCSS.

Where Can I use it?

  • When dealing with a project where you don't want to use a JS Framework but you need interactive component with accessibility in mind (Recommanded : AstroJS, PHP and PHP frameworks, Static Websites)

Installation

Install the library

npm install @flexilla/flexilla

Install a package

If you want to use only one package or two then we recommand you to install only those packages

  • let's say you need an Accordion component only
npm install @flexilla/accordion

Styling

Flexilla doesn't use any CSS Framework, it's just update states via data attributes, you can directly specify style on the component according to it's state (for an accordion: each item has a data-open attribute wich can be close or open, and eache item has trigger aria-expended="true" or aria-expended="false" and content data-state="open" or data-state="close")

With UnoCSS

Flexilla has a UnoCSS preset allowing you to have nice prefix like fx-open instead of writting data-[state=open]. Check the list off all prefixes

  • Install flexilla preset
npm i -D @flexilla/uno-preset

Using TailwindCSS

Flexilla has a TailwindCSS Plugin allowing you to have nice prefix like data-opened instead of writting data-[state=open]. Check the list off all prefixes

  • Install flexilla tailwind Plugin
npm i -D @flexilla/tailwind-plugin