Skip to main content
Version: 3.0.0-beta


Tabs are used for navigation between different views or sections within the same context.


To use the Tabs component, import it from your components along with the child Tab components and pass the required props.

Basic Tabs

A simple tab example with minimal configuration.

import React, { useState } from "react";
import { Tabs, Tab } from "@firecms/ui";

export default function TabsBasicDemo() {
const [value, setValue] = useState("tab1");

return (
<Tabs value={value} onValueChange={setValue}>
<Tab value="tab1">Tab 1</Tab>
<Tab value="tab2">Tab 2</Tab>
<Tab value="tab3">Tab 3</Tab>
Sign up to our newsletter to get the latest news and updates. No spam!