like-gold

Any example of using shadcn ui tabs with tanstack router

Any guidelines how to display the active tab on the url.With Assumptions tabs are not separate routes.So the url will be in this format /home?tab=Overview or /home?tab=Settings

13 Replies

fascinating-indigo•5mo ago

Link has activeProps for that

fascinating-indigo•5mo ago

maybe that helps: https://x.com/Benjamin_D_Lee/status/1904685556140769323

Benjamin Lee (@Benjamin_D_Lee) on X

Quick tip: to made @shadcn ui sidebars work with @tan_stack's , just add a data attribute. A lot cleaner than trying to create a custom link component or piping isActive down to

like-goldOP•5mo ago

how does the active prop modify the url when navigating through tabs

fascinating-indigo•5mo ago

activeProps does not modify the url clicking on a link does

like-goldOP•5mo ago

this example is from tab component from react Aria components and example uses react router.For the case of tanstack router and shadcn ui tabs https://react-spectrum.adobe.com/react-aria/Tabs.html

Tabs

Documentation for Tabs in the React Aria package.

like-goldOP•5mo ago

any update??

rare-sapphire•5mo ago

Following this thread

ambitious-aqua•5mo ago

Shadcn tabs have the option for controlled values, so you can link it directly with a search param. I haven't tested it, but something like this should work.

function Component() {
  const { tab } = Router.useSearch()
  const router = useRouter()

  return (
    <Tabs value={tab} onValueChange={(value) =>
          router.navigate({
            to: router.state.location.pathname,
            search: { tab: value },
          })
        }>
      ...tab stuff
    </Tabs>
  )
}

function Component() {
  const { tab } = Router.useSearch()
  const router = useRouter()

  return (
    <Tabs value={tab} onValueChange={(value) =>
          router.navigate({
            to: router.state.location.pathname,
            search: { tab: value },
          })
        }>
      ...tab stuff
    </Tabs>
  )
}

fascinating-indigo•5mo ago

just a hint, use to: '.' if you want to just update search params (or a valid route)

ambitious-aqua•5mo ago

ah, nice! Didn't know about that. Brand new to TS router/start.

metropolitan-bronze•5mo ago

Ended up with this solution because I wanted the tabs to be distinct routes rather than search params. It's using shadcn in this instance

<div className="container mx-auto py-6">
    <Tabs defaultValue="tab-1">
        <ScrollArea>
            <TabsList className="mb-3 w-full">
                <TabsTrigger value="info" asChild>
                    <Link
                        to="/info"
                        activeProps={{ "data-state": "active" }}
                    >
                        Information
                    </Link>
                </TabsTrigger>
                <TabsTrigger value="details" asChild>
                    <Link
                        to="/details"
                        activeProps={{ "data-state": "active" }}
                    >
                        Details
                    </Link>
                </TabsTrigger>
                <TabsTrigger value="planning" asChild>
                    <Link
                        to="/planning"
                        activeProps={{ "data-state": "active" }}
                    >
                        Planning
                    </Link>
                </TabsTrigger>
                <TabsTrigger value="settings" asChild>
                    <Link
                        to="/settings"
                        activeProps={{ "data-state": "active" }}
                    >
                        Settings
                    </Link>
                </TabsTrigger>
            </TabsList>
            <ScrollBar orientation="horizontal" />
        </ScrollArea>
    </Tabs>
    <Outlet />
</div>

<div className="container mx-auto py-6">
    <Tabs defaultValue="tab-1">
        <ScrollArea>
            <TabsList className="mb-3 w-full">
                <TabsTrigger value="info" asChild>
                    <Link
                        to="/info"
                        activeProps={{ "data-state": "active" }}
                    >
                        Information
                    </Link>
                </TabsTrigger>
                <TabsTrigger value="details" asChild>
                    <Link
                        to="/details"
                        activeProps={{ "data-state": "active" }}
                    >
                        Details
                    </Link>
                </TabsTrigger>
                <TabsTrigger value="planning" asChild>
                    <Link
                        to="/planning"
                        activeProps={{ "data-state": "active" }}
                    >
                        Planning
                    </Link>
                </TabsTrigger>
                <TabsTrigger value="settings" asChild>
                    <Link
                        to="/settings"
                        activeProps={{ "data-state": "active" }}
                    >
                        Settings
                    </Link>
                </TabsTrigger>
            </TabsList>
            <ScrollBar orientation="horizontal" />
        </ScrollArea>
    </Tabs>
    <Outlet />
</div>

like-goldOP•5mo ago

okay thats cool i will try it The issue okay have figured how to use the Tabscontent outside of the Tabs Am getting this error TabsContent must be used withins Tabs

metropolitan-bronze•5mo ago

If you still want to use TabsContent you need to have the Outlet inside the TabsContent. I don’t use the TabsContent when I use route based tabs.

Gaming

Programming

Any example of using shadcn ui tabs with tanstack router

Did you find this page helpful?