Star on GitHub0

Vertical Tabs

Vertical Tab Component

The VerticalTab component is a versatile and interactive UI element designed for creating vertical tabbed navigation. It provides a smooth user experience with dynamic indicator transitions and customizable styles.

Features

  • Dynamic Indicator: The indicator moves smoothly between tabs, starting from the active tab for better UX.
  • Hover Effects: Highlights tabs on hover with a dynamic indicator.
  • Customizable: Easily customize styles, colors, and behavior.
  • Responsive: Works seamlessly across different screen sizes.
  • Lightweight: Minimal dependencies and optimized for performance.
Loading component preview...

Source Code

Props

PropertyTypeDefaultDescription
tabs
{ title: string }[]
required
An array of tab objects, each containing a title for the tab.
indicatorBgColor
string
'bg-blue-500'
The background color of the indicator. Accepts Tailwind CSS classes.

Dependencies

This component uses the following third-party dependencies: