Search
Copy Code
Previous: Resizable
Next: Breadcrumb
Close Terminal
Light Mode
A snapshot of everything happening in this workspace.
tabs-demo.tsx
tabs.tsx
prompt.md
Collapse
Reset
Copy Code
Download
Run
1
import { LayoutGrid, Folder, Plug, Activity, Globe, Settings } from "lucide-react"
2
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
3
4
export default function TabsDemo() {
5
return (
6
<div className="w-full min-h-[400px] flex flex-col items-center justify-center p-4 sm:p-8">
7
<Tabs defaultValue="overview" className="w-[600px] max-w-full">
8
<div className="w-full flex justify-start sm:justify-center overflow-x-auto scrollbar-none py-1 px-1">
9
<TabsList className="max-w-none">
10
<TabsTrigger value="overview" icon={<LayoutGrid className="h-4 w-4" />}>
11
Overview
12
</TabsTrigger>
13
<TabsTrigger value="projects" icon={<Folder className="h-4 w-4" />}>
14
Projects
15
</TabsTrigger>
16
<TabsTrigger value="integrations" icon={<Plug className="h-4 w-4" />}>
17
Integrations
18
</TabsTrigger>
19
<TabsTrigger value="activity" icon={<Activity className="h-4 w-4" />}>
20
Activity
21
</TabsTrigger>
22
<TabsTrigger value="domains" icon={<Globe className="h-4 w-4" />}>
23
Domains
24
</TabsTrigger>
25
<TabsTrigger value="settings" icon={<Settings className="h-4 w-4" />}>
26
Settings
27
</TabsTrigger>
28
</TabsList>
29
</div>
30
31
<TabsContent value="overview">
32
A snapshot of everything happening in this workspace.
33
</TabsContent>
34
<TabsContent value="projects">
35
Every project you have access to, newest first.
36
</TabsContent>
37
<TabsContent value="integrations">
38
Connect the services your team already uses.
39
</TabsContent>
40
<TabsContent value="activity">
41
A running log of deploys, comments, and edits.
42
</TabsContent>
43
<TabsContent value="domains">
44
Point custom domains at this workspace.
45
</TabsContent>
46
<TabsContent value="settings">
47
Manage your workspace preferences and configurations.
48
</TabsContent>
49
</Tabs>
50
</div>
51
)
52
}