1. Docs
  2. Installation

Installation

Install Flexilla, choose the right package strategy, and build your first working component.

Flexilla can be installed either as the full library or as individual packages.
  • Install @flexilla/flexilla if you want several components in the same project.
  • Install a single package such as @flexilla/accordion if you only need one component.

Install the full library

Install a single package

Your first working example

The example below shows the full Flexilla flow:
  • Add semantic HTML with the required data-* attributes.
  • Add CSS for the states Flexilla updates.
  • Initialize the component in JavaScript.

HTML 

<div id="getting-started-accordion" data-fx-accordion data-accordion-type="single">
  <div data-accordion-item data-accordion-value="item-1">
    <button type="button" data-accordion-trigger class="accordion-trigger">
      What is Flexilla?
    </button>
    <div data-accordion-content class="accordion-content">
      Flexilla is a headless library that gives your UI behavior and state, while you control the markup and styling.
    </div>
  </div>

  <div data-accordion-item data-accordion-value="item-2">
    <button type="button" data-accordion-trigger class="accordion-trigger">
      Why is it headless?
    </button>
    <div data-accordion-content class="accordion-content">
      Because it does not impose a design system. You style the component according to the states Flexilla manages.
    </div>
  </div>
</div>

CSS 

#getting-started-accordion {
  max-width: 42rem;
  margin-inline: auto;
  border: 1px solid #d4d4d8;
  border-radius: 0.75rem;
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  padding: 1rem;
  border: 0;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.accordion-trigger[aria-expanded="true"] {
  background: #f4f4f5;
}

.accordion-content {
  overflow: hidden;
  height: 0;
  padding-inline: 1rem;
}

.accordion-content[data-state="open"] {
  height: auto;
  padding-block: 0 1rem;
}

JavaScript

Use either the full package import or the single-package import.
If everything is wired correctly:
  • clicking a trigger updates aria-expanded
  • the item and content receive state updates
  • your CSS reacts to those states

CDN usage

If you are working without a bundler, you can import Flexilla from a CDN.

Full library 

<script type="module">
  import { Accordion } from "https://cdn.jsdelivr.net/npm/@flexilla/flexilla@latest/+esm";

  new Accordion("#getting-started-accordion");
</script>

Single package 

<script type="module">
  import { Accordion } from "https://cdn.jsdelivr.net/npm/@flexilla/accordion@latest/+esm";

  new Accordion("#getting-started-accordion");
</script>

CommonJS usage 

const { Accordion } = require("@flexilla/accordion");

new Accordion("#getting-started-accordion");

Styling choices

Flexilla is headless, so it does not ship a ready-made visual theme. You can style components in three main ways:
  • plain CSS with attribute selectors
  • UnoCSS variants and utilities
  • Tailwind CSS variants and utilities
Recommended next reads:

When to install what

  • Use @flexilla/flexilla when you want a simple entry point for multiple components.
  • Use individual packages when you want tighter control over what your app includes.
  • Start with one component first, then expand once the data attributes and styling model feel natural.

Next steps

After this page, the best path is:
  • Read Introduction
  • Pick a styling approach
  • Open the component page you want to build next