Devie UI

<Tabs />

Welcome to the overview panel. Here you can see a summary of your activity and recent updates.

The Tabs component extends Base UI's Tabs. It provides a tabbed interface with an animated indicator that smoothly transitions between tabs. Supports both horizontal and vertical orientations.

Installation

Here is the component implementation code that you can copy to your project:

// https://base-ui.com/react/components/tabs
 
import { Tabs as BaseTabs } from "@base-ui-components/react/tabs";
import clsx from "clsx";
import styles from "./Tabs.module.scss";
 
const Root = BaseTabs.Root;
 
function List({ className, ...props }: BaseTabs.List.Props) {
  return <BaseTabs.List className={clsx(styles.list, className)} {...props} />;
}
 
const tabStyles = styles.tab;
 
interface TabProps extends BaseTabs.Tab.Props {
  className?: string;
}
 
function Tab({ className, ...props }: TabProps) {
  return <BaseTabs.Tab className={clsx(tabStyles, className)} {...props} />;
}
 
function Indicator({ className, ...props }: BaseTabs.Indicator.Props) {
  return (
    <BaseTabs.Indicator
      className={clsx(styles.indicator, className)}
      {...props}
    />
  );
}
 
interface PanelProps extends BaseTabs.Panel.Props {
  className?: string;
}
 
function Panel({ className, ...props }: PanelProps) {
  return <BaseTabs.Panel className={clsx(styles.panel, className)} {...props} />;
}
 
const Tabs = {
  Root,
  List,
  Tab,
  Indicator,
  Panel,
};
 
export default Tabs;

Use Cases

Horizontal Tabs

Horizontal tabs with an animated underline indicator. Use defaultValue to set the initially selected tab, or use value and onValueChange for controlled mode.

Overview content

Vertical Tabs

Set the orientation prop on the Root to "vertical" for a vertical tab layout. The indicator automatically displays as a vertical line on the right.

Overview content

Custom Indicator

Override the indicator styles via className to create custom designs like a filled background with border and radius.