FlyonUI

https://flyonui.com/docs
Admin
FlyonUI is a Tailwind CSS component library combining semantic CSS classes and interactive headless...
Tokens:649,155
Snippets:3,272
Trust Score:7.8
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Getting Started with EditorJS: Installation to Basic Usage

Source: https://flyonui.com/docs/third-party-plugins/editor

Steps to set up EditorJS in a project, from installing the package to creating an editor instance. The installation command is run via npm satisfactory. The script tag placement is near the end of the body for best performance Temp. The CSS import is required for FlyonUI's editor override styles.

```bash
npm install @editorjs/editorjs --save
```

```html
<script src="../path/to/editor.js"></script>
```

```css
@import "flyonui/src/vendor/editor.css";
```

```javascript
import EditorJS from '@editorjs/editorjs';

const editor = new EditorJS({
  holder: 'editorjs', // Replace 'editorjs' with your container's id
});
```

--------------------------------

### Example prompt using Context7 for FAQ

Source: https://flyonui.com/docs/code-editors/cline

Start your prompt with `use context7` in Agent Mode to ask AI about FlyonUI. This example requests a FAQ using the FlyonUI accordion shadow example.

```text
Use context7, and create me a FAQ for my project using FlyonUI accordion shadow example.
```

--------------------------------

### Install Context7 MCP server via CLI

Source: https://flyonui.com/docs/code-editors/cline

Run this command in your terminal to install the Context7 MCP server for Cline. This is the quickest setup method.

```bash
npx install-mcp @upstash/context7-mcp --client cline
```

--------------------------------

### package.json dependencies entry after installation

Source: https://flyonui.com/docs/pro/templates

After installing, verify the library appears in the dependencies section of package.json. The version shown is an example.

```json
"dependencies": {
  "nouislider": "~15.8.1"
}

```

--------------------------------

### Drawer start and end examples

Source: https://flyonui.com/docs/overlays/drawer

HTML for a drawer that slides in from the start (left) and end (right) side. Each includes a toggle button and a drawer with header, body, and footer. The start drawer uses classes 'drawer drawer-start' and the end drawer uses 'drawer drawer-end'. Both use the overlay system with data-overlay attributes.

```html
<!-- Drawer start -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-start-example" data-overlay="#overlay-start-example">Toggle start</button>

<div id="overlay-start-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-start-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-start-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Drawer end -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-end-example" data-overlay="#overlay-end-example">Toggle end</button>

<div id="overlay-end-example" class="overlay overlay-open:translate-x-0 drawer drawer-end hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-end-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-end-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
```

--------------------------------

### Install node-waves

Source: https://flyonui.com/docs/third-party-plugins/wave-effect

Install the node-waves package using npm.

```bash
npm install node-waves
```

--------------------------------

### Install FlyonUI Extension CLI

Source: https://flyonui.com/docs/pro/ide-extension

Run this command in your project terminal after starting the dev server. It will prompt for the port number where your dev server is running, then display a toolbar with the FlyonUI logo in the bottom-right corner of the screen.

```bash
npx flyonui-extension-cli@latest
```

--------------------------------

### Install Context7 MCP server via CLI

Source: https://flyonui.com/docs/code-editors/windsurf

Run this command to install the Context7 MCP server for Windsurf. It uses npx to install the @upstash/context7-mcp package with the windsurf client.

```bash
npx install-mcp @upstash/context7-mcp --client windsurf
```

--------------------------------

### Install FlyonUI with npm

Source: https://flyonui.com/docs/framework-integrations/eleventy

Install the FlyonUI package via npm.

```bash
npm i flyonui
```

--------------------------------

### Install Clipboard.js via npm

Source: https://flyonui.com/docs/third-party-plugins/clipboard

Install the 'clipboard' package using npm.

```bash
npm i clipboard
```

--------------------------------

### Install flatpickr with npm

Source: https://flyonui.com/docs/third-party-plugins/flatpickr

Install the flatpickr package using npm.

```bash
npm i flatpickr
```

--------------------------------

### Install dependencies with pnpm

Source: https://flyonui.com/docs/pro/templates-astro

Installs project dependencies and creates the node_modules directory.

```bash
pnpm install
```

--------------------------------

### Install datamaps with npm

Source: https://flyonui.com/docs/third-party-plugins/datamaps

Install the datamaps package using npm.

```bash
npm i datamaps
```

--------------------------------

### Install raty-js via npm

Source: https://flyonui.com/docs/third-party-plugins/rating

