Mishka

Tabs

New version v0.0.1 🚀

Interactive tab component supporting both horizontal and vertical orientations, designed for Phoenix and Phoenix LiveView, enabling seamless content switching for enhanced user navigation.

Installation:

mix mishka.ui.gen.component tabs

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

Overview of the Phoenix LiveView Tabs Component

The Mishka Chelekom Tabs component is a highly customizable Phoenix LiveView tool for organizing content in an intuitive tab-based interface. It is ideal for managing multiple sections of information or forms within a single page. This component supports both horizontal and vertical tab layouts, offering a wide range of styling options for colors, sizes, and border styles to match your app's design seamlessly.

Email *

Password *

Need to create an account? Sign up

Name *

Email *

Password *

Already have an account? Login

This Phoenix LiveView component also offers multiple tab styles, including active, inactive, or disabled states, making it easy to organize and navigate complex content. The flexibility in vertical and horizontal tab layouts ensures a responsive and visually appealing user experience, tailored to different use cases.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

NOTICE: each tab component needs a unique ID

Base Variant

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<!--Each tab slot is related to a panel slot in order-->
<.tabs>
  <:tab></:tab>
  <:tab></:tab>
  <:tab></:tab>


  <:panel></:panel>
  <:panel></:panel>
  <:panel></:panel>
</.tabs>

Default Variant

The Mishka Chelekom tabs of the Mishka Chelekom Tabs component provides a simple and clean style where only the active tab’s color and border color are changed.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->
<.tabs variant="default" color="white"></.tabs>
<.tabs variant="default" color="primary"></.tabs>
<.tabs variant="default" color="secondary"></.tabs>
<.tabs variant="default" color="dark"></.tabs>
<.tabs variant="default" color="success"></.tabs>
<.tabs variant="default" color="warning"></.tabs>
<.tabs variant="default" color="danger"></.tabs>
<.tabs variant="default" color="info"></.tabs>
<.tabs variant="default" color="light"></.tabs>
<.tabs variant="default" color="misc"></.tabs>
<.tabs variant="default" color="dawn"></.tabs>

Pills Variant

The Pills Variant of the Mishka Chelekom Tabs component features an active tab with distinct background and text color changes, creating a sleek, pill-like shape. This variant offers customizable border radius options, giving it a modern, clean look that seamlessly fits into different design styles while clearly indicating the active tab.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs variant="pills" color="white"></.tabs>
<.tabs variant="pills" color="primary"></.tabs>
<.tabs variant="pills" color="secondary"></.tabs>
<.tabs variant="pills" color="dark"></.tabs>
<.tabs variant="pills" color="success"></.tabs>
<.tabs variant="pills" color="warning"></.tabs>
<.tabs variant="pills" color="danger"></.tabs>
<.tabs variant="pills" color="info"></.tabs>
<.tabs variant="pills" color="light"></.tabs>
<.tabs variant="pills" color="misc"></.tabs>
<.tabs variant="pills" color="dawn"></.tabs>

Size prop

The size attribute in the Mishka Chelekom tabs component offers the following options: extra_small, small, medium, large, and extra_large.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs size="extra_small"></.tabs>
<.tabs size="small"></.tabs>
<.tabs size="medium"></.tabs>
<.tabs size="large"></.tabs>
<.tabs size="extra_large"></.tabs>

Border prop

The border attribute in the Mishka Chelekom tabs component offers various size options, including extra_small, small, medium, large, and extra_large.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs border="extra_small"></.tabs>
<.tabs border="small"></.tabs>
<.tabs border="medium"></.tabs>
<.tabs border="large"></.tabs>
<.tabs border="extra_large"></.tabs>

Rounded prop

The rounded prop offers values like extra_small, small, medium, large, and extra_large. It only applys on pills variant.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs rounded="extra_small"></.tabs>
<.tabs rounded="small"></.tabs>
<.tabs rounded="medium"></.tabs>
<.tabs rounded="large"></.tabs>
<.tabs rounded="extra_large"></.tabs>

Padding prop

The padding prop offers values such as extra_small, small, medium, large, and extra_large. You can Change padding within tabs panels.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs padding="extra_small"></.tabs>
<.tabs padding="small"></.tabs>
<.tabs padding="medium"></.tabs>
<.tabs padding="large"></.tabs>
<.tabs padding="extra_large"></.tabs>

Font Weight prop

The font_weight prop allows developers to customize the font weight of the text inside the tabs by using Tailwind CSS's built-in font weight classes. For instance, users can apply classes like font-normal, font-bold, or font-extrabold, among others, to adjust the thickness and emphasis of the text. This flexibility enables developers to ensure that the tabs’s text aligns with the overall typography and design of their application.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs font_weight="mefont-bolddium"></.tabs>
<.tabs font_weight="font-black"></.tabs>
<.tabs font_weight="font-light"></.tabs>

Tab gap prop

The gap prop in the Mishka Chelekom Tabs component allows you to control the spacing between individual tabs.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs gap="extra_small"></.tabs>
<.tabs gap="small"></.tabs>
<.tabs gap="medium"></.tabs>
<.tabs gap="large"></.tabs>
<.tabs gap="extra_large"></.tabs>

<.tabs vertical gap="extra_small"></.tabs>
<.tabs vertical gap="small"></.tabs>
<.tabs vertical gap="medium"></.tabs>
<.tabs vertical gap="large"></.tabs>
<.tabs vertical gap="extra_large"></.tabs>

