Next.js Discord

Discord Forum

Shadcn UI Tabs

Answered
Havana posted this in #help-forum
Open in Discord
HavanaOP
Hello, in shadcn ui tabs component, clicking the tab shows the selected tab content but how can I do another button that trigger that tab?

for example, if you have a page where there's login and signup tabs and at the bottom there's a "Already have an account? Login" but the problem is I don't know how to make that "Login" text trigger the login tab, any ideas?
Answered by Havana
The solution is to use the value prop for the TabsTrigger component and make sure wrapping it with TabsList component to avoid this error:
Error: `RovingFocusGroupItem` must be used within `RovingFocusGroup`
View full answer

33 Replies

@Havana I still don't get it
DirtyCajunRice | AppDir
Why not? All the props are right there
shouldn't be that hard. Like @@ts-ignore said, you can use the value prop of <Tabs>
Or look if onClick() is available and do unnecessary complicated stuff ^^
ok good wasnt what i thought you were typing
Laysan Albatross
😄
HavanaOP
Sorry for that, I also don't like giving me the "fish" instead of teaching but I'm facing this error.

Error: `RovingFocusGroupItem` must be used within `RovingFocusGroup`
## src/app/auth/page.tsx
export default function Auth() {
    return (
        <Tabs className="w-full max-w-md mx-auto" defaultValue="login">
            <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="login">Login</TabsTrigger>
                <TabsTrigger value="signup">Signup</TabsTrigger>
            </TabsList>
            <TabsContent value="login">
                <Login />
            </TabsContent>
            <TabsContent value="signup">
                <Signup />
            </TabsContent>
        </Tabs>
    );
}
## src/components/auth/Login.tsx
export default function Login() {
    // ...

    return (
        <>
            <Card>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(handleSubmit)}>
                        <CardHeader>
                            <CardTitle className="mt-0">Login</CardTitle>
                            <CardDescription>Enter your email and password to login to your account</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-2">
                            {/* ... */}
                        </CardContent>
                        <CardFooter>
                            <Button disabled={Loading} className="flex-1" type="submit">
                                {Loading && <LoadingIcon className="text-background" />}
                                Login
                            </Button>
                        </CardFooter>
                    </form>
                </Form>
            </Card>
            <p className="text-center">
                Don't have an account? <TabsTrigger value="signup">Signup</TabsTrigger>
            </p>
        </>
    );
}
DirtyCajunRice | AppDir
no
has nothing to do with tabstrigger
that has to happen in tabslist
your content is not in tabs list
you need to create some sort of state
that holds the value set to tabs
and pass that around
thats your hint
HavanaOP
oh
HavanaOP
I think you made it over complicated? idk.

Here's what I did
<p className="text-center">
                Already have an account?{" "}
                <TabsList>
                    <TabsTrigger value="login">Login</TabsTrigger>
                </TabsList>
            </p>

I just wrapped the TabsTrigger with TabsList, but the styling of that button looks like a tab now
is there a way to remove this default styling?
Laysan Albatross
hint : UseState

But dont forget that this makes the component a client component and you have to add "use client" on top of the file.
HavanaOP
bro, thanks for your hint but it's working perfectly, I'm just asking if there's a way to remove the default style for the tab.
instead of doing p-0 bg-background etc
Laysan Albatross
of course. ShadCN components are completely in your hand. No magic there, you copy paste them into your app, so you can do what you want.
They also have theming options
https://ui.shadcn.com/themes
Or create your own theme, or whatever xd. There are no limitations basically.
HavanaOP
I think my problem is solved now, Thanks Guys, Appreciate your help!
@Havana I think my problem is solved now, Thanks Guys, Appreciate your help!
joulev
could you mark the answer as the solution?
HavanaOP
sure
HavanaOP
The solution is to use the value prop for the TabsTrigger component and make sure wrapping it with TabsList component to avoid this error:
Error: `RovingFocusGroupItem` must be used within `RovingFocusGroup`
Answer