Tabs [react-aria-components]

Navigation 5

About

Tabs organize content into multiple sections and allow users to navigate between them.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tabs [react-aria-components] to your project and fits it to your theme.

Code

How Tabs [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs"

export function TabDemo() {
  return (
    <Tabs>
      <TabList aria-label="History of Ancient Rome">
        <Tab id="FoR">Founding of Rome</Tab>
        <Tab id="MaR">Monarchy and Republic</Tab>
        <Tab id="Emp">Empire</Tab>
      </TabList>
      <TabPanel id="FoR">
        Arma virumque cano, Troiae qui primus ab oris.
      </TabPanel>
      <TabPanel id="MaR">Senatus Populusque Romanus.</TabPanel>
      <TabPanel id="Emp">Alea jacta est.</TabPanel>
    </Tabs>
  )
}