flowbite-vue/docs/components/flowbiteThemable/flowbiteThemable.md

<script setup> import FlowbiteThemableExampleTabs from './examples/FlowbiteThemableExampleTabs.vue' import FlowbiteThemableExampleButton from './examples/FlowbiteThemableExampleButton.vue' import FlowbiteThemableExampleDropdown from './examples/FlowbiteThemableExampleDropdown.vue' </script>

Vue Themable Configuration - Flowbite

You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)

:::warning WIP, Do not use it in production :::

Tabs

```vue ... <script setup> import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue' const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple' const variant = 'default' // see tabs docs </script>

### variant: pills
---
<flowbite-themable-example-tabs tabs-variant="pills" />
---

### variant: underline
---
<flowbite-themable-example-tabs tabs-variant="underline" />
---

## Dropdown

<flowbite-themable-example-dropdown />
```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>

Button

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