Browse components

Tabs

Pill segmented tabs with a sliding indicator.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/tabs.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/tabs.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/tabs.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/tabs.

Import

import {  Tabs,  TabsIndicator,  TabsList,  TabsPanel,  TabsTab} from "@/components/ui/tabs"

example.tsx

import {  Tabs,  TabsIndicator,  TabsList,  TabsPanel,  TabsTab,} from "@/components/ui/tabs"export function Example() {  return (    <Tabs defaultValue="one">      <TabsList>        <TabsIndicator />        <TabsTab value="one">One</TabsTab>        <TabsTab value="two">Two</TabsTab>      </TabsList>      <TabsPanel value="one">First panel</TabsPanel>      <TabsPanel value="two">Second panel</TabsPanel>    </Tabs>  )}

API Reference

Tabs

Base UI Tabs root.

Prop	Type	Default
defaultValue	string	—
value	string	—
onValueChange	(value: string) => void	—

TabsTab

Prop	Type	Default
value	string	—

Notes

Render `TabsIndicator` inside `TabsList` so the pill tracks the active tab.
`TabsTab` must live inside `TabsList`.