@radix-ui/react-tabs

What is @radix-ui/react-tabs?

@radix-ui/react-tabs is a React component library for creating accessible and customizable tab interfaces. It provides a set of components and hooks to build tabbed navigation systems with ease, ensuring accessibility and flexibility.

What are @radix-ui/react-tabs's main functionalities?

Basic Tabs

This code demonstrates a basic tab interface with two tabs. The `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent` components are used to create a simple tabbed navigation system.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs';

function BasicTabs() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content for Tab 1</TabsContent>
      <TabsContent value="tab2">Content for Tab 2</TabsContent>
    </Tabs>
  );
}

Controlled Tabs

This code demonstrates a controlled tab interface where the active tab is managed by the component's state. The `value` and `onValueChange` props are used to control the active tab.

import { useState } from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs';

function ControlledTabs() {
  const [value, setValue] = useState('tab1');

  return (
    <Tabs value={value} onValueChange={setValue}>
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content for Tab 1</TabsContent>
      <TabsContent value="tab2">Content for Tab 2</TabsContent>
    </Tabs>
  );
}

Custom Styling

This code demonstrates how to apply custom styling to the tab components. By adding class names to the `TabsList`, `TabsTrigger`, and `TabsContent` components, you can style them using CSS.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@radix-ui/react-tabs';
import './CustomTabs.css';

function CustomTabs() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList className="custom-tabs-list">
        <TabsTrigger className="custom-tabs-trigger" value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger className="custom-tabs-trigger" value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent className="custom-tabs-content" value="tab1">Content for Tab 1</TabsContent>
      <TabsContent className="custom-tabs-content" value="tab2">Content for Tab 2</TabsContent>
    </Tabs>
  );
}

Other packages similar to @radix-ui/react-tabs

react-tabs

react-tabs is a simple and fully accessible React tabs component. It provides a straightforward API for creating tabbed interfaces and ensures accessibility out of the box. Compared to @radix-ui/react-tabs, react-tabs is more lightweight but may offer fewer customization options.

material-ui

Material-UI is a popular React UI framework that includes a comprehensive set of components, including Tabs. The Tabs component in Material-UI is highly customizable and follows the Material Design guidelines. It offers more features and styling options compared to @radix-ui/react-tabs but comes with a larger bundle size.

chakra-ui

Chakra UI is a modern React UI library that provides a set of accessible and composable components, including Tabs. The Tabs component in Chakra UI is easy to use and highly customizable. It offers a similar level of flexibility and accessibility as @radix-ui/react-tabs but with a different design system.

README

react-tabs

View docs here.