Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Controlled Tabs
React tabs with controlled state using value and onValueChange props plus Next and Previous buttons for programmatic navigation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes users need guided workflows—not free navigation between tabs. This React controlled tabs pattern uses useState with value and onValueChange. Built with shadcn/ui Tabs in controlled mode with external navigation buttons, the state management enables wizards—perfect for multi-step forms, onboarding flows, setup wizards, linear processes, guided tours, or any tabbed interface where programmatic tab control validates steps or enforces sequential navigation and external buttons guide users through workflow.
Step 1: Basic Information
Let's start by collecting some basic information about your project.
Project Name
Enter a name for your project
Description
Brief description of what you're building
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Tabs
Uncontrolled tabs with defaultValue
Tabs with Badge Counts
Tabs with quantity indicators
Stepper
Step-by-step progress indicator
Form Wizard
Multi-step form with validation
Nested Tabs
Hierarchical tabs
Onboarding Flow
User onboarding sequence