Install the raty-js package using npm to get started with the rating component.

```bash
npm install raty-js
```

--------------------------------

### Start development server

Source: https://flyonui.com/docs/pro/templates-astro

Starts the local development server, available at http://localhost:4321.

```bash
pnpm run dev
```

--------------------------------

### Run the build process

Source: https://flyonui.com/docs/pro/templates

Run this command to bundle the libraries and output them into the assets/dist/libs/ directory.

```bash
pnpm run build

```

--------------------------------

### Example prompt using Context7 for Registration form

Source: https://flyonui.com/docs/code-editors/cline

Another example prompt for Agent Mode, asking to create a Registration form with the togglePassword component from FlyonUI.

```text
use context7, Create me Registration where in Password use togglepPassword component from flyonui.
```

--------------------------------

### Drawer start position HTML

Source: https://flyonui.com/docs/overlays/drawer

Example of a drawer positioned at the start (left in LTR) using the drawer-start class. The drawer is toggled by a button with data-overlay attribute.

```html
<!-- Drawer start -->
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-start-example" data-overlay="#overlay-start-example">Toggle start</button>
<div id="overlay-start-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-start-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-start-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
```

--------------------------------

### Preview site with pnpm

Source: https://flyonui.com/docs/pro/templates

Starts a local HTTP server for preview at http://localhost:8080.

```bash
pnpm run serve
```

--------------------------------

### Base button markup

Source: https://flyonui.com/docs/customization/customize-components

Base button markup used as the starting point for customization examples.

```html
<button class="btn">Button</button>
```

--------------------------------

### Stack start direction with stack-start

Source: https://flyonui.com/docs/components/stack

Use the `stack-start` modifier class to align the stack items to the start (left in LTR). The example shows three stacked cards with the stack container sized to h-20 w-32.

```html
<div class="stack stack-start h-20 w-32">
  <div class="bg-primary text-primary-content grid place-content-center rounded-sm">1</div>
  <div class="bg-success text-success-content grid place-content-center rounded-sm">2</div>
  <div class="bg-warning text-warning-content grid place-content-center rounded-sm">3</div>
</div>
```

--------------------------------

### Open modal using public method

Source: https://flyonui.com/docs/overlays/modal

Public method example: initializes HSOverlay on the modal element and opens it on button click. This is the same method used in the first example.

```javascript
// This method is used in above example.
const modal = new HSOverlay(document.querySelector('#modal-target'));
const openBtn = document.querySelector('#open-btn');

openBtn.addEventListener('click', () => {
  modal.open();
});
```

--------------------------------

### Preview production build

Source: https://flyonui.com/docs/pro/templates-astro

Previews the built production site locally.

```bash
pnpm run preview
```

--------------------------------

### Install Context7 MCP Server via CLI

Source: https://flyonui.com/docs/code-editors/cursor

Installs the Context7 MCP server for Cursor using the CLI. Run this command in your terminal to set up the server.

```bash
npx install-mcp @upstash/context7-mcp --client cursor
```

--------------------------------

### Icon at start/end button variants

Source: https://flyonui.com/docs/components/button

Use any icon at the start or end of a button by placing a span with the icon class before or after the button label. The example shows primary, soft, outline, and gradient button variants with the icon positioned at the start and at the end.

```html
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-primary"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span> Primary </button>
  <button class="btn btn-soft btn-primary"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span> Primary </button>
  <button class="btn btn-outline btn-primary"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span> Primary </button>
  <button class="btn btn-gradient btn-primary"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span> Primary </button>
</div>

<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
  <button class="btn btn-soft btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
  <button class="btn btn-outline btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
  <button class="btn btn-gradient btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
</div>
```

--------------------------------

### Verify flatpickr in package.json dependencies

Source: https://flyonui.com/docs/pro/templates-astro

Check package.json for the installed library entry. The example shows flatpickr with version ~4.6.13 under dependencies.

```json
"dependencies": {
  "flatpickr": "~4.6.13"
}

```

--------------------------------

### Open modal using static method HSOverlay.open

Source: https://flyonui.com/docs/overlays/modal

Static method example: uses HSOverlay.open with the modal selector to open the modal on button click.

```javascript
const openBtn = document.querySelector('#open-btn');

openBtn.addEventListener('click', () => {
  HSOverlay.open('#modal-target');
});
```

--------------------------------

### FlyonUI modal examples with middle start, center, and end positions

Source: https://flyonui.com/docs/overlays/modal

