nuxt ui tabs with the bg color as bg-muted using :ui= | Nuxt | Page 1

Hi @boreal belfry. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To set the background color of Nuxt UI Tabs to use the bg-muted class, you can use the :ui prop to override the list slot styling. The list slot controls the container of the tab triggers, so applying bg-muted there will give the tab bar a muted background.

Here’s an example:

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items = [
  { label: 'Account' },
  { label: 'Password' }
] satisfies TabsItem[]
</script>

<template>
  <UTabs
    :items="items"
    :ui="{ list: 'bg-muted' }"
    class="w-full"
  />
</template>

This will render the tabs with a muted background behind the tab triggers. You can combine this with other classes or variants as needed. The :ui prop allows you to override any slot class, and bg-muted is a valid utility class provided by Nuxt UI’s design tokens for the neutral paletteTabs Theme Tabs Usage.

If you want to combine with the default pill variant background, you can do:

<UTabs
  :items="items"
  variant="pill"
  :ui="{ list: 'bg-elevated bg-muted rounded-lg' }"
  class="w-full"
/>

#nuxt ui tabs with the bg color as bg-muted using :ui=

But for a simple muted background, the first example is sufficient.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: