Acronis UIKit
Legacy (shadcn-uikit)Components

Tabs

A tabbed interface for organizing content into switchable panels.

Usage

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple tabbed panel.

Content for Tab 1

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function TabsBasic() {
  return (
    <Tabs defaultValue="tab1" className="w-full">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1" className="mt-4">
        <p>Content for Tab 1</p>
      </TabsContent>
      <TabsContent value="tab2" className="mt-4">
        <p>Content for Tab 2</p>
      </TabsContent>
      <TabsContent value="tab3" className="mt-4">
        <p>Content for Tab 3</p>
      </TabsContent>
    </Tabs>
  );
}

Account Settings

Tabs used for a settings page layout.

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button, Input, Label } from '@acronis-platform/shadcn-uikit/react';

export function TabsAccountSettings() {
  return (
    <Tabs defaultValue="account" className="w-full">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Name</Label>
          <Input id="name" defaultValue="John Doe" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="username">Username</Label>
          <Input id="username" defaultValue="@johndoe" />
        </div>
        <Button>Save changes</Button>
      </TabsContent>
      <TabsContent value="password" className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="current">Current password</Label>
          <Input id="current" type="password" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="new">New password</Label>
          <Input id="new" type="password" />
        </div>
        <Button>Change password</Button>
      </TabsContent>
    </Tabs>
  );
}

Multiple

Multiple tab groups on the same page.

Overview

View a summary of your account activity and key metrics.

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function TabsMultiple() {
  return (
    <Tabs defaultValue="overview" className="w-full">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="mt-4">
        <div className="rounded-lg border p-6">
          <h4 className="mb-2 font-semibold">Overview</h4>
          <p className="text-sm text-muted-foreground">
            View a summary of your account activity and key metrics.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="analytics" className="mt-4">
        <div className="rounded-lg border p-6">
          <h4 className="mb-2 font-semibold">Analytics</h4>
          <p className="text-sm text-muted-foreground">
            Detailed analytics and insights about your performance.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="reports" className="mt-4">
        <div className="rounded-lg border p-6">
          <h4 className="mb-2 font-semibold">Reports</h4>
          <p className="text-sm text-muted-foreground">
            Generate and download custom reports.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="notifications" className="mt-4">
        <div className="rounded-lg border p-6">
          <h4 className="mb-2 font-semibold">Notifications</h4>
          <p className="text-sm text-muted-foreground">
            Manage your notification preferences.
          </p>
        </div>
      </TabsContent>
    </Tabs>
  );
}

Full Width

Tabs stretched to fill the container width.

First tab content

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function TabsFullWidth() {
  return (
    <Tabs defaultValue="first" className="w-full">
      <TabsList className="grid w-full grid-cols-5">
        <TabsTrigger value="first">First</TabsTrigger>
        <TabsTrigger value="second">Second</TabsTrigger>
        <TabsTrigger value="third">Third</TabsTrigger>
        <TabsTrigger value="fourth">Fourth</TabsTrigger>
        <TabsTrigger value="last">Last</TabsTrigger>
      </TabsList>
      <TabsContent value="first" className="mt-4">
        <p>First tab content</p>
      </TabsContent>
      <TabsContent value="second" className="mt-4">
        <p>Second tab content</p>
      </TabsContent>
      <TabsContent value="third" className="mt-4">
        <p>Third tab content</p>
      </TabsContent>
      <TabsContent value="fourth" className="mt-4">
        <p>Fourth tab content</p>
      </TabsContent>
      <TabsContent value="last" className="mt-4">
        <p>Last tab content</p>
      </TabsContent>
    </Tabs>
  );
}

Disabled

Tabs with some triggers disabled.

This tab is available.

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function TabsDisabled() {
  return (
    <Tabs defaultValue="available" className="w-full">
      <TabsList>
        <TabsTrigger value="available">Available</TabsTrigger>
        <TabsTrigger value="disabled" disabled>
          Disabled
        </TabsTrigger>
        <TabsTrigger value="another">Another</TabsTrigger>
      </TabsList>
      <TabsContent value="available" className="mt-4">
        <p>This tab is available.</p>
      </TabsContent>
      <TabsContent value="disabled" className="mt-4">
        <p>This content is not accessible.</p>
      </TabsContent>
      <TabsContent value="another" className="mt-4">
        <p>Another available tab.</p>
      </TabsContent>
    </Tabs>
  );
}

Product

Tabs styled for a product feature showcase.

Product Description

This is a high-quality product designed to meet your needs. It features advanced technology and premium materials for long-lasting durability.

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function TabsProduct() {
  return (
    <Tabs defaultValue="description" className="w-full">
      <TabsList>
        <TabsTrigger value="description">Description</TabsTrigger>
        <TabsTrigger value="specifications">Specifications</TabsTrigger>
        <TabsTrigger value="reviews">Reviews</TabsTrigger>
      </TabsList>
      <TabsContent value="description" className="mt-4">
        <div className="space-y-2">
          <h4 className="font-semibold">Product Description</h4>
          <p className="text-sm text-muted-foreground">
            This is a high-quality product designed to meet your needs. It
            features advanced technology and premium materials for long-lasting
            durability.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="specifications" className="mt-4">
        <div className="space-y-2">
          <h4 className="font-semibold">Technical Specifications</h4>
          <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
            <li>Dimensions: 10 x 5 x 2 inches</li>
            <li>Weight: 1.5 lbs</li>
            <li>Material: Premium aluminum</li>
            <li>Color: Space Gray</li>
          </ul>
        </div>
      </TabsContent>
      <TabsContent value="reviews" className="mt-4">
        <div className="space-y-2">
          <h4 className="font-semibold">Customer Reviews</h4>
          <p className="text-sm text-muted-foreground">
            ⭐⭐⭐⭐⭐ 4.8 out of 5 stars (based on 127 reviews)
          </p>
        </div>
      </TabsContent>
    </Tabs>
  );
}

