1. Docs
  2. AstroJS Guide

Astro Guide

Use Flexilla in Astro by rendering component markup in .astro files and initializing it on the client.

Astro is a strong fit for Flexilla because both work well with HTML-first, progressively enhanced pages.
In Astro, the most important thing is deciding where your markup lives and where the client-side initialization should run.

Create an Astro project 

npm create astro@latest flexilla-astro
cd flexilla-astro
npm install

Install Flexilla

Where things go in Astro

A simple pattern is:
  • render the component markup inside a page or Astro component
  • import your CSS globally or in the layout
  • initialize Flexilla inside a client-side module

Example Astro component

Create a component such as src/components/FaqAccordion.astro. 
<div id="astro-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">
      Is Flexilla a design system?
    </button>
    <div data-accordion-content class="accordion-content">
      No. Flexilla is headless, so you bring the styling and visual language.
    </div>
  </div>

  <div data-accordion-item data-accordion-value="item-2">
    <button type="button" data-accordion-trigger class="accordion-trigger">
      Why does Astro work well with it?
    </button>
    <div data-accordion-content class="accordion-content">
      Because Astro lets you ship mostly HTML and add JavaScript only where needed.
    </div>
  </div>
</div>

Example styling

Add styles in a global stylesheet such as src/styles/global.css. 
#astro-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;
}

Client-side initialization

Create a small client module, for example src/scripts/flexilla.ts.
Then load that script on the page where the markup exists: 
---
import "../styles/global.css";
import FaqAccordion from "../components/FaqAccordion.astro";
---

<FaqAccordion />
<script type="module" src="../scripts/flexilla.ts"></script>

Important Astro note

Flexilla should run in the browser after the markup exists in the DOM. If the component markup is rendered on the page, load your initialization script on that page or layout.

CDN usage in Astro

If you do not want to bundle Flexilla, you can also import it directly in a <script type="module"> block: 
<FaqAccordion />

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

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

Styling options

Astro projects can use:

Next step

Once this pattern works in Astro, reuse it for other components:
  • render markup in .astro
  • style the states
  • initialize the component on the client