shadcn tabs
Unanswered
Black Caiman posted this in #help-forum
Black CaimanOP
can someone help me, i wanna round the ends of the tab list and get rid of that whitespace around the indicator but dk how
3 Replies
Black CaimanOP
'use client'
import React from 'react'
import '../globals.css';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
const page = () => {
const questions = [
{question: '', answer: ''},
{question: '', answer: ''},
{question: '', answer: ''},
{question: '', answer: ''},
{question: '', answer: ''},
{question: '', answer: ''},
{question: '', answer: ''},
{question: '', answer: ''},
]
return (
<div>
<Tabs className='min-w-screen flex flex-row justify-center mt-15'>
<div className="flex">
{questions.map(({question, answer}: {question: string, answer: string}, index: number) => (
<div key={index+1} className=''>
<TabsList className='' defaultValue={'1'}>
<TabsTrigger value={String(index+1)} className=''>Q{String(index+1)}</TabsTrigger>
</TabsList>
<TabsContent value={String(index+1)}>
{question}
</TabsContent>
</div>
))}
</div>
</Tabs>
</div>
)
}
export default page
Try adding these classNames to
<TabsList className=“rounded-lg p-0” >
The whitespace you mean is wrapping the whole tabs list or you mean the one that’s separating one item from another?