MobileTabBar

A bottom tab bar for mobile layouts with an animated sliding indicator. Pairs well with useMediaQuery to swap between desktop panels and mobile tabs.

Import

import { MobileTabBar, ChatIcon, PreviewIcon, CodeIcon, TerminalIcon, FilesIcon } from "@run0/jiki-ui";
import type { TabItem } from "@run0/jiki-ui";

Props

Prop	Type	Default	Description
`tabs`	`TabItem[]`	—	Tab items to display
`activeTab`	`string`	—	ID of the currently active tab
`onTabChange`	`(id: string) => void`	—	Called when a tab is tapped
`accentColor`	`AccentColor`	`"emerald"`	Theme color for active state

TabItem

interface TabItem {
  id: string;              // Unique tab identifier
  label: string;           // Display label
  icon?: React.ReactNode;  // Optional icon element
}

Icon Components

The package exports five icon components for common tab types. Each accepts an optional className prop.

Icon	Description
`ChatIcon`	Chat bubble
`PreviewIcon`	Eye / preview
`CodeIcon`	Code brackets
`TerminalIcon`	Terminal prompt
`FilesIcon`	Folder

Usage

import { useMediaQuery } from "@run0/jiki-ui";

const isMobile = useMediaQuery("(max-width: 768px)");

const tabs: TabItem[] = [
  { id: "chat", label: "Chat", icon: <ChatIcon /> },
  { id: "code", label: "Code", icon: <CodeIcon /> },
  { id: "preview", label: "Preview", icon: <PreviewIcon /> },
  { id: "terminal", label: "Terminal", icon: <TerminalIcon /> },
  { id: "files", label: "Files", icon: <FilesIcon /> },
];

{isMobile && (
  <MobileTabBar
    tabs={tabs}
    activeTab={activeTab}
    onTabChange={setActiveTab}
    accentColor="violet"
  />
)}

Demo

Active tab: code

import { useState } from "react";
import {
MobileTabBar,
ChatIcon,
CodeIcon,
PreviewIcon,
TerminalIcon,
FilesIcon,
} from "@run0/jiki-ui";

const TABS = [
{ id: "chat", label: "Chat", icon: <ChatIcon /> },
{ id: "code", label: "Code", icon: <CodeIcon /> },
{ id: "preview", label: "Preview", icon: <PreviewIcon /> },
{ id: "terminal", label: "Terminal", icon: <TerminalIcon /> },
{ id: "files", label: "Files", icon: <FilesIcon /> },
];

export default function MobileTabBarDemo() {
const [active, setActive] = useState("code");

return (
  <div style={{ maxWidth: 400 }}>
    <div className="p-6 text-center text-zinc-400">
      Active tab: <strong className="text-zinc-200">{active}</strong>
    </div>
    <MobileTabBar
      tabs={TABS}
      activeTab={active}
      onTabChange={setActive}
      accentColor="violet"
    />
  </div>
);
}