Nuxt•3mo ago

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

2 Replies

Hi @WiFi Plug. 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>

<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"
/>

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

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: ----------------------

kapa.ai•3mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

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

Did you find this page helpful?