### Flowbite Vue Getting Started

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/index.md

Provides a link to the getting started guide for Flowbite Vue, indicating the initial steps to integrate the library into a Vue 3 project.

```Markdown
[Get Started](/pages/getting-started)
```

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

### Install Flowbite and Flowbite Vue

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/pages/getting-started.md

Installs the Flowbite library and the Flowbite Vue component library as project dependencies.

```bash
npm i flowbite flowbite-vue
```

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

### Install Tailwind CSS with Vite

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/pages/getting-started.md

Installs Tailwind CSS and its Vite plugin as development dependencies.

```bash
npm install -D tailwindcss @tailwindcss/vite
```

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

### Check Node.js Version

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/pages/getting-started.md

Verifies that Node.js is installed and meets the minimum version requirement (18 or newer) for Flowbite Vue.

```bash
node -v
```

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

### Vue Toast Provider Setup

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/toastProvider/toastProvider.md

This snippet shows the basic setup for using the FwbToastProviderExample component within a Vue application. It imports the example component and renders it.

```vue
<script setup>
import FwbToastProviderExample from './examples/FwbToastProviderExample.vue'
</script>

<fwb-toast-provider-example />
```

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

### Install Flowbite and Flowbite Vue

Source: https://github.com/themesberg/flowbite-vue/blob/main/README.md

Installs both the flowbite and flowbite-vue packages as project dependencies using npm.

```bash
npm i flowbite flowbite-vue
```

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

### FwbButton Loading Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Demonstrates the 'loading' prop for the FwbButton component, enabling a loading state with optional loading position and size adjustments. Includes examples with and without a suffix slot. Requires the FwbButton component and ref from 'vue'.

```vue
<template>
  <fwb-button :disabled="loading" :loading="loading" gradient="purple-blue" outline size="xs" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" gradient="red-yellow" size="sm" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" color="default" loading-position="suffix" outline @click="loading = !loading">
    Click me
    <template #suffix>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
      </svg>
    </template>
  </fwb-button>
  <fwb-button :loading="loading" gradient="green-blue" size="lg" @click="loading = !loading">
    Click me
  </fwb-button>
  <fwb-button :loading="loading" gradient="pink" size="xl" @click="loading = !loading">
    Click me
  </fwb-button>
</template>

<script setup>
import { ref } from 'vue'
import { FwbButton } from 'flowbite-vue'

const loading = ref(false)
</script>
```

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

### Sidebar Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/sidebar.md

Imports various sidebar examples for Flowbite Vue, including basic sidebar, dropdown, group, CTA, and logo components.

```vue
import FwbSidebarExample from './sidebar/examples/FwbSidebarExample.vue'
import FwbSidebarDropdownExample from './sidebar/examples/FwbSidebarDropdownExample.vue'
import FwbSidebarGroupExample from './sidebar/examples/FwbSidebarGroupExample.vue'
import FwbSidebarCtaExample from './sidebar/examples/FwbSidebarCtaExample.vue'
import FwbSidebarLogoExample from './sidebar/examples/FwbSidebarLogoExample.vue'
```

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

### Flowbite Themable Button Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/flowbiteThemable/flowbiteThemable.md

Provides an example of integrating the Flowbite Themable component with the FwbButton component. This setup allows for consistent theming of buttons across the application. The 'theme' prop accepts color names.

```vue
<template>
  <flowbite-themable :theme="theme">
      <fwb-button>
        ...
      </fwb-button>
  </flowbite-themable>
</template>

<script setup>
import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
```

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

### Basic FwbAlert Usage

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/pages/getting-started.md

Demonstrates how to use the FwbAlert component in a Vue application to display a success message.

```vue
<template>
  <fwb-alert type="success">
    Success! You can now use Flowbite Vue in your Vue application 🎉
  </fwb-alert>
</template>

<script setup>
import { FwbAlert } from 'flowbite-vue'
</script>
```

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

### Import Tailwind CSS

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/pages/getting-started.md

Imports Tailwind CSS into the project's main style file.

```css
@import "tailwindcss";
```

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

### Update style.css for Flowbite Vue

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/pages/getting-started.md

Imports Flowbite Vue styles and plugin, and sets up the source directory for Flowbite Vue components.

```css
/* import Flowbite Vue styles */
@import "flowbite-vue/index.css";

/* import Flowbite plugin */
@plugin "flowbite/plugin";

/* add Flowbite Vue directory using @source directive */
@source "../node_modules/flowbite-vue";
```

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

### FwbButton Shadow Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Demonstrates the 'shadow' prop for the FwbButton component, applying shadow effects to buttons. This includes examples with default shadow colors and custom shadow colors. Requires the FwbButton component from 'flowbite-vue'.

```vue
<template>
  <fwb-button gradient="blue" shadow>Blue with blue</fwb-button>
  <fwb-button gradient="cyan" shadow>Cyan with cyan</fwb-button>
  <fwb-button gradient="green" shadow>Green with green</fwb-button>
  <fwb-button gradient="lime" shadow>Lime with lime</fwb-button>
  <fwb-button gradient="pink" shadow>Pink with pink</fwb-button>
  <fwb-button gradient="purple" shadow>Purple with purple</fwb-button>
  <fwb-button gradient="red" shadow>Red with red</fwb-button>
  <fwb-button gradient="teal" shadow>Teal with teal</fwb-button>
  <fwb-button gradient="blue" shadow="red">Blue with red</fwb-button>
  <fwb-button gradient="cyan" shadow="teal">Cyan with teal</fwb-button>
  <fwb-button gradient="teal" shadow="purple">Teal with purple</fwb-button>
</template>

<script setup>
import { FwbButton } from 'flowbite-vue'
</script>
```

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

### Configure Vite for Tailwind CSS

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/pages/getting-started.md

Configures the Vite build tool to use the Tailwind CSS plugin.

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})
```

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

### Default Jumbotron Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/jumbotron.md

This example shows a title, description, and two CTA buttons for the jumbotron component.

```vue
<template>
  <div
  >
    <fwb-jumbotron
      header-text="We invest in the world’s potential"
      sub-text="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
    >
      <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
        <a
          href="#"
          class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
        >
          Get started
          <svg
            class="w-3.5 h-3.5 ml-2 rtl:rotate-180"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 14 10"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M1 5h12m0 0L9 1m4 4L9 9"
            />
          </svg>
        </a>
        <a
          href="#"
          class="inline-flex justify-center items-center py-3 px-5 sm:ml-4 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
        >
          Learn more
        </a>
      </div>
    </fwb-jumbotron>
  </div>
</template>

<script setup>
import FwbJumbotron from '@/components/FwbJumbotron/FwbJumbotron.vue'
</script>

```

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

### Basic Spinner Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/spinner.md

Demonstrates the basic usage of the FwbSpinner component. It requires importing the component and can be used directly within the template.

```vue
<template>
  <fwb-spinner />
</template>

<script setup>
import { FwbSpinner } from 'flowbite-vue'
</script>
```

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

### Flowbite Themable Dropdown Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/flowbiteThemable/flowbiteThemable.md

Illustrates the usage of the Flowbite Themable component with the FwbDropdown component. This example shows how to apply a theme to a dropdown element. The 'theme' prop accepts predefined color strings.

```vue
<template>
  <flowbite-themable :theme="theme">
      <fwb-dropdown>
        ...
      </fwb-dropdown>
  </flowbite-themable>
</template>

<script setup>
import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
```

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

### Vue Button Size Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Illustrates the different size options available for the FwbButton component using the 'size' prop.

```vue
<template>
  <fwb-button size="xs">Extra Small - xs</fwb-button>
  <fwb-button size="sm">Small - sm</fwb-button>
  <fwb-button size="md">Medium - md</fwb-button>
  <fwb-button size="lg">Large - lg</fwb-button>
  <fwb-button size="xl">Extra Large - xl</fwb-button>
