Getting Started

Installation

Fundamentals

Components

Animations

FadeComing Soon
Infinite ScrollComing Soon
PointerComing Soon

components

Tabs

Organize content into navigable sections

Source Code Radix UI

This is the products tab

Installation


pnpm dlx radianui@latest add tabs

Usage

Imports

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

Code

<Tabs defaultValue="account">
	<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>

Examples

With Icon

You have completed 8 tasks.

With Badge

You have completed 8 tasks.

Variant - Outline

You have no completed tasks.

Variant - Open

You have 8 completed tasks.

Variant - Ghost

You have no completed tasks.

Variant - Outline Ghost

You have no completed tasks.

Orientation - Vertical

Browse your favorite albums and artists.

Size - Small

Size - Medium

Size - Large

Width - Full

Disabled

Props

<Tabs>

Name	Default	Values
External Reference	-	-

<TabsList>

Name	Default	Values
variant	default	defaultopenoutlineghostoutline-ghost
size	md	smmdlg
width	fit	fitfull
External Reference	-	-

<TabsTrigger>

Name	Default	Values
External Reference	-	-

<TabsContent>

Name	Default	Values
External Reference	-	-