# Tabs Advanced 2 - Controlled

> Controlled Tabs.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/tabs-tabs-advanced-2).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/tabs-tabs-advanced-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/tabs-tabs-advanced-2-light-2035c66c3cf09de8.png
- Registry item: https://shadcnblocks.com/r/tabs-tabs-advanced-2.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/tabs-tabs-advanced-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `tabs`

## Files

### `example/tabs/tabs-advanced-2.tsx`

```tsx
"use client";

import { useState } from "react";

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

export const title = "Controlled Tabs";

const Example = () => {
  const [activeTab, setActiveTab] = useState("step1");

  const handleNext = () => {
    if (activeTab === "step1") setActiveTab("step2");
    else if (activeTab === "step2") setActiveTab("step3");
  };

  const handlePrevious = () => {
    if (activeTab === "step3") setActiveTab("step2");
    else if (activeTab === "step2") setActiveTab("step1");
  };

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Tabs onValueChange={setActiveTab} value={activeTab}>
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="step1">Step 1</TabsTrigger>
          <TabsTrigger value="step2">Step 2</TabsTrigger>
          <TabsTrigger value="step3">Step 3</TabsTrigger>
        </TabsList>
        <TabsContent value="step1">
          <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
            <h3 className="mb-2 text-lg font-semibold">
              Step 1: Basic Information
            </h3>
            <p className="mb-4 text-sm text-muted-foreground">
              Let's start by collecting some basic information about your
              project.
            </p>
            <div className="space-y-4">
              <div className="rounded-md border p-4">
                <p className="text-sm font-medium">Project Name</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  Enter a name for your project
                </p>
              </div>
              <div className="rounded-md border p-4">
                <p className="text-sm font-medium">Description</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  Brief description of what you're building
                </p>
              </div>
            </div>
          </div>
        </TabsContent>
        <TabsContent value="step2">
          <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
            <h3 className="mb-2 text-lg font-semibold">
              Step 2: Configuration
            </h3>
            <p className="mb-4 text-sm text-muted-foreground">
              Configure the settings and preferences for your project.
            </p>
            <div className="space-y-4">
              <div className="rounded-md border p-4">
                <p className="text-sm font-medium">Framework</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  Choose your preferred framework
                </p>
              </div>
              <div className="rounded-md border p-4">
                <p className="text-sm font-medium">Build Tool</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  Select your build tool
                </p>
              </div>
            </div>
          </div>
        </TabsContent>
        <TabsContent value="step3">
          <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
            <h3 className="mb-2 text-lg font-semibold">
              Step 3: Review & Confirm
            </h3>
            <p className="mb-4 text-sm text-muted-foreground">
              Review your selections and confirm to proceed.
            </p>
            <div className="space-y-4">
              <div className="rounded-md border p-4">
                <p className="text-sm font-medium">Summary</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  Everything looks good! You're ready to start building.
                </p>
              </div>
            </div>
          </div>
        </TabsContent>
      </Tabs>
      <div className="flex justify-between">
        <Button
          disabled={activeTab === "step1"}
          onClick={handlePrevious}
          variant="outline"
        >
          Previous
        </Button>
        <Button
          disabled={activeTab === "step3"}
          onClick={handleNext}
          variant="default"
        >
          Next
        </Button>
      </div>
    </div>
  );
};

export default Example;
```