</template>

<script setup>
import { FwbButton } from 'flowbite-vue'
</script>

```
```

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

### FwbButton Square Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Shows how to use the 'square' prop to create square-shaped buttons. This example includes combinations with gradient, outline, and pill styles. Requires the FwbButton component from 'flowbite-vue'.

```vue
<template>
  <fwb-button gradient="red-yellow" square>
    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
    </svg>
  </fwb-button>
  <fwb-button color="default" pill square>
    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
    </svg>
  </fwb-button>
  <fwb-button color="dark" outline square>
    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path clip-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" fill-rule="evenodd" />
    </svg>
  </fwb-button>
  <fwb-button color="yellow" outline pill square>
    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </fwb-button>
</template>

<script setup>
import { FwbButton } from 'flowbite-vue'
</script>
```

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

### Vue Button Duotone Gradient Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Illustrates the 'gradient' prop for duotone (two-color) transitions on the FwbButton component.

```vue
<template>
  <fwb-button gradient="purple-blue">Purple to blue</fwb-button>
  <fwb-button gradient="cyan-blue">Cyan to blue</fwb-button>
  <fwb-button gradient="green-blue">Green to blue</fwb-button>
  <fwb-button gradient="purple-pink">Purple to pink</fwb-button>
  <fwb-button gradient="pink-orange">Pink to orange</fwb-button>
  <fwb-button gradient="teal-lime">Teal to lime</fwb-button>
  <fwb-button gradient="red-yellow">Red to yellow</fwb-button>
</template>

<script setup>
import { FwbButton } from 'flowbite-vue'
</script>

```
```

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

### Vue Button Color Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Demonstrates the usage of the 'color' prop for the FwbButton component, showcasing different color options available.

```vue
<template>
  <fwb-button color="default">Default</fwb-button>
  <fwb-button color="alternative">Alternative</fwb-button>
  <fwb-button color="dark">Dark</fwb-button>
  <fwb-button color="light">Light</fwb-button>
  <fwb-button color="green">Green</fwb-button>
  <fwb-button color="red">Red</fwb-button>
  <fwb-button color="yellow">Yellow</fwb-button>
  <fwb-button color="purple">Purple</fwb-button>
  <fwb-button color="pink">Pink</fwb-button>
</template>

<script setup>
import { FwbButton } from 'flowbite-vue'
</script>

```
```

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

### Vue Button Monochrome Gradient Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Demonstrates the use of the 'gradient' prop for monochrome color transitions on the FwbButton component.

```vue
<template>
  <fwb-button gradient="blue">Blue</fwb-button>
  <fwb-button gradient="cyan">Cyan</fwb-button>
  <fwb-button gradient="green">Green</fwb-button>
  <fwb-button gradient="lime">Lime</fwb-button>
  <fwb-button gradient="pink">Pink</fwb-button>
  <fwb-button gradient="purple">Purple</fwb-button>
  <fwb-button gradient="red">Red</fwb-button>
  <fwb-button gradient="teal">Teal</fwb-button>
</template>

<script setup>
import { FwbButton } from 'flowbite-vue'
</script>

```
```

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

### Vue Textarea - Default Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/textarea.md

Demonstrates the basic usage of the FwbTextarea component with a label and placeholder. It uses v-model for data binding and specifies the number of rows.

```vue
<template>
  <fwb-textarea
    v-model="message"
    :rows="4"
    label="Your message"
    placeholder="Write your message..."
  />
</template>

<script setup>
import { ref } from 'vue'
import { FwbTextarea } from 'flowbite-vue'

