Tabs

Tabbed interface for organizing content into multiple panels. Built on Radix UI Tabs primitive. The Line variant renders an animated underline that glides between the active tab.

Installation

# Install @opencosmos/ui to use Tabs
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

defaultValue— Default active tab value

Usage

Import

import { Tabs } from '@opencosmos/ui';

Example

<Tabs>
  Content
</Tabs>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
defaultValue	text	"overview"	Default active tab value

Examples

Line

A quick summary of activity across your workspace. The underline animates between tabs as you switch.

Pill

Make changes to your account here.

Line in Sidebar

The tabs row flows to fit the container width — try dropping it into any sidebar.

Code Examples

Line Variant (Animated Underline)

The Line variant animates a 2px underline between the active triggers using a spring motion. The row is fluid — it takes the full width of whatever container it lives in.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@opencosmos/ui"

<Tabs defaultValue="overview" className="w-full">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Summary lives here.</TabsContent>
  <TabsContent value="analytics">Charts and trends.</TabsContent>
  <TabsContent value="reports">Scheduled reports.</TabsContent>
</Tabs>

Pill Variant

Segmented pill-style tabs on a muted background — useful when tabs should feel like a contained control.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@opencosmos/ui"

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Make changes to your account here.
  </TabsContent>
  <TabsContent value="password">
    Change your password here.
  </TabsContent>
</Tabs>