DocsComponentsTabs

Tabs

Panels shown one at a time.

Alpine.js4 files

<pb-ui.tabs value="account" class="w-full max-w-sm">
  <pb-ui.tabs-list>
    <pb-ui.tabs-trigger value="account">Account</pb-ui.tabs-trigger>
    <pb-ui.tabs-trigger value="password">Password</pb-ui.tabs-trigger>
  </pb-ui.tabs-list>
  <pb-ui.tabs-content value="account">
    <div class="rounded-xl border p-6 text-sm">
      <h3 class="font-semibold">Account</h3>
      <p class="mt-1 text-muted-foreground">Make changes to your profile here.</p>
    </div>
  </pb-ui.tabs-content>
  <pb-ui.tabs-content value="password">
    <div class="rounded-xl border p-6 text-sm">
      <h3 class="font-semibold">Password</h3>
      <p class="mt-1 text-muted-foreground">Choose a new password.</p>
    </div>
  </pb-ui.tabs-content>
</pb-ui.tabs>

Installation

pyblade-ui add tabs

Install the dependencies
Alpine.js, loaded in your <head>.

Copy these files into your project

components/ui/tabs.html

@props({'value': ''})
<div data-slot="tabs" x-data="{ tab: '{{ value }}' }" {{ attributes.cn("flex flex-col gap-2") }}>{{ slot }}</div>

components/ui/tabs_list.html

<div role="tablist" data-slot="tabs-list" {{ attributes.cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground") }}>{{ slot }}</div>

components/ui/tabs_trigger.html

@props({'value': ''})
<button type="button" role="tab" data-slot="tabs-trigger"
  x-on:click="tab = '{{ value }}'"
  x-bind:aria-selected="tab === '{{ value }}'"
  x-bind:data-state="tab === '{{ value }}' ? 'active' : 'inactive'"
  {{ attributes.cn(
    "inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground",
    "data-[state=active]:bg-background data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
  ) }}>{{ slot }}</button>

components/ui/tabs_content.html

@props({'value': ''})
<div role="tabpanel" data-slot="tabs-content" x-show="tab === '{{ value }}'" x-cloak {{ attributes.cn("flex-1 outline-none") }}>{{ slot }}</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.tabs> <pb-ui.tabs-list> <pb-ui.tabs-trigger> <pb-ui.tabs-content> are available in all your templates.

<pb-ui.tabs value="account">
  <pb-ui.tabs-list>
    <pb-ui.tabs-trigger value="account">Account</pb-ui.tabs-trigger>
    <pb-ui.tabs-trigger value="password">Password</pb-ui.tabs-trigger>
  </pb-ui.tabs-list>
  <pb-ui.tabs-content value="account">...</pb-ui.tabs-content>
  <pb-ui.tabs-content value="password">...</pb-ui.tabs-content>
</pb-ui.tabs>

Props

<pb-ui.tabs>

Prop	Default
value	''

<pb-ui.tabs-trigger>

Prop	Default
value	''

<pb-ui.tabs-content>

Prop	Default
value	''

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Pagination Accordion ›