Shadcn UI Blocks

Trending Sell blocks Snippets Changelog

Sign in Get all-access

Tabs

Discover fully responsive Tabs for your Shadcn UI projects, each meticulously designed for seamless integration and customization.

Marketing

About Sections
18
Announcement Banners
6
Blog Sections
17
Careers
12
Changelogs
11
Contact Sections
3
CTA Sections
18
FAQ Sections
13
Feature Sections
17
Footers
5
Gallery
7
Hero Forms
24
Hero Sections
31
Icon Sections
20
Masonry Sections
1
Pricing Sections
14
Stats
20
Subscribe Sections
3
Team Sections
9
Testimonials
9

Application

AI Prompt
1
Application Stats
6
Form Layouts
3
Page Headings
6
Reset Password
4
User Profiles
10

Components

Accordions
16
Alerts
20
Badges
12
Breadcrumbs
12
Buttons
17
Cards
22
Collapsible
6
Pagination
11
Tabs
8

Ecommerce

Category Filters
3
Category Previews
7
Customer Reviews
6
Product Features
19
Product Lists
9
Product Overviews
6
Promo Sections
11
Shopping Carts
6

Portfolio

About and Skills
5
Awards and Recognition
5
Blog Writing and Previews
5
Case Studies
5
Contact Sections
5
Core Services Overview
5
CTA Banner
5
Email Signup and Newsletter
5
Event Speaking and Workshops
5
Featured Work Highlights
5
Hero Showcases
5
Mission and Values
5
Process and Approach
5
Project Displays
5
Quote and Feedback
5
Resource Download Sections
5
Resume and Downloads
5
Social Media Embeds
5
Why Work With Me
5
Work Experience Cards
5

© 2025 Shadcn UI Blocks, Inc. All rights reserved.

Built with ❤️

Minimal Tabs

Open in New Tab

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

export default function MinimalTabs() {
  return (
    <div className="p-6">
      <Tabs defaultValue="account" className="mx-auto w-full max-w-3xl">
        <TabsList className="mb-6 flex w-full justify-start gap-8 border-b bg-transparent pb-0">
          <TabsTrigger
            value="account"
            className="text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-b-primary rounded-none bg-transparent px-0 py-2 pb-3 data-[state=active]:border-b-2 data-[state=active]:bg-transparent"
          >
            Account
          </TabsTrigger>
          <TabsTrigger
            value="password"
            className="text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-b-primary rounded-none bg-transparent px-0 py-2 pb-3 data-[state=active]:border-b-2 data-[state=active]:bg-transparent"
          >
            Password
          </TabsTrigger>
          <TabsTrigger
            value="settings"
            className="text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-b-primary rounded-none bg-transparent px-0 py-2 pb-3 data-[state=active]:border-b-2 data-[state=active]:bg-transparent"
          >
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="account" className="p-0">
          <h3 className="text-lg font-medium">Account</h3>
          <p className="text-muted-foreground mt-2 text-sm">
            Manage your account settings and preferences.
          </p>
        </TabsContent>
        <TabsContent value="password" className="p-0">
          <h3 className="text-lg font-medium">Password</h3>
          <p className="text-muted-foreground mt-2 text-sm">
            Change your password here. After saving, you&apos;ll be logged out.
          </p>
        </TabsContent>
        <TabsContent value="settings" className="p-0">
          <h3 className="text-lg font-medium">Settings</h3>
          <p className="text-muted-foreground mt-2 text-sm">
            Configure your application preferences and settings.
          </p>
        </TabsContent>
      </Tabs>
    </div>
  );
}

Card Tabs

Open in New Tab

Unlock this block

Gradient Tabs

Open in New Tab

Unlock this block

Icon Tabs

Open in New Tab

Unlock this block

Outline Tabs

Open in New Tab

Unlock this block