ComponentsCore

Tabs

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

Example

Tone
Size
Radius
Width
Usage

Features

Tabs provide a list of tabs that a user can select from to switch between multiple tab panels. Tabs can be used to implement these in an accessible way.

  • Flexible – Support for both horizontal and vertical orientations, disabled tabs, customizable layout, and multiple keyboard activation modes.
  • Accessible – Follows the ARIA tabs pattern, automatically linking tabs and their associated tab panels semantically. The arrow keys can be used to navigate between tabs, and tab panels automatically become focusable when they don't contain any focusable children.
  • International – Keyboard navigation is automatically mirrored in right-to-left languages.
  • Styleable – Hover, press, keyboard focus, and selection states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes.

Installation

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/tabs.tsx
npx @libravelui@latest add tabs

Anatomy

import {
  Tabs,
  TabList,
  TabTrigger,
  TabContent,
} from "@/components/ui/core/tabs";
<Tabs>
  <TabList>
    <TabTrigger id="tab-1">Tab 1</TabTrigger>
    <TabTrigger id="tab-2">Tab 2</TabTrigger>
    <TabTrigger id="tab-3">Tab 3</TabTrigger>
  </TabList>

  <TabContent id="tab-1">Tab 1</TabContent>
  <TabContent id="tab-2">Tab 2</TabContent>
  <TabContent id="tab-3">Tab 3</TabContent>
</Tabs>

Props

Loading types…

Edit on GitHub

Separator

A simple line element that visually breaks up content, helping users quickly scan and differentiate sections.

Dialog

A dialog is a component used to capture user input, present important information, confirm critical actions, or prompt users to make decisions — all without requiring them to leave the current screen or context.