Tabs

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

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

pnpm exec frontfriend download tabs -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { Tabs } from "@/components/ui/tabs";
import { TabsList } from "@/components/ui/tabs";
import { TabsTrigger } from "@/components/ui/tabs";
import { TabsContent } from "@/components/ui/tabs";
import * as UI from "@/components/ui/tabs";

const Component = UI.Tabs;

const args = {
  "type": "line",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { type?: "solid" | "line" };
</script>

<template>
  <Tabs
    default-value="1"
    class="w-[400px] flex items-center flex-col"
    v-bind="args"
    ><TabsList type="solid"
      ><TabsTrigger value="1">Tab 1</TabsTrigger
      ><TabsTrigger value="2">Tab 2</TabsTrigger
      ><TabsTrigger value="3">Tab 3</TabsTrigger></TabsList
    ><TabsContent value="1" class="text-neutral-mid"
      >Tab 1 content here</TabsContent
    ><TabsContent value="2" class="text-neutral-mid"
      >Tab 2 content here</TabsContent
    ><TabsContent value="3" class="text-neutral-mid"
      >Tab 3 content here</TabsContent
    ></Tabs
  >
</template>

Examples

Line

<script setup lang="ts">
import { Tabs } from "@/components/ui/tabs";
import { TabsList } from "@/components/ui/tabs";
import { TabsTrigger } from "@/components/ui/tabs";
import { TabsContent } from "@/components/ui/tabs";
import * as UI from "@/components/ui/tabs";

const Component = UI.Tabs;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Tabs default-value="1" class="w-[400px] flex items-center flex-col"
    ><TabsList type="line"
      ><TabsTrigger value="1">Tab 1</TabsTrigger
      ><TabsTrigger value="2">Tab 2</TabsTrigger
      ><TabsTrigger value="3">Tab 3</TabsTrigger
      ><TabsTrigger value="4">Tab 4</TabsTrigger
      ><TabsTrigger value="5">Tab 5</TabsTrigger></TabsList
    ><TabsContent value="1" class="text-neutral-mid"
      >Tab 1 content here</TabsContent
    ><TabsContent value="2" class="text-neutral-mid"
      >Tab 2 content here</TabsContent
    ><TabsContent value="3" class="text-neutral-mid"
      >Tab 3 content here</TabsContent
    ><TabsContent value="4" class="text-neutral-mid"
      >Tab 4 content here</TabsContent
    ><TabsContent value="5" class="text-neutral-mid"
      >Tab 5 content here</TabsContent
    ></Tabs
  >
</template>

Solid

<script setup lang="ts">
import { Tabs } from "@/components/ui/tabs";
import { TabsList } from "@/components/ui/tabs";
import { TabsTrigger } from "@/components/ui/tabs";
import { TabsContent } from "@/components/ui/tabs";
import * as UI from "@/components/ui/tabs";

const Component = UI.Tabs;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Tabs default-value="1" class="w-[400px] flex items-center flex-col"
    ><TabsList type="solid"
      ><TabsTrigger value="1">Tab 1</TabsTrigger
      ><TabsTrigger value="2">Tab 2</TabsTrigger
      ><TabsTrigger value="3">Tab 3</TabsTrigger></TabsList
    ><TabsContent value="1" class="text-neutral-mid"
      >Tab 1 content here</TabsContent
    ><TabsContent value="2" class="text-neutral-mid"
      >Tab 2 content here</TabsContent
    ><TabsContent value="3" class="text-neutral-mid"
      >Tab 3 content here</TabsContent
    ></Tabs
  >
</template>

Custom

<script setup lang="ts">
import { Tabs } from "@/components/ui/tabs";
import { TabsList } from "@/components/ui/tabs";
import { TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { TabsContent } from "@/components/ui/tabs";
import * as UI from "@/components/ui/tabs";

const Component = UI.Tabs;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Tabs default-value="1" class="w-[360px] flex items-center flex-col"
    ><TabsList type="line" class="w-full"
      ><TabsTrigger value="1" class="flex-1">Tab 1</TabsTrigger
      ><TabsTrigger value="2" class="flex-1"
        >Tab 2 <Badge variant="main">New</Badge></TabsTrigger
      ></TabsList
    ><TabsContent value="1" class="text-neutral-mid"
      >Tab 1 content here</TabsContent
    ><TabsContent value="2" class="text-neutral-mid"
      >Tab 2 content here</TabsContent
    ></Tabs
  >
</template>

Line With Disabled

<script setup lang="ts">
import { Tabs } from "@/components/ui/tabs";
import { TabsList } from "@/components/ui/tabs";
import { TabsTrigger } from "@/components/ui/tabs";
import { TabsContent } from "@/components/ui/tabs";
import * as UI from "@/components/ui/tabs";

const Component = UI.Tabs;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Tabs default-value="1" class="w-[400px] flex items-center flex-col"
    ><TabsList type="line"
      ><TabsTrigger value="1">Tab 1</TabsTrigger
      ><TabsTrigger value="2">Tab 2</TabsTrigger
      ><TabsTrigger value="3">Tab 3</TabsTrigger
      ><TabsTrigger value="4" disabled>Disabled tab</TabsTrigger
      ><TabsTrigger value="5">Tab 5</TabsTrigger></TabsList
    ><TabsContent value="1" class="text-neutral-mid"
      >Tab 1 content here</TabsContent
    ><TabsContent value="2" class="text-neutral-mid"
      >Tab 2 content here</TabsContent
    ><TabsContent value="3" class="text-neutral-mid"
      >Tab 3 content here</TabsContent
    ><TabsContent value="4" class="text-neutral-mid"
      >Tab 4 content here</TabsContent
    ><TabsContent value="5" class="text-neutral-mid"
      >Tab 5 content here</TabsContent
    ></Tabs
  >
</template>

Solid With Disabled

<script setup lang="ts">
import { Tabs } from "@/components/ui/tabs";
import { TabsList } from "@/components/ui/tabs";
import { TabsTrigger } from "@/components/ui/tabs";
import { TabsContent } from "@/components/ui/tabs";
import * as UI from "@/components/ui/tabs";

const Component = UI.Tabs;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Tabs default-value="1" class="w-[400px] flex items-center flex-col"
    ><TabsList type="solid"
      ><TabsTrigger value="1">Tab 1</TabsTrigger
      ><TabsTrigger value="2">Tab 2</TabsTrigger
      ><TabsTrigger value="3" disabled>Disabled tab</TabsTrigger></TabsList
    ><TabsContent value="1" class="text-neutral-mid"
      >Tab 1 content here</TabsContent
    ><TabsContent value="2" class="text-neutral-mid"
      >Tab 2 content here</TabsContent
    ><TabsContent value="3" class="text-neutral-mid"
      >Tab 3 content here</TabsContent
    ></Tabs
  >
</template>

API reference

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

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

TabsContent

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

TabsList

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`type`	`"solid" \| "line"`	`—`
`variant`	`"default" \| "line"`	`—`

TabsTrigger

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

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