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 { Tabs, Tab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>
<template>
  <flowbite-themable :theme="theme">
      <tabs :variant="variant" class="p-5">
        ...
      </tabs>
  </flowbite-themable>
</template>

<script setup>
import { Tabs, Tab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>
<template>
  <flowbite-themable :theme="theme">
      <tabs :variant="variant" class="p-5">
        ...
      </tabs>
  </flowbite-themable>
</template>

variant: pills

First
Second
Third
Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

variant: underline

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

variant: default

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

First
Second
Third
Fourth

vue

<script setup>
import { Dropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
  <flowbite-themable :theme="theme">
      <dropdown>
        ...
      </dropdown>
  </flowbite-themable>
</template>

<script setup>
import { Dropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
  <flowbite-themable :theme="theme">
      <dropdown>
        ...
      </dropdown>
  </flowbite-themable>
</template>

Button

vue

<script setup>
import { Button, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
  <flowbite-themable :theme="theme">
      <Button>
        ...
      </Button>
  </flowbite-themable>
</template>

<script setup>
import { Button, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
  <flowbite-themable :theme="theme">
      <Button>
        ...
      </Button>
  </flowbite-themable>
</template>

Vue Themable Configuration - Flowbite ​

Tabs ​

variant: pills ​

variant: underline ​

variant: default ​

Dropdown ​

Button ​