1. Docs
  2. Vite Guide

Vite Guide

Use Flexilla in a Vite project with a clear entry file, component markup, and state-based styling.

Vite is one of the simplest ways to use Flexilla because you control exactly where your HTML, CSS, and JavaScript live.
This guide assumes a vanilla Vite project, but the same structure applies to other Vite-based setups too.

Create a Vite project 

npm create vite@latest flexilla-vite -- --template vanilla-ts
cd flexilla-vite
npm install

Install Flexilla

Project structure

In a default Vite project, the most common places are:
  • index.html for the markup
  • src/main.ts for initialization
  • src/style.css for component styling

Example markup

Place this in index.html. 
<div id="app">
  <div id="vite-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 does Flexilla handle?
      </button>
      <div data-accordion-content class="accordion-content">
        Flexilla handles behavior, state, and accessibility-oriented wiring.
      </div>
    </div>

    <div data-accordion-item data-accordion-value="item-2">
      <button type="button" data-accordion-trigger class="accordion-trigger">
        What do I still control?
      </button>
      <div data-accordion-content class="accordion-content">
        You control markup, layout, colors, spacing, and animations.
      </div>
    </div>
  </div>
</div>

Example styling

Place this in src/style.css. 
body {
  font-family: system-ui, sans-serif;
  padding: 2rem;
}

#vite-accordion {
  max-width: 42rem;
  border: 1px solid #d4d4d8;
  border-radius: 0.75rem;
  overflow: hidden;
}

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

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

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

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

Initialize Flexilla

Place this in src/main.ts.

Run the project 

npm run dev

When to use auto init in Vite

Use autoInit() when:
  • your page contains many Flexilla components
  • selectors follow the default data-fx-* pattern
  • you want to avoid creating each instance manually
Use manual initialization when:
  • you want explicit control
  • you need custom options per component
  • components are mounted conditionally

Styling in Vite

You can style Flexilla components with any of these approaches:

Next step

After the Vite setup is working, open the component page you want next and reuse the same pattern:
  • copy the required HTML structure
  • style the states
  • initialize the component in main.ts