UI

Tabs

A tab component for organizing content into multiple panels.

Homeschooling Information

Discover the reasons why families choose to homeschool, including flexibility, customized education, and closer family bonds.

'use client'

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'

export default function TabsDemo() {
  return (
    <div className='flex flex-col items-center justify-center gap-5 lg:flex-row'>
      <h2>Tabs Component</h2>
      <Tabs defaultValue="tab1">
        <TabsList>
          <TabsTrigger value="tab1" variant="underline">Resources</TabsTrigger>
          <TabsTrigger value="tab2" variant="underline">Groups</TabsTrigger>
          <TabsTrigger value="tab3" variant="underline">Events</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">
          <p>Find a variety of homeschooling resources.</p>
        </TabsContent>
        <TabsContent value="tab2">
          <p>Connect with local and online homeschooling groups.</p>
        </TabsContent>
        <TabsContent value="tab3">
          <p>Check out upcoming homeschooling events and activities.</p>
        </TabsContent>
      </Tabs>
    </div>
  )
}

Installation

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Import all parts and piece them together.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1" variant="underline">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2" variant="underline">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3" variant="underline">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content for Tab 1</TabsContent>
  <TabsContent value="tab2">Content for Tab 2</TabsContent>
  <TabsContent value="tab3">Content for Tab 3</TabsContent>
</Tabs>

Props

TabsTrigger Variant

Variant

underline
button