const message = ref('')
</script>
```

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

### Vue Navbar with Action Button

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/navbar.md

Illustrates adding an action button, such as a 'Get started' button, to the right side of the Flowbite Vue Navbar.

```vue
<template>
  <fwb-navbar>
    <template #logo>
      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
        Flowbite
      </fwb-navbar-logo>
    </template>
    <template #default="{isShowMenu}">
      <fwb-navbar-collapse :is-show-menu="isShowMenu">
        <fwb-navbar-link is-active link="#">
          Home
        </fwb-navbar-link>
        <fwb-navbar-link link="#">
          Services
        </fwb-navbar-link>
        <fwb-navbar-link link="#">
          Pricing
        </fwb-navbar-link>
        <fwb-navbar-link link="#">
          Contact
        </fwb-navbar-link>
      </fwb-navbar-collapse>
    </template>
    <template #right-side>
      <fwb-button>
        Get started
      </fwb-button>
    </template>
  </fwb-navbar>
</template>

<script setup>
import {
  FwbButton,
  FwbNavbar,
  FwbNavbarCollapse,
  FwbNavbarLink,
  FwbNavbarLogo,
} from 'flowbite-vue'
</script>
```

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

### Flowbite Vue Pagination with Custom Slots

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/pagination.md

This Vue component demonstrates advanced customization of the FwbPagination component using named slots. It allows developers to completely control the appearance and behavior of the first, last, previous, next, and page buttons. The example utilizes Vue's template syntax and script setup for defining the component's logic and state.

```vue
<template>
  <fwb-pagination
    v-model="currentPage"
    :total-items="100"
    enable-first-last
  >
    <template #first-button="{ disabled, setPage }">
      <button
        class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
        :disabled="disabled"
        @click="setPage()">
        First page
      </button>
    </template>

    <template #last-button="{ disabled, setPage, page }">
      <button
        class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
        :disabled="disabled"
        @click="setPage()">
        Last page ({{ page }})
      </button>
    </template>

    <template #prev-button="{ disabled, decreasePage }">
      <button
        class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
        :disabled="disabled"
        @click="decreasePage()">
        Prev page
      </button>
    </template>

    <template #next-button="{ disabled, increasePage }">
      <button
        class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
        :disabled="disabled"
        @click="increasePage()">
        Next page
      </button>
    </template>

    <template #page-button="{ disabled, page, setPage }">
      <button
        class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg  hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
        :class="{
          'bg-purple-200 hover:bg-purple-300': !disabled,
          'bg-purple-300': disabled
        }"
        :disabled="disabled"
        @click="setPage(page)">
        {{ page }}
      </button>
    </template>
  </fwb-pagination>
  Current page: {{ currentPage }}
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import { FwbPagination } from '../../../../src/index'

const currentPage = ref<number>(1)
</script>

```

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

### Git Workflow for Contributions

Source: https://github.com/themesberg/flowbite-vue/blob/main/CONTRIBUTING.md

This snippet outlines the essential Git commands for contributing to an open-source project. It covers forking, cloning, branching, staging, committing, and pushing changes, along with best practices for commit messages and pull requests.

```git
git clone https://github.com/github-username/repository-name.git
git checkout -b branch-name-here
git add insert-paths-of-changed-files-here
git commit -m "Insert a short message of the changes made here"
git push origin branch-name-here
```

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

### Hoverable Table Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/table.md

Illustrates a table where rows highlight on hover, utilizing the `hoverable` prop from Flowbite Vue. It displays product details and an edit link, similar to the striped example.

```vue
<template>
  <fwb-table hoverable>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell>
        <span class="sr-only">Edit</span>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>
```

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

### Dropdown Placement Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/dropdown.md

Demonstrates how to use the `fwb-dropdown` component with different `placement` options (top, right, bottom, left). Each dropdown contains a navigation list with clickable links. The component is imported from 'flowbite-vue'.

```vue
<template>
  <fwb-dropdown placement="top" text="Top">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      <a href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Dashboard</a>
      <a href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Settings</a>
      <a href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Earnings</a>
      <a href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Sign out</a>
    </nav>
  </fwb-dropdown>

  <fwb-dropdown placement="right" text="Right">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      ...
    </nav>
  </fwb-dropdown>

