Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
export default function Basic() {
return (
<Tabs defaultValue="home">
<TabsList>
<TabsTrigger value="home">Home</TabsTrigger>
<TabsTrigger value="bookmarks">Bookmarks</TabsTrigger>
<TabsTrigger value="collections">Collections</TabsTrigger>
<TabsTrigger value="discover">Discover</TabsTrigger>
</TabsList>
<TabsContent value="home" className="space-y-2 p-4">
<h2 className="font-bold">Home</h2>
<p>This is the home tab content.</p>
</TabsContent>
<TabsContent value="bookmarks" className="space-y-2 p-4">
<h2 className="font-bold">Bookmarks</h2>
<p>This is the bookmarks tab content.</p>
</TabsContent>
<TabsContent value="collections" className="space-y-2 p-4">
<h2 className="font-bold">Collections</h2>
<p>This is the collections tab content.</p>
</TabsContent>
<TabsContent value="discover" className="space-y-2 p-4">
<h2 className="font-bold">Discover</h2>
<p>This is the discover tab content.</p>
</TabsContent>
</Tabs>
);
}
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
ArrowRight,
Bookmark,
ClockCircle,
Download,
Upload,
Users,
} from "@mynaui/icons-react";
export default function WithCard() {
return (
<Card>
<CardHeader>
<CardTitle>Account Settings</CardTitle>
</CardHeader>
<CardContent>
<Tabs defaultValue="overview">
<TabsList className="mb-4">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="saved">Saved Items</TabsTrigger>
<TabsTrigger value="groups">Groups</TabsTrigger>
<TabsTrigger value="comments">Comments</TabsTrigger>
<TabsTrigger value="backup">Backup/Restore</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<div className="grid gap-4">
<div>
<h3 className="font-medium">Account Overview</h3>
<p className="text-muted-foreground">
View your account details and activity.
</p>
</div>
<div className="grid gap-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<ClockCircle
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Signed in 2 hours ago</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<ClockCircle
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Uploaded a file 4 days ago</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
</div>
</div>
</TabsContent>
<TabsContent value="saved">
<div className="grid gap-4">
<div>
<h3 className="font-medium">Saved Items</h3>
<p className="text-muted-foreground">
View and manage your saved items.
</p>
</div>
<div className="grid gap-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Bookmark
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Design Inspiration</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Bookmark
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Development Resources</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Bookmark
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Marketing Strategies</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
</div>
</div>
</TabsContent>
<TabsContent value="groups">
<div className="grid gap-4">
<div>
<h3 className="font-medium">Groups</h3>
<p className="text-muted-foreground">
Manage your group memberships and settings.
</p>
</div>
<div className="grid gap-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Users
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Design Team</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Users
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Marketing Squad</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Users
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Engineering Crew</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
</div>
</div>
</TabsContent>
<TabsContent value="comments">
<div className="grid gap-4">
<div className="border-b pb-4">
<h3 className="font-medium">Comments</h3>
<p className="text-muted-foreground">
Manage and respond to comments on your account.
</p>
</div>
<div className="grid gap-4">
<div className="flex items-start gap-4">
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="font-medium">Jill Watson</div>
<div className="text-xs text-muted-foreground">
2 days ago
</div>
</div>
<p className="text-muted-foreground">
Great work on the new design! Really love the clean look
and feel.
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="font-medium">Tom Hanks</div>
<div className="text-xs text-muted-foreground">
1 week ago
</div>
</div>
<p className="text-muted-foreground">
Awesome job on the new features! Can't wait to try
them out.
</p>
</div>
</div>
</div>
</div>
</TabsContent>
<TabsContent value="backup">
<div className="grid gap-4">
<div>
<h3 className="font-medium">Backup & Restore</h3>
<p className="text-muted-foreground">
Manage your account backups and restore points.
</p>
</div>
<div className="grid gap-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Download
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Backup Account</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Upload
className="size-5 text-muted-foreground"
stroke={2}
/>
<span>Restore Account</span>
</div>
<Button variant="ghost" size="icon">
<ArrowRight
className="size-4 text-muted-foreground"
stroke={2}
/>
</Button>
</div>
</div>
</div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
);
}
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
export default function Simple() {
return (
<Tabs defaultValue="import-export">
<TabsList className="mb-4">
<TabsTrigger value="import-export">Import/Export</TabsTrigger>
<TabsTrigger value="preferences">Preferences</TabsTrigger>
<TabsTrigger value="analytics">Analytics</TabsTrigger>
<TabsTrigger value="support">Support</TabsTrigger>
<TabsTrigger value="integrations">Integrations</TabsTrigger>
</TabsList>
<TabsContent value="import-export">
<>
<h2 className="font-bold">Import/Export</h2>
<p className="text-muted-foreground">
Manage your data by importing or exporting it.
</p>
<div className="mt-4 grid gap-4">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Import Data</h3>
<p className="text-muted-foreground">
Upload a file to import your data.
</p>
</div>
<Button size="sm" variant="outline">
Import
</Button>
</div>
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Export Data</h3>
<p className="text-muted-foreground">
Download a file with your data.
</p>
</div>
<Button size="sm" variant="outline">
Export
</Button>
</div>
</div>
</>
</TabsContent>
<TabsContent value="preferences">
<>
<h2 className="font-bold">Preferences</h2>
<p className="text-muted-foreground">
Customize your settings to fit your needs.
</p>
<div className="mt-4 grid gap-4">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Dark Mode</h3>
<p className="text-muted-foreground">
Toggle between light and dark mode.
</p>
</div>
<Checkbox id="dark-mode" defaultChecked />
</div>
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Notifications</h3>
<p className="text-muted-foreground">
Receive updates and alerts.
</p>
</div>
<Checkbox id="notifications" defaultChecked />
</div>
</div>
</>
</TabsContent>
<TabsContent value="analytics">
<>
<h2 className="font-bold">Analytics</h2>
<p className="text-muted-foreground">Track and analyze your data.</p>
<div className="mt-4 grid gap-4">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Usage Metrics</h3>
<p className="text-muted-foreground">
View your usage statistics.
</p>
</div>
<Button size="sm" variant="outline">
View Metrics
</Button>
</div>
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Activity Log</h3>
<p className="text-muted-foreground">
Review your activity history.
</p>
</div>
<Button size="sm" variant="outline">
View Log
</Button>
</div>
</div>
</>
</TabsContent>
<TabsContent value="support">
<>
<h2 className="font-bold">Support</h2>
<p className="text-muted-foreground">Get help and resources.</p>
<div className="mt-4 grid gap-4">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Documentation</h3>
<p className="text-muted-foreground">
Read our comprehensive guides.
</p>
</div>
<Button size="sm" variant="outline">
View Documentation
</Button>
</div>
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Contact Support</h3>
<p className="text-muted-foreground">
Submit a support request.
</p>
</div>
<Button size="sm" variant="outline">
Contact Us
</Button>
</div>
</div>
</>
</TabsContent>
<TabsContent value="integrations">
<>
<h2 className="font-bold">Integrations</h2>
<p className="text-muted-foreground">
Connect your tools and services.
</p>
<div className="mt-4 grid gap-4">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Zapier</h3>
<p className="text-muted-foreground">
Automate your workflows.
</p>
</div>
<Button size="sm" variant="outline">
Connect Zapier
</Button>
</div>
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">Google Calendar</h3>
<p className="text-muted-foreground">
Sync your events and appointments.
</p>
</div>
<Button size="sm" variant="outline">
Connect Google Calendar
</Button>
</div>
</div>
</>
</TabsContent>
</Tabs>
);
}