React Aria Tabs

Component

About

React Aria Tabs component with the original source demo.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds React Aria Tabs to your project and fits it to your theme.

Code

How React Aria Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
import {Tabs, TabList, Tab, TabPanels, TabPanel} from "@/components/ui/aria-css-tabs";
import {Form} from "@/components/ui/aria-css-tabs-utils/components-ui-Form";
import {TextField} from "@/components/ui/aria-css-tabs-utils/components-ui-TextField";
import {Button} from "@/components/ui/aria-css-tabs-utils/components-ui-Button";
import {RadioGroup, Radio} from "@/components/ui/aria-css-tabs-utils/components-ui-RadioGroup";
import {CheckboxGroup} from "@/components/ui/aria-css-tabs-utils/components-ui-CheckboxGroup";
import {Checkbox} from "@/components/ui/aria-css-tabs-utils/components-ui-Checkbox";
function SourceSpecimen(){return <>
<Tabs>
  <TabList aria-label="Settings">
    <Tab id="general">General</Tab>
    <Tab id="appearance">Appearance</Tab>
    <Tab id="notifications">Notifications</Tab>
    <Tab id="profile">Profile</Tab>
  </TabList>
  <TabPanels>
    <TabPanel id="general">
      <Form>
        <TextField label="Homepage" defaultValue="react-aria.adobe.com" />
        <Checkbox defaultSelected>Show sidebar</Checkbox>
        <Checkbox>Show status bar</Checkbox>
      </Form>
    </TabPanel>
    <TabPanel id="appearance">
      <Form>
        <RadioGroup label="Theme" defaultValue="auto">
          <Radio value="auto">Auto</Radio>
          <Radio value="light">Light</Radio>
          <Radio value="dark">Dark</Radio>
        </RadioGroup>
        <RadioGroup label="Font size" defaultValue="medium">
          <Radio value="small">Small</Radio>
          <Radio value="medium">Medium</Radio>
          <Radio value="large">Large</Radio>
        </RadioGroup>
      </Form>
    </TabPanel>
    <TabPanel id="notifications">
      <CheckboxGroup label="Notifications settings" defaultValue={['account', 'dms']}>
        <Checkbox value="account">Account activity</Checkbox>
        <Checkbox value="mentions">Mentions</Checkbox>
        <Checkbox value="dms">Direct message</Checkbox>
        <Checkbox value="marketing">Marketing emails</Checkbox>
      </CheckboxGroup>
    </TabPanel>
    <TabPanel id="profile">
      <Form>
        <TextField label="Name" defaultValue="Devon Govett" />
        <TextField label="Username" defaultValue="@devongovett" />
        <Button>Update profile</Button>
      </Form>
    </TabPanel>
  </TabPanels>
</Tabs>
</>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="light" enableSystem={false}><div data-component-demo data-demo-theme="source" data-theme="light" className="light" style={{background:"var(--background-color, #fff)",color:"var(--text-color, #171717)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}