<fwb-dropdown text="Bottom">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      ...
    </nav>
  </fwb-dropdown>

  <fwb-dropdown placement="left" text="Left">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      ...
    </nav>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
```

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

### Dropdown Alignment Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/dropdown.md

Illustrates the use of the `align-to-end` prop on the `fwb-dropdown` component to control the alignment of the dropdown menu relative to the trigger element. Examples include 'top', 'right', 'bottom', and 'left' placements, each with aligned dropdowns.

```vue
<template>
  <fwb-dropdown align-to-end placement="top" text="Top">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      <a
        href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Dashboard</a>
      <a
        href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Settings</a>
      <a
        href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Earnings</a>
      <a
        href="#"
        class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
      >Sign out</a>
    </nav>
  </fwb-dropdown>

  <fwb-dropdown align-to-end placement="right" text="Right">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      ...
    </nav>
  </fwb-dropdown>

  <fwb-dropdown align-to-end text="Bottom">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      ...
    </nav>
  </fwb-dropdown>

  <fwb-dropdown align-to-end placement="left" text="Left">
    <nav class="py-2 text-sm text-gray-700 dark:text-gray-200">
      ...
    </nav>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown } from 'flowbite-vue'
</script>
```

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

### Slot Listener Example Usage

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/PLAYGROUND/PLAYGROUND.md

Demonstrates how to import and use the SlotListenerExample component within a Vue.js application. This component likely showcases how to listen for and react to slot content changes.

```vue
<script setup>
import SlotListenerExample from './examples/SlotListenerExample.vue'
</script>

<SlotListenerExample />
```

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

### Radio List Group Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/radio.md

Illustrates using FwbRadio within a list group for a structured selection. This example uses FwbListGroup, FwbListGroupItem, and FwbP components from flowbite-vue. Requires Vue and relevant Flowbite Vue components.

```vue
<template>
  <fwb-p class="mb-2">
    Technology {{ picked }}
  </fwb-p>

  <fwb-list-group>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Svelte"
        name="list-radio"
        value="Svelte"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Vue JS"
        name="list-radio"
        value="Vue JS"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="React"
        name="list-radio"
        value="React"
      />
    </fwb-list-group-item>
    <fwb-list-group-item>
      <fwb-radio
        v-model="picked"
        label="Angular"
        name="list-radio"
        value="Angular"
      />
    </fwb-list-group-item>
  </fwb-list-group>
</template>

<script setup>
import { ref } from 'vue'
import { FwbListGroup, FwbListGroupItem, FwbP, FwbRadio } from 'flowbite-vue'

const picked = ref('Vue JS')
</script>
```

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

### Default Modal Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/modal.md

Demonstrates the basic usage of the FwbModal component, including how to open and close it using a button. It shows the structure for header, body, and footer content.

```vue
<template>
  <fwb-button @click="showModal">
    Open modal
  </fwb-button>

  <fwb-modal v-if="isShowModal" @close="closeModal">
    <template #header>
      <div class="flex items-center text-lg">
        Terms of Service
      </div>
    </template>
    <template #body>
      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
      </p>
      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
      </p>
    </template>
    <template #footer>
      <div class="flex justify-between">
        <fwb-button @click="closeModal" color="alternative">
          Decline
        </fwb-button>
        <fwb-button @click="closeModal" color="green">
          I accept
        </fwb-button>
      </div>
    </template>
  </fwb-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FwbButton, FwbModal } from 'flowbite-vue'

const isShowModal = ref(false)

