Tabbar

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download tab-bar -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { TabBar } from "@/components/ui/tab-bar";
import { TabBarItem } from "@/components/ui/tab-bar";

const args = {
  "variant": "default",
  "icon": "House",
  "text": "Home",
  "active": true,
} satisfies Partial<
  InstanceType<typeof TabBarItem> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "default" | "fab" };
</script>

<template>
  <div class="h-[100px]">
    <div class="absolute bottom-0 w-full flex justify-center">
      <TabBar v-bind="args">
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
      </TabBar>
    </div>
  </div>
</template>

Examples

Main

<script setup lang="ts">
import { TabBar } from "@/components/ui/tab-bar";
import { TabBarItem } from "@/components/ui/tab-bar";

const args = {
  "variant": "default",
  "icon": "CircleDashed",
  "text": "Label",
} satisfies Partial<
  InstanceType<typeof TabBarItem> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "default" | "fab" };
</script>

<template>
  <div class="h-[100px]">
    <div class="absolute bottom-0 w-full flex justify-center">
      <TabBar>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
      </TabBar>
    </div>
  </div>
</template>

With Fab

<script setup lang="ts">
import { TabBar } from "@/components/ui/tab-bar";
import { TabBarItem } from "@/components/ui/tab-bar";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "default",
  "icon": "House",
  "text": "Home",
} satisfies Partial<
  InstanceType<typeof TabBarItem> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "default" | "fab" };
</script>

<template>
  <div class="h-[100px]">
    <div class="absolute bottom-0 w-full flex justify-center">
      <TabBar>
        <TabBarItem v-bind="args" @click="console.log('Home')"> </TabBarItem>
        <TabBarItem icon="Calendar" text="Calendario"> </TabBarItem>
        <TabBarItem variant="fab">
          <Button icon="Plus" size="lg" class="px-3" />
        </TabBarItem>
        <TabBarItem icon="Users" text="Persone"> </TabBarItem>
        <TabBarItem icon="Building2" text="Azienda"> </TabBarItem>
      </TabBar>
    </div>
  </div>
</template>

Three Items

<script setup lang="ts">
import { TabBar } from "@/components/ui/tab-bar";
import { TabBarItem } from "@/components/ui/tab-bar";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "default",
} satisfies Partial<
  InstanceType<typeof TabBarItem> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "default" | "fab" };
</script>

<template>
  <div class="h-[100px]">
    <div class="absolute bottom-0 w-full flex justify-center">
      <TabBar>
        <TabBarItem
          v-bind="args"
          @click="console.log('Home')"
          icon="House"
          text="Home"
        >
        </TabBarItem>
        <TabBarItem variant="fab">
          <Button icon="Plus" size="lg" class="px-3" />
        </TabBarItem>
        <TabBarItem icon="Building2" text="Azienda"> </TabBarItem>
      </TabBar>
    </div>
  </div>
</template>

Long Label

<script setup lang="ts">
import { TabBar } from "@/components/ui/tab-bar";
import { TabBarItem } from "@/components/ui/tab-bar";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "default",
} satisfies Partial<
  InstanceType<typeof TabBarItem> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "default" | "fab" };
</script>

<template>
  <div class="h-[100px]">
    <div class="absolute bottom-0 w-full flex justify-center">
      <TabBar>
        <TabBarItem
          v-bind="args"
          icon="House"
          text="two rows text too long"
          @click="console.log('Home')"
        >
        </TabBarItem>
        <TabBarItem icon="Calendar" text="two rows text too long again">
        </TabBarItem>
        <TabBarItem variant="fab">
          <Button icon="Plus" size="lg" class="px-3" />
        </TabBarItem>
        <TabBarItem icon="Users" text="Persone"> </TabBarItem>
        <TabBarItem icon="Building2" text="Azienda"> </TabBarItem>
      </TabBar>
    </div>
  </div>
</template>

With External

<script setup lang="ts">
import { TabBar } from "@/components/ui/tab-bar";
import { TabBarItem } from "@/components/ui/tab-bar";

const args = {
  "variant": "default",
} satisfies Partial<
  InstanceType<typeof TabBarItem> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { variant?: "default" | "fab" };
</script>

<template>
  <TabBar
    ><TabBarItem href="#" icon="House">Home</TabBarItem
    ><TabBarItem
      href="https://frontfriend.dev"
      target="_blank"
      rel="noreferrer"
      icon="ExternalLink"
      >Website</TabBarItem
    ></TabBar
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

TabBar

TabBarItem

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.