Tabs

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@line/abc-def-react/tabs";

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@line/abc-def-vue/tabs";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@line/abc-def-react/tabs";

export function Example() {
  return (
    <Tabs defaultValue="react">
      <TabsList>
        <TabsTrigger value="react">React</TabsTrigger>
        <TabsTrigger value="vue">Vue</TabsTrigger>
      </TabsList>
      <TabsContent value="react">React package classes.</TabsContent>
      <TabsContent value="vue">Vue package classes.</TabsContent>
    </Tabs>
  );
}

<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@line/abc-def-vue/tabs";
</script>

<template>
  <Tabs default-value="react">
    <TabsList>
      <TabsTrigger value="react">React</TabsTrigger>
      <TabsTrigger value="vue">Vue</TabsTrigger>
    </TabsList>
    <TabsContent value="react">React package classes.</TabsContent>
    <TabsContent value="vue">Vue package classes.</TabsContent>
  </Tabs>
</template>

Component tokens

Composition exports

Usage notes

• Use for peer views.
• Do not hide unrelated workflows behind tabs.
• Related component tokens use the `tabs` token group in `@line/abc-def-styles/css`.