Display one panel of content at a time with a tabbed interface. This component is based on the WAI-ARIA Tabs Pattern⁠.

  • 🥕 Carrot
  • 🧅 Onion
  • 🥔 Potato
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
const defaultSelectedId = "default-selected-tab";
return (
<div className="wrapper">
<Ariakit.TabProvider defaultSelectedId={defaultSelectedId}>
<Ariakit.TabList className="tab-list" aria-label="Groceries">
<Ariakit.Tab className="tab">Fruits</Ariakit.Tab>
<Ariakit.Tab className="tab" id={defaultSelectedId}>
<Ariakit.Tab className="tab">Meat</Ariakit.Tab>
<div className="panels">
<li>ğŸŽ Apple</li>
<li>🍇 Grape</li>
<li>🍊 Orange</li>
<Ariakit.TabPanel tabId={defaultSelectedId}>
<li>🥕 Carrot</li>
<li>🧅 Onion</li>
<li>🥔 Potato</li>
<li>🥩 Beef</li>
<li>🍗 Chicken</li>
<li>🥓 Pork</li>

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