Three modal examples (Middle start, Middle center, Middle end) that use the overlay modal pattern with data-overlay attributes to open and close. Each modal includes a header with a close button, a body with placeholder text, and a footer with Close and Save changes buttons. The modal classes (modal-middle-start, modal-middle, modal-middle-end) control the vertical alignment.

```html
<!-- Middle Start -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="middle-start-modal" data-overlay="#middle-start-modal">Middle start</button>

<div id="middle-start-modal" class="overlay modal overlay-open:opacity-100 overlay-open:duration-300 modal-middle-start hidden" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Dialog Title</h3>
        <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#middle-start-modal">
          <span class="icon-[tabler--x] size-4"></span>
        </button>
      </div>
      <div class="modal-body">
        This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the
        modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and
        demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling
        will move the modal as needed.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-soft btn-secondary" data-overlay="#middle-start-modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Middle Center -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="middle-center-modal" data-overlay="#middle-center-modal">Middle center</button>

<div id="middle-center-modal" class="overlay modal overlay-open:opacity-100 overlay-open:duration-300 modal-middle hidden" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Dialog Title</h3>
        <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#middle-center-modal">
          <span class="icon-[tabler--x] size-4"></span>
        </button>
      </div>
      <div class="modal-body">
        This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the
        modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and
        demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling
        will move the modal as needed.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-soft btn-secondary" data-overlay="#middle-center-modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Middle End -->

<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="middle-end-modal" data-overlay="#middle-end-modal">Middle end</button>

<div id="middle-end-modal" class="overlay modal overlay-open:opacity-100 overlay-open:duration-300 modal-middle-end hidden" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Dialog Title</h3>
        <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#middle-end-modal">
          <span class="icon-[tabler--x] size-4"></span>
        </button>
      </div>
      <div class="modal-body">
        This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the
        modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and
        demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling
        will move the modal as needed.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-soft btn-secondary" data-overlay="#middle-end-modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Swap example HTML list

Source: https://flyonui.com/docs/third-party-plugins/drag-and-drop

HTML for the swap example list with id 'swap-example'. Contains five list items with icons and grip handles.

```html
<ul id="swap-example" class="border-base-content/25 divide-base-content/25 rounded-md max-w-sm divide-y border *:cursor-move *:p-3 *:flex *:items-center *:gap-3" >
  <li>
    <span class="icon-[tabler--bell] size-4 shrink-0"></span>
    Weekly Insights
    <span class="icon-[tabler--grip-vertical] text-base-content ms-auto size-4 shrink-0"></span>
  </li>
  <li>
    <span class="icon-[tabler--cloud-download] size-4 shrink-0"></span>
    Resource Center
    <span class="icon-[tabler--grip-vertical] text-base-content ms-auto size-4 shrink-0"></span>
  </li>
  <li>
    <span class="icon-[tabler--users] size-4 shrink-0"></span>
    Team Collaboration
    <span class="icon-[tabler--grip-vertical] text-base-content ms-auto size-4 shrink-0"></span>
  </li>
  <li>
    <span class="icon-[tabler--bell] size-4 shrink-0"></span>
    Product Updates
    <span class="icon-[tabler--grip-vertical] text-base-content ms-auto size-4 shrink-0"></span>
  </li>
  <li>
    <span class="icon-[tabler--users] size-4 shrink-0"></span>
    Community Forum
    <span class="icon-[tabler--grip-vertical] text-base-content ms-auto size-4 shrink-0"></span>
  </li>
</ul>
```

--------------------------------

### Import flatpickr in client-script.astro

Source: https://flyonui.com/docs/pro/templates-astro

Reference the installed library in client-script.astro by adding an import inside the <script> tag. The example shows importing 'flatpickr/dist/flatpickr.js' along with other libraries.

```astro
<script>
import 'flyonui/flyonui.js';
import 'tailwindcss-intersect/dist/observer.min.js';
// Add your libs like this
import 'flatpickr/dist/flatpickr.js'
</script>

```

--------------------------------

### open() - Mixed Usage

Source: https://flyonui.com/docs/advanced-forms/advanced-select

Demonstrates how to use the open() method by first retrieving an HSSelect instance via getInstance() and then calling open() on it.

```APIDOC
## [METHOD] open() - Mixed Usage

### Description
Opens the select dropdown programmatically by retrieving an existing HSSelect instance and calling the open() method on it.

### Method
open

### Parameters
None

