Using Tabset component in the app

Here, we talk about the Tabset component.

In this article, we'll show how you can use the Tabset component in your application. Before that, let's first have a look at the difference between the Tabset and Tabs components in UI Bakery. Though both of them are used for the same purposes, they do have some slight differences.

You can use these components to:

• Organize complex information

• Improve user experience by reducing visual clutter

• Optimize screen space

• Configure dynamic UI behavior (for example, conditionally display certain tabs based on user roles)

• Enhance navigation and interaction

Now, regarding their structure, the Tabs component only displays the actual series of tabs, while the Tabset component acts as a container so you can customize it with the necessary components. Similar to the Steps/Stepper components, you can use the Tabs component to build your own custom Tabset, define its structure and configure logic. Alternatively, the Tabset component is a better choice if you want a built-in solution that manages both the navigation logic and the actual tab contents.

Use case: Building a Vacations app

You can use the Tabset component in a number of different scenarios, for example, to create dashboards, forms & wizards, user profile sections, data reports, and others. Here, we'll show how you can build a simple Vacations app using the Tabset component:

1. Start by adding the Tabset component to the canvas.

2. Now, configure the contents of each tab, for example:

   1. (Tab 1) Team - Table component displaying our data

   2. (Tab 2) Calendar - generated with the Custom components 2.0

   3. (Tab 3) Requests - Form component

Done! You can, of course, keep customizing it further to suit your needs, for example, add success/error toast notifications when submitting requests, and more. But this is a basic example of a management dashboard that you can build using Tabset.

---

The Tabs component is best suited for cases where the tabs are dynamic - for example, when the tab labels and their content come from an API. In these cases, nothing is hardcoded on the frontend, all data is loaded from the backend at runtime.

To create a custom configuration with the Tabs component, you can use a Container or Card.