Binhlaig UI Component

Tabs

Tabs organize related content into separate views and allow users to switch between them.

Installation

Add the Tabs component using the Binhlaig UI CLI.

Terminal

npx binhlaig-ui@latest add tabs

Import

Import the Tabs components from your UI directory.

TypeScript

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

Usage

Use Tabs with a default active value.

Account

Manage your account details and public profile information.

Multiple Tabs

Use three or more tabs to organize larger content groups.

Overview content

Disabled Tab

Disable a tab when its content is unavailable.

This tab is available.

Tabs with Icons

Add icons to make each tab easier to identify.

Dashboard content

Vertical Tabs

Use vertical tabs for settings pages and side navigation.

Profile settings

Manage your personal information.

Settings Tabs

Build a complete settings interface using tabs.

Name

Dashboard Tabs

Use tabs to switch between dashboard views.

Revenue

$24,500

Orders

1,248

Customers

864

Controlled Tabs

Control the active tab using React state.

Active tabaccount

Account settings

Custom Style

Customize tabs using Tailwind CSS classes.

First tab content

API Reference

Components and properties available in the Binhlaig UI Tabs component.

Component	Important Props	Description
`Tabs`	`defaultValue, value, onValueChange, orientation`	The root component that controls tab state.
`TabsList`	`className`	Contains the tab trigger buttons.
`TabsTrigger`	`value, disabled, className`	A button used to select a tab.
`TabsContent`	`value, className`	Displays the content associated with a tab.