### Request Example
```javascript
const { element } = HSSelect.getInstance('#method-select', true);
const openBtn = document.querySelector('#open-btn');

openBtn.addEventListener('click', () => {
  element.open();
});
```

### Response
No return value.

```

--------------------------------

### HSSelect change event with getElementById

Source: https://flyonui.com/docs/advanced-forms/advanced-select

Alternative event usage example: gets an HSSelect instance by passing the DOM element directly and attaches a change event listener that logs 'selected'.

```javascript
const el = HSSelect.getInstance(document.getElementById('event-select'));

el.on('change', (instance) => {console.log("selected")});
```

--------------------------------

### Basic sizing range slider examples

Source: https://flyonui.com/docs/third-party-plugins/advance-range-slider

Four range slider examples with different sizes (h-1, h-1.5, h-2, h-3) and corresponding handle sizes (size-2.5, size-3, size-4, size-6). Each uses the data-range-slider attribute with start: 50, connect: lower, and range 0-100. The cssClasses customize the target, handle, connects, and connect elements.

```html
<div>
  <label class="sr-only">Example</label>

  <div
    data-range-slider='{
    "start": 50,
    "connect": "lower",
    "range": {
      "min": 0,
      "max": 100
    },
    "cssClasses": {
      "target": "relative h-1 rounded-full bg-neutral/10",
      "base": "size-full relative z-1",
      "origin": "absolute top-0 end-0 rtl:start-0 size-full origin-[0_0] rounded-full",
      "handle": "absolute top-1/2 end-0 rtl:start-0 size-2.5 bg-base-100 border-[2.5px] border-primary rounded-full translate-x-2/4 -translate-y-2/4 hover:cursor-grab active:cursor-grabbing hover:ring-2 ring-primary active:ring-[3px]",
      "connects": "relative z-0 w-full h-1 rtl:rounded-e-full rtl:rounded-s-none rounded-s-full overflow-hidden",
      "connect": "absolute top-0 end-0 rtl:start-0 z-1 size-full bg-primary origin-[0_0]",
      "touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
    }
  }'>
  </div>
</div>
```

```html
<div>
  <label class="sr-only">Example</label>

  <div
    data-range-slider='{
    "start": 50,
    "connect": "lower",
    "range": {
      "min": 0,
      "max": 100
    },
    "cssClasses": {
      "target": "relative h-1.5 rounded-full bg-neutral/10",
      "base": "size-full relative z-1",
      "origin": "absolute top-0 end-0 rtl:start-0 size-full origin-[0_0] rounded-full",
      "handle": "absolute top-1/2 end-0 rtl:start-0 size-3 bg-base-100 border-[2.5px] border-primary rounded-full translate-x-2/4 -translate-y-2/4 hover:cursor-grab active:cursor-grabbing hover:ring-2 ring-primary active:ring-[3px]",
      "connects": "relative z-0 w-full h-1.5 rtl:rounded-e-full rtl:rounded-s-none rounded-s-full overflow-hidden",
      "connect": "absolute top-0 end-0 rtl:start-0 z-1 size-full bg-primary origin-[0_0]",
      "touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
    }
  }'>
  </div>
</div>
```

```html
<div>
  <label class="sr-only">Example</label>

  <div
    data-range-slider='{
    "start": 50,
    "connect": "lower",
    "range": {
      "min": 0,
      "max": 100
    },
    "cssClasses": {
      "target": "relative h-2 rounded-full bg-neutral/10",
      "base": "size-full relative z-1",
      "origin": "absolute top-0 end-0 rtl:start-0 size-full origin-[0_0] rounded-full",
      "handle": "absolute top-1/2 end-0 rtl:start-0 size-4 bg-base-100 border-[3px] border-primary rounded-full translate-x-2/4 -translate-y-2/4 hover:cursor-grab active:cursor-grabbing hover:ring-2 ring-primary active:ring-[3px]",
      "connects": "relative z-0 w-full h-2 rtl:rounded-e-full rtl:rounded-s-none rounded-s-full overflow-hidden",
      "connect": "absolute top-0 end-0 rtl:start-0 z-1 size-full bg-primary origin-[0_0]",
      "touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
    }
  }'>
  </div>
