Tabs

This is a Tabs component system built with Vue 3, wrapping reka-ui Tabs with additional customization and context support. It includes TabsRoot, TabsList, and individual TabListItem components.

Installation

npx shadcn-vue@latest add https://lib.adrianondik.com/r/tabs.json

Basic Usage

<template>
    <Tabs default-value="account">
      <TabsList>
        <TabsTrigger value="account">
          Account
        </TabsTrigger>
        <TabsTrigger value="password">
          Password
        </TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <!-- Your Content-->
      </TabsContent>
      <TabsContent value="password">
        <!-- Your Content-->
      </TabsContent>
    </Tabs>
</template>

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/Components/Tabs';
</script>

With Routing

Use the route name you have defined in web.php

<template>
  <TabsLinkList>
    <TabsLink :href="route('example.index.one')">General</TabsLink>
    <TabsLink :href="route('example.index.two')">Additional</TabsLink>
  </TabsLinkList>
</template>

<script setup lang="ts">
import { TabsLinkList, TabsLink } from '@/Components/Tabs';
</script>

TabsList Props

Prop	Type	Description
class	string	Custom classes applied to the tabs list container.
Any other TabsListProps from reka-ui are forwarded automatically.	-

TabsLink Props

Prop	Type	Description
href	string | Location	Link URL for the tab.
active	boolean	Manually set the active state. If omitted, it uses automatic active detection via useActiveLink.
Any other InertiaLinkProps are forwarded automatically.	-