Get Started

# Install via npm
npm install react-awesome-tabs

// Import awesome tabs
import Tabs, { Tab } from 'react-awesome-tabs';

<!-- Don't forget style sheet -->
<link rel="stylesheet" href="path/to/css/react-awesome-tabs.css">

// Let's do the simple one
export class Simple extends Component {
    handleTabSwitch(active) {
        this.setState({ activeTab: active });
    }

    constructor(props) {
        super(props);
        this.state = {
            activeTab: 0
        };
    }

    render() {
        return (
            <Tabs
                active={ this.state.activeTab }
                onTabSwitch={ this.handleTabSwitch.bind(this) }
            >
                <Tab title="Tab1">foo</Tab>
                <Tab title="Tab2">bar</Tab>
                <Tab title="Tab3">baz</Tab>
            </Tabs>
        );
    }
}

ReactDOM.render((
    <Simple></Simple>
), document.getElementById('simple'));

1. Simple One

2. Drag It!

3. Let's Make Some Change...

4. Make It Lively as Well