Tabbar

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download tab-bar -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { TabBar, TabBarItem } from "@/components/ui/tab-bar";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative h-[140px] w-[380px]">
      <div className="absolute bottom-0 flex w-full justify-center">
        {children}
      </div>
    </div>
  );
}
<Frame>
  <TabBar>
    <TabBarItem variant="default" icon="House" text="Home" active />
    <TabBarItem icon="Calendar" text="Calendario" />
    <TabBarItem icon="Users" text="Persone" />
    <TabBarItem icon="Building2" text="Azienda" />
  </TabBar>
</Frame>;

Examples

Main

import { TabBar, TabBarItem } from "@/components/ui/tab-bar";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative h-[140px] w-[380px]">
      <div className="absolute bottom-0 flex w-full justify-center">
        {children}
      </div>
    </div>
  );
}
<Frame>
  <TabBar>
    <TabBarItem variant="default" icon="House" text="Home" active />
    <TabBarItem icon="Calendar" text="Calendario" />
    <TabBarItem icon="Users" text="Persone" />
    <TabBarItem icon="Building2" text="Azienda" />
  </TabBar>
</Frame>;

With Fab

import { TabBar, TabBarItem } from "@/components/ui/tab-bar";
import { Button } from "@/components/ui/button";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative h-[140px] w-[380px]">
      <div className="absolute bottom-0 flex w-full justify-center">
        {children}
      </div>
    </div>
  );
}
<Frame>
  <TabBar>
    <TabBarItem variant="default" icon="House" text="Home" active />
    <TabBarItem icon="Calendar" text="Calendario" />
    <TabBarItem variant="fab">
      <Button icon="Plus" size="lg" className="px-3" />
    </TabBarItem>
    <TabBarItem icon="Users" text="Persone" />
    <TabBarItem icon="Building2" text="Azienda" />
  </TabBar>
</Frame>;

Three Items

import { TabBar, TabBarItem } from "@/components/ui/tab-bar";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative h-[140px] w-[380px]">
      <div className="absolute bottom-0 flex w-full justify-center">
        {children}
      </div>
    </div>
  );
}
<Frame>
  <TabBar>
    <TabBarItem icon="House" text="Home" active />
    <TabBarItem icon="Calendar" text="Calendario" />
    <TabBarItem icon="Users" text="Persone" />
  </TabBar>
</Frame>;

Long Label

import { TabBar, TabBarItem } from "@/components/ui/tab-bar";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative h-[140px] w-[380px]">
      <div className="absolute bottom-0 flex w-full justify-center">
        {children}
      </div>
    </div>
  );
}
<Frame>
  <TabBar>
    <TabBarItem icon="House" text="Home" active />
    <TabBarItem icon="Calendar" text="Calendario aziendale" />
    <TabBarItem icon="Building2" text="Amministrazione" />
  </TabBar>
</Frame>;

With External

import { TabBar, TabBarItem } from "@/components/ui/tab-bar";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative h-[140px] w-[380px]">
      <div className="absolute bottom-0 flex w-full justify-center">
        {children}
      </div>
    </div>
  );
}
<Frame>
  <TabBar
    external={
      <div className="w-full px-4 pb-2 text-center text-xs text-neutral-mid">
        2 items need your attention
      </div>
    }
  >
    <TabBarItem icon="House" text="Home" active />
    <TabBarItem icon="Calendar" text="Calendario" />
    <TabBarItem icon="Users" text="Persone" />
  </TabBar>
</Frame>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default	Description
`external`	`React.ReactNode`	`—`

TabBarItem

Prop	Type	Default
`active`	`boolean`	`false`
`external`	`React.ReactNode`	`—`
`icon`	`IconName`	`—`
`text`	`string`	`—`
`variant`	`"default" \| "fab"`	`"default"`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.