Create a wizard using the same settings and configuration as the Tabs component with minor additions to actually build a wizard.

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbWizard',
    array(
        'type' => 'tabs', // 'tabs' or 'pills'
        'tabs' => array(
            array(
                'label' => 'Home',
                'content' => 'Home Content',
                'active' => true
            ),
            array('label' => 'Profile', 'content' => 'Profile Content'),
            array('label' => 'Messages', 'content' => 'Messages Content'),
        ),
    )
);

As described above same configuration as the tabs widget apply to the wizard widget with the following additions:

Wizard has 8 different events that it fires when certain actions are performed. onInit, onShow, onNext, onPrevious, onFirst, onLast, onTabShow, onTabClick

Example usage with events callbacks

$this->widget(
    'booster.widgets.TbWizard',
    array(
        'type' => 'tabs', // 'tabs' or 'pills'
        'options' => array(
            'class' => '',
            'onTabShow' => 'js:function(tab, navigation, index) { if((index+1) > 1) {alert("Tab #" + (index+1));} }',
            'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',
        ),
        'tabs' => array(
            array(
                'label' => 'Home',
                'content' => 'Home Content',
                'active' => true
            ),
            array('label' => 'Profile', 'content' => 'Profile Content'),
            array('label' => 'Messages', 'content' => 'Messages Content'),
        ),
    )
);

Custom Next, Previous, First, Last Buttons & Progress Bar

$this->widget(
    'booster.widgets.TbWizard',
    array(
        'type' => 'tabs', // 'tabs' or 'pills'
        'pagerContent' => '<div style="float:right">
					<input type="button" class="btn button-next" name="next" value="Next" />
					<input type="button" class="btn button-last" name="last" value="Last" />
				</div>
				<div style="float:left">
					<input type="button" class="btn button-first" name="first" value="First" />
					<input type="button" class="btn button-previous" name="previous" value="Previous" />
				</div><br /><br />',
        'options' => array(
            'nextSelector' => '.button-next',
            'previousSelector' => '.button-previous',
            'firstSelector' => '.button-first',
            'lastSelector' => '.button-last',
            'onTabShow' => 'js:function(tab, navigation, index) {
						var $total = navigation.find("li").length;
						var $current = index+1;
						var $percent = ($current/$total) * 100;
						$("#wizard-bar > .progress-bar").css({width:$percent+"%"});
			}',
            'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',
        ),
        'tabs' => array(
            array(
                'label' => 'Home',
                'content' => 'Home Content',
                'active' => true
            ),
            array('label' => 'Profile', 'content' => 'Profile Content'),
            array('label' => 'Messages', 'content' => 'Messages Content'),
        ),
    )
); ?>
<div id="wizard-bar" class="progress progress-striped active">
  <div class="progress-bar"  style="width: 0"></div>
</div>