Next.js Discord

Discord Forum

shadcn tabs

Unanswered
Black Caiman posted this in #help-forum
Open in Discord
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?