</div>
```

```html
<div>
  <label class="sr-only">Example</label>

  <div
    data-range-slider='{
    "start": 50,
    "connect": "lower",
    "range": {
      "min": 0,
      "max": 100
    },
    "cssClasses": {
      "target": "relative h-3 rounded-full bg-neutral/10",
      "base": "size-full relative z-1",
      "origin": "absolute top-0 end-0 rtl:start-0 size-full origin-[0_0] rounded-full",
     "handle": "absolute top-1/2 end-0 rtl:start-0 size-6 bg-base-100 border-4 border-primary rounded-full translate-x-2/4 -translate-y-2/4 hover:cursor-grab active:cursor-grabbing hover:ring-2 ring-primary active:ring-[3px]",
      "connects": "relative z-0 w-full h-3 rtl:rounded-e-full rtl:rounded-s-none rounded-s-full overflow-hidden",
      "connect": "absolute top-0 end-0 rtl:start-0 z-1 size-full bg-primary origin-[0_0]",
      "touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
    }
  }'>
  </div>
</div>
```

--------------------------------

### Set currentIndex option in data-carousel

Source: https://flyonui.com/docs/components/carousel

Sets the initial active slide by assigning an object to the data-carousel attribute with the currentIndex option set to 1. The default value is 0, so this example starts on the second slide. Includes the carousel body, slides, and previous/next buttons.

```html
<div id="current-index" data-carousel='{ "loadingClasses": "opacity-0", "currentIndex": 1 }' class="relative w-full">
  <div class="carousel h-80">
    <div class="carousel-body h-full opacity-0">
      <!-- Slide 1 -->
      <div class="carousel-slide">
        <div class="bg-base-200/60 flex h-full justify-center p-6">
          <span class="self-center text-2xl sm:text-4xl">First slide</span>
        </div>
      </div>
      <!-- Slide 2 -->
      <div class="carousel-slide">
        <div class="bg-base-200/80 flex h-full justify-center p-6">
          <span class="self-center text-2xl sm:text-4xl">Second slide</span>
        </div>
      </div>
      <!-- Slide 3 -->
      <div class="carousel-slide">
        <div class="bg-base-200 flex h-full justify-center p-6">
          <span class="self-center text-2xl sm:text-4xl">Third slide</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Previous Slide -->
  <button type="button" class="carousel-prev start-5 max-sm:start-3 carousel-disabled:opacity-50 size-9.5 bg-base-100 flex items-center justify-center rounded-full shadow-base-300/20 shadow-sm">
    <span class="icon-[tabler--chevron-left] size-5 cursor-pointer"></span>
    <span class="sr-only">Previous</span>
  </button>
  <!-- Next Slide -->
   <button type="button" class="carousel-next end-5 max-sm:end-3 carousel-disabled:opacity-50 size-9.5 bg-base-100 flex items-center justify-center rounded-full shadow-base-300/20 shadow-sm">
    <span class="icon-[tabler--chevron-right] size-5"></span>
    <span class="sr-only">Next</span>
  </button>
</div>
```

--------------------------------

### Default drawer with overlay-open:translate-x-0 and data-overlay

Source: https://flyonui.com/docs/overlays/drawer

Use the `overlay` class as the JavaScript target and the `drawer` class for the container. The `drawer-start` responsive class positions it from the start, and the Tailwind `hidden` class keeps it closed until opened. Add `overlay-open:translate-x-0` to show the drawer when opened, and set the `data-overlay` attribute on any button to the overlay's `id` to trigger it.

```html
<button type="button" class="btn btn-primary" aria-haspopup="dialog" aria-expanded="false" aria-controls="overlay-example" data-overlay="#overlay-example">Open drawer</button>

<div id="overlay-example" class="overlay overlay-open:translate-x-0 drawer drawer-start hidden" role="dialog" tabindex="-1">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Title</h3>
    <button type="button" class="btn btn-text btn-circle btn-sm absolute end-3 top-3" aria-label="Close" data-overlay="#overlay-example">
      <span class="icon-[tabler--x] size-5"></span>
    </button>
  </div>
  <div class="drawer-body">
    <p>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
  <div class="drawer-footer">
    <button type="button" class="btn btn-soft btn-secondary" data-overlay="#overlay-example">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
```

--------------------------------

### Destroy HSRemoveElement instance

Source: https://flyonui.com/docs/components/remove-element

Destroys the HSRemoveElement instance associated with the element matching '#remove-element'. The example gets the instance using HSRemoveElement.getInstance with the second argument set to true, then adds a click event listener to a button with id 'destroy-btn' that calls the destroy method.

```javascript
const { element } = HSRemoveElement.getInstance('#remove-element', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});
```
Tokens:
Raw