Skip to content
Alpine Zag

Tabs

Tabs are used to display multiple sections of content.

Tab 1 Content
Tab 2 Content
Zag.js Reference 
---


---


<div x-cloak x-data x-tabs="{ value: 'tab-1' }">
  <div x-tabs:list>
    <button x-tabs:trigger="{ value: 'tab-1' }">Tab 1</button>
    <button x-tabs:trigger="{ value: 'tab-2' }">Tab 2</button>
  </div>
  <div x-tabs:content="{ value: 'tab-1' }">Tab 1 Content</div>
  <div x-tabs:content="{ value: 'tab-2' }" }>Tab 2 Content</div>
</div>


<style>
  [data-part="root"] {
    @apply w-72 bg-white border border-zinc-200/60 rounded-md shadow-sm overflow-hidden;
  }


  [data-part="list"] {
    @apply flex w-full border-b border-zinc-200/60;
  }


  [data-part="trigger"] {
    @apply p-2 text-zinc-700 font-medium border-b-2 border-b-transparent bg-white flex-1 cursor-pointer;
  }


  [data-part="trigger"][data-selected] {
    @apply text-zinc-800 border-b-2 border-b-zinc-700;
  }


  [data-part="content"] {
    @apply p-4 text-zinc-600;
  }
</style>