URL Tabs

Enhanced Tabs component that syncs with URL parameters. Perfect for shareable tab states and deep linking.

Preview

Loading...

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/url-tabs.json

Usage

tsx
16 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { UrlTabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/url-tabs"

export default function MyPage() {
  return (
    <UrlTabs defaultValue="overview" paramName="section">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="members">Members</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview content</TabsContent>
      <TabsContent value="members">Members content</TabsContent>
    </UrlTabs>
  )
}

// URL will be: /page?section=members

Examples

Custom Parameter Name

Loading...

Replace History

tsx
4 lines
1
2
3
4
// Replace history entry instead of pushing
<UrlTabs defaultValue="tab1" replaceHistory={true}>
  ...
</UrlTabs>

Props

PropTypeDefaultDescription
paramNamestring"tab"URL parameter name
updateUrlbooleantrueWhether to update URL
replaceHistorybooleanfalseReplace vs push history
defaultValuestringDefault active tab