Tab vertical prop

The vertical prop in the Mishka Chelekom Tabs component is a boolean attribute that controls the orientation of the tabs. When set to true, the tabs are displayed vertically, stacking one on top of the other. If set to false or left out, the tabs maintain their default horizontal layout. This simple boolean toggle allows you to easily adjust the tab orientation to suit your design needs, making it versatile for different layouts, such as sidebars or narrow spaces, without requiring significant changes to the overall structure.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs vertical></.tabs>
<.tabs variant="pills" vertical></.tabs>

Tab placement prop

The placement attribute in the Mishka Chelekom Tabs component, when used in vertical orientation, allows you to align the tabs to different positions within the container. By default, it's set to start, aligning the tabs at the top. You can modify it to center to center the tabs or end to place them at the bottom. This gives you flexibility in organizing the vertical layout, making it easy to adapt the component to various design requirements.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<!--Start is default-->
<.tabs vertical placement="start"></.tabs>
<.tabs vertical placement="end"></.tabs>

Tab slot

You can easily add tab buttons using the tab slot in the Mishka Chelekom Tabs component, without needing to create new elements.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs>
  <:tab>Profile</:tab>
  <:tab>Tickets</:tab>
  <:tab>Settings</:tab>
</.tabs>

Tab slot icons props

The icon, icon_class, and icon_position are key props of the tab slot in the Mishka Chelekom Tabs component, designed to enhance the visual appeal and functionality of each tab. The icon prop allows you to display an icon alongside the tab label, improving user recognition. With the icon_class prop, you can apply custom CSS classes to style the icon, giving you control over its appearance. Additionally, the icon_position prop lets you decide whether the icon appears on the left or right of the tab label, offering flexibility in layout design.

Use class prop to add your custom classes to each item slot

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<!--icon_position default is start-->

<.tabs>
  <:tab icon="hero-home" icon_class="your_classes"></:tab>
  <:tab icon="hero-home" icon_class="your_classes"></:tab>
  <:tab icon="hero-home" icon_class="your_classes" icon_position="end"></:tab>
  <:tab icon="hero-home" icon_class="your_classes" icon_position="end"></:tab>
</.tabs>

Tab slot active props

The active prop in the Mishka Chelekom Tabs component determines which tab is currently active. By default, the first tab is set to be active unless otherwise specified. When the active prop is set to true for a specific tab, that tab becomes highsilvered, and its corresponding content is displayed, ensuring users know which tab is currently in focus. This prop helps manage the visibility and navigation between different tab contents effectively.

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<.tabs>
  <:tab></:tab>
  <:tab active></:tab>
  <:tab></:tab>
</.tabs>

<.tabs>
  <:tab active></:tab>
  <:tab></:tab>
  <:tab></:tab>
</.tabs>

<.tabs>
  <:tab active></:tab>
  <:tab></:tab>
  <:tab active></:tab>
</.tabs>

Tab panel slot

The panel slot in the Mishka Chelekom Tabs component is required and serves as the container for the content associated with each tab. This slot displays the content that corresponds to the active tab, ensuring that users see the relevant information when they interact with different tabs.

Use class prop to add your custom classes to each panel slot

The Profile tab allows you to view and edit your personal details. Keep your information up to date to ensure a seamless experience across the platform.

In the Tickets tab, you can manage all your active and past tickets. Whether you need assistance or just want to check your ticket history, this tab has all the relevant details.

The Settings tab gives you access to customizable options for your account. Here, you can adjust notifications, privacy settings, and other preferences to personalize your experience.

<!--Each tab needs a unique ID-->

<!--Each tab slot is related to a panel slot in order-->
<.tabs>
  <:tab></:tab>
  <:tab></:tab>
  <:tab></:tab>


  <:panel></:panel>
  <:panel></:panel>
  <:panel></:panel>
</.tabs>

Tabs Component Props

Name	Type	Required	Description
id	string	Yes	A unique identifier used to manage state and interaction.
variant	string	No	Determines the style of the tabs. Values: default, base, pills.
color	string	No	Determines the color theme of the tabs. Values: base, natural, primary, secondary, success, etc.
border	string	No	Determines the border style. Default is none.
hide_list_border	boolean	No	To remove tab list border. Default is false.
full_width_tab	boolean	No	To make border tabs buttons full width. Default is false.
content_padding	string	No	Control panels padding size. Default is extra_small.
tab_border_size	string	No	Sets the border style for the tab. Default is small.
size	string	No	Determines the overall size of the elements. Default is small.
gap	string	No	Determines the gap between tabs.
rounded	string	No	Determines the border radius. Default is none.
font_weight	string	No	Determines custom class for the font weight. Default is font-normal.
padding	string	No	Determines padding for items. Default is extra_small.
triggers_position	string	No	Determines the position of triggers. Default is extra_small.
vertical	boolean	No	Determines whether the tabs are displayed vertically. Default is false.
placement	string	No	Specifies the placement of the tabs. Default is start.
class	string	No	Custom CSS class for additional styling. Default is nil.

Tabs CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - pills	Yes
`--color`	string	natural - primary - secondary - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - none	Yes
`--only`	string	tabs	Yes
`--module`	string	Something	NO