function closeModal () {
  isShowModal.value = false
}
function showModal () {
  isShowModal.value = true
}
</script>
```

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

### Horizontal Radio List Group Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/radio.md

Demonstrates arranging FwbRadio components horizontally within a list structure. This example uses FwbP and FwbRadio from flowbite-vue, along with custom Tailwind CSS classes for layout. Requires Vue and Flowbite Vue components.

```vue
<template>
  <fwb-p class="mb-2">
    Technology {{ picked }}
  </fwb-p>
  <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Svelte"
        name="radio-horizontal"
        value="Svelte"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Vue JS"
        name="radio-horizontal"
        value="Vue JS"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="React"
        name="radio-horizontal"
        value="React"
      />
    </li>
    <li class="w-full !m-0 pl-3 flex border-gray-200 rounded-t-lg dark:border-gray-600">
      <fwb-radio
        v-model="picked"
        label="Angular"
        name="radio-horizontal"
        value="Angular"
      />
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import { FwbP, FwbRadio } from 'flowbite-vue'

const picked = ref('svelte')
</script>
```

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

### FwbButton Outline Examples

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/button.md

Demonstrates the 'outline' prop for the FwbButton component, showing how to create outlined buttons with different color schemes. Requires the FwbButton component from 'flowbite-vue'.

```vue
<template>
  <fwb-button color="default" outline>Default</fwb-button>
  <fwb-button color="dark" outline>Dark</fwb-button>
  <fwb-button color="green" outline>Green</fwb-button>
  <fwb-button color="red" outline>Red</fwb-button>
  <fwb-button color="yellow" outline>Yellow</fwb-button>
  <fwb-button color="purple" outline>Purple</fwb-button>
</template>

<script setup>
import { FwbButton } from 'flowbite-vue'
</script>
```

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

### Vue Multi-level Sidebar Menu Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/sidebar.md

This Vue.js code snippet illustrates how to construct a sidebar with nested dropdown menus using Flowbite Vue components. It utilizes FwbSidebar, FwbSidebarItem, and FwbSidebarDropdownItem to create a hierarchical navigation structure. The example includes SVG icons for menu items and a 'Pro' badge for a specific item.

```vue
<template>
  <fwb-sidebar>
    <fwb-sidebar-item>
      <template #icon>
        <svg
            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 22 21"
        >
          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
        </svg>
      </template>
      <template #default>Dashboard</template>
    </fwb-sidebar-item>
    <fwb-sidebar-item>
      <template #icon>
        <svg
            class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 18 18"
        >
          <path
              d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"
          />
        </svg>
      </template>
      <template #default>Kanban</template>
      <template #suffix>
        <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
      </template>
    </fwb-sidebar-item>
    <fwb-sidebar-dropdown-item>
      <template #icon>
        <svg
            class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 22 21"
        >
          <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
          <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
        </svg>
      </template>
      <template #trigger> E-commerce </template>
      <template #default>
        <fwb-sidebar-item class="pl-11"> Products </fwb-sidebar-item>
        <fwb-sidebar-item class="pl-11"> Sign In </fwb-sidebar-item>
        <fwb-sidebar-item class="pl-11"> Sign Up </fwb-sidebar-item>
      </template>
    </fwb-sidebar-dropdown-item>
  </fwb-sidebar>
</template>
<script setup>
  import { FwbSidebar, FwbSidebarItem, FwbSidebarDropdownItem } from 'flowbite-vue'
</script>
```

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

### Basic Radio Example

Source: https://github.com/themesberg/flowbite-vue/blob/main/docs/components/radio.md

Demonstrates the basic usage of the FwbRadio component in Vue. It allows users to select one option from a set. Requires Vue and FwbRadio from flowbite-vue.

```vue
<template>
  <fwb-radio v-model="picked" name="radio" label="Radio 1" value="one" />
  <fwb-radio v-model="picked" name="radio" label="Radio 2" value="two" />
</template>

<script setup>
import { ref } from 'vue'
import { FwbRadio } from 'flowbite-vue'

const picked = ref()
</script>
```