Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your account here. Click save when you're done.

Installation

npm

npx @galaxy-stack/nebula-cli@latest add tabs

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add tabs

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add tabs

bun

bunx @galaxy-stack/nebula-cli@latest add tabs

global

# If you have installed galaxy-design globally
galaxy-design add tabs

Usage

Vue

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

<template>
  <Tabs default-value="account" class="w-[400px]">
    <TabsList>
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="password">Password</TabsTrigger>
    </TabsList>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">
      Change your password here.
    </TabsContent>
  </Tabs>
</template>

React

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui'

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Make changes to your account here.
      </TabsContent>
      <TabsContent value="password">
        Change your password here.
      </TabsContent>
    </Tabs>
  )
}

Angular

import { Component } from '@angular/core';
import { TabsComponent, TabsListComponent, TabsTriggerComponent, TabsContentComponent } from '@/components/ui';

@Component({
  selector: 'app-tabs-demo',
  standalone: true,
  imports: [TabsComponent, TabsListComponent, TabsTriggerComponent, TabsContentComponent],
  template: `
    <ui-tabs [value]="activeTab" (valueChange)="activeTab = $event" class="w-[400px]">
      <ui-tabs-list>
        <ui-tabs-trigger value="account" [isActive]="activeTab === 'account'" (triggerClick)="activeTab = $event">
          Account
        </ui-tabs-trigger>
        <ui-tabs-trigger value="password" [isActive]="activeTab === 'password'" (triggerClick)="activeTab = $event">
          Password
        </ui-tabs-trigger>
      </ui-tabs-list>
      <ui-tabs-content value="account" [isActive]="activeTab === 'account'">
        Make changes to your account here.
      </ui-tabs-content>
      <ui-tabs-content value="password" [isActive]="activeTab === 'password'">
        Change your password here.
      </ui-tabs-content>
    </ui-tabs>
  `
})
export class TabsDemoComponent {
  activeTab = 'account';
}

API Reference

Props

Prop	Type	Default	Description	Frameworks
value	string	undefined	Controlled active tab value	All
defaultValue	string	undefined	Initial active tab value	All
onValueChange	(value: string) => void	-	Called when active tab changes	All
orientation	'horizontal' | 'vertical'	'horizontal'	Layout orientation for tab list	All
dir	'ltr' | 'rtl'	'ltr'	Reading direction for keyboard navigation	React, Vue, Angular
activationMode	'automatic' | 'manual'	'automatic'	Whether tabs activate on focus or require explicit activation	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Subcomponents

TabsList

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

TabsTrigger

Prop	Type	Default	Description	Frameworks
value	string	-	Value of the tab this trigger controls	All
disabled	boolean	false	Disables the trigger	All
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

TabsContent

Prop	Type	Default	Description	Frameworks
value	string	-	Value of the tab this content belongs to	All
forceMount	boolean	false	Force mount content even when inactive	React, Vue
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)