Dashboard

Tabs in a dashboard context with data panels.

Total Users

1,234

Active Sessions

567

Revenue

$12,345

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button, Label } from '@acronis-platform/shadcn-uikit/react';

export function TabsDashboard() {
  return (
    <Tabs defaultValue="summary" className="w-full">
      <TabsList>
        <TabsTrigger value="summary">Summary</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="summary" className="mt-4">
        <div className="grid gap-4 md:grid-cols-3">
          <div className="rounded-lg border p-4">
            <h5 className="mb-2 text-sm font-medium">Total Users</h5>
            <p className="text-2xl font-bold">1,234</p>
          </div>
          <div className="rounded-lg border p-4">
            <h5 className="mb-2 text-sm font-medium">Active Sessions</h5>
            <p className="text-2xl font-bold">567</p>
          </div>
          <div className="rounded-lg border p-4">
            <h5 className="mb-2 text-sm font-medium">Revenue</h5>
            <p className="text-2xl font-bold">$12,345</p>
          </div>
        </div>
      </TabsContent>
      <TabsContent value="activity" className="mt-4">
        <div className="space-y-2 rounded-lg border p-4">
          <p className="text-sm">
            <span className="font-medium">User123</span> logged in
          </p>
          <p className="text-sm">
            <span className="font-medium">User456</span> completed a purchase
          </p>
          <p className="text-sm">
            <span className="font-medium">User789</span> updated their profile
          </p>
        </div>
      </TabsContent>
      <TabsContent value="settings" className="mt-4">
        <div className="space-y-4 rounded-lg border p-4">
          <div className="flex items-center justify-between">
            <Label>Email Notifications</Label>
            <Button variant="outline" size="sm">
              Configure
            </Button>
          </div>
          <div className="flex items-center justify-between">
            <Label>Privacy Settings</Label>
            <Button variant="outline" size="sm">
              Manage
            </Button>
          </div>
        </div>
      </TabsContent>
    </Tabs>
  );
}

Compact

Smaller tabs for dense UI layouts.

Showing all items

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function TabsCompact() {
  return (
    <Tabs defaultValue="all" className="w-full">
      <TabsList className="h-9">
        <TabsTrigger value="all" className="text-xs">
          All
        </TabsTrigger>
        <TabsTrigger value="active" className="text-xs">
          Active
        </TabsTrigger>
        <TabsTrigger value="completed" className="text-xs">
          Completed
        </TabsTrigger>
        <TabsTrigger value="archived" className="text-xs">
          Archived
        </TabsTrigger>
      </TabsList>
      <TabsContent value="all" className="mt-4">
        <p className="text-sm">Showing all items</p>
      </TabsContent>
      <TabsContent value="active" className="mt-4">
        <p className="text-sm">Showing active items</p>
      </TabsContent>
      <TabsContent value="completed" className="mt-4">
        <p className="text-sm">Showing completed items</p>
      </TabsContent>
      <TabsContent value="archived" className="mt-4">
        <p className="text-sm">Showing archived items</p>
      </TabsContent>
    </Tabs>
  );
}

Vertical

Tabs with a vertical orientation.

Profile Information

Preview
View source
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Button, Input, Label } from '@acronis-platform/shadcn-uikit/react';

export function TabsVertical() {
  return (
    <Tabs defaultValue="profile" className="w-full">
      <TabsList>
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
      </TabsList>
      <TabsContent value="profile" className="mt-4 space-y-4">
        <div className="rounded-lg border p-6">
          <h4 className="mb-4 font-semibold">Profile Information</h4>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="display-name">Display Name</Label>
              <Input id="display-name" placeholder="Enter your name" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="bio">Bio</Label>
              <Input id="bio" placeholder="Tell us about yourself" />
            </div>
            <Button>Update Profile</Button>
          </div>
        </div>
      </TabsContent>
      <TabsContent value="billing" className="mt-4">
        <div className="rounded-lg border p-6">
          <h4 className="mb-4 font-semibold">Billing Information</h4>
          <p className="text-sm text-muted-foreground">
            Manage your billing details and payment methods.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="team" className="mt-4">
        <div className="rounded-lg border p-6">
          <h4 className="mb-4 font-semibold">Team Management</h4>
          <p className="text-sm text-muted-foreground">
            Invite and manage team members.
          </p>
        </div>
      </TabsContent>
    </Tabs>
  );
}

API Reference

The Tabs component wraps Base UI Tabs primitives. The Tabs root accepts defaultValue and value/onValueChange for controlled usage. TabsList extends Tabs.List props, TabsTrigger maps to Tabs.Tab, and TabsContent maps to Tabs.Panel.

Edit on GitHub

Sidebar

An application sidebar layout with collapsible navigation, grouping, and mobile support.

Calendar

A date selection component that displays a monthly calendar grid.

On this page

UsageBasicAccount SettingsMultipleFull WidthDisabledProductDashboardCompactVerticalAPI Reference