Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Account

Make changes to your account here. Click save when you're done.

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add tabs
import { Slot, component$ } from '@builder.io/qwik';
import {
  Tab as QwikUITab,
  TabList as QwikUITabList,
  TabPanel as QwikUITabPanel,
  Tabs as QwikUITabs,
  type TabListProps,
  type TabPanelProps,
  type TabProps,
  type TabsProps,
} from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';
 
export const Tabs = (props: TabsProps) => (
  <QwikUITabs
    {...props}
    tabListComponent={TabList}
    tabComponent={Tab}
    tabPanelComponent={TabPanel}
  />
);
 
export const TabList = component$<TabListProps>((props) => {
  return (
    <QwikUITabList
      {...props}
      class={cn(
        'bg-muted text-muted-foreground border-base inline-flex items-center justify-center rounded-lg p-1 shadow-sm',
        props.class,
      )}
    >
      <Slot />
    </QwikUITabList>
  );
});
 
export const Tab = component$<TabProps>((props) => {
  return (
    <QwikUITab
      {...props}
      class={cn(
        'ring-offset-background focus-visible:ring-ring data-[state=selected]:bg-background data-[state=selected]:text-foreground data-[state=selected]:border-base inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=selected]:shadow-inner',
        props.class,
      )}
    >
      <Slot />
    </QwikUITab>
  );
});
 
export const TabPanel = component$<TabPanelProps>((props) => {
  return (
    <QwikUITabPanel
      {...props}
      class={cn(
        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
        props.class,
      )}
    >
      <Slot />
    </QwikUITabPanel>
  );
});

Usage

import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/styled';
<Tabs>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanel>Panel 1</TabPanel>
  <TabPanel>Panel 2</TabPanel>
  <TabPanel>Panel 3</TabPanel>
</Tabs>