NOCTA UI

Tabs

Accessible tabs component with multiple variants, orientations, and keyboard navigation for organizing content

Installation

Install the Tabs component using the nocta-ui CLI:

npx @nocta-ui/cli add tabs

Import the component:

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent
} from '@/components/ui/tabs';

Examples

Default Tabs

Overview

View your account overview and recent activity.

This is the overview tab content. You can add any components here.

Variants

Default

Account settings and profile information.

Pills

Welcome to the home page content.

Underline

Your dashboard overview and quick stats.

Sizes

Small

Small tab content.

Medium

Medium tab content.

Large

Large tab content.

Vertical Orientation

Tabs can be displayed vertically using the orientation="vertical" prop.

General Settings

Manage your general account settings and preferences.

This is your public display name.

Your email address for notifications.

Disabled States

This tab is available and can be accessed.

Api Reference

Tabs

Prop

Type

TabsList

Prop

Type

TabsTrigger

Prop

Type

TabsContent

Prop

Type

Pagination

Navigate through paged data sets with previous, next and numbered controls.

Chat

A comprehensive chat component system with message display, input handling, avatars, timestamps, and real-time messaging capabilities

On this page

Installation
Examples
Default Tabs
Variants
Sizes
Vertical Orientation
Disabled States
Api Reference
Tabs
TabsList
TabsTrigger
TabsContent