Components
Loading preview...
A set of layered sections of content—known as tab panels—that are displayed one at a time.
npx shadcn@latest add https://21st.dev/r/coss.com/tabsimport { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from "lucide-react";
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/component";
export default function Particle() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<Tabs defaultValue="tab-1">
<div className="border-b">
<TabsList variant="underline">
<TabsTab value="tab-1">
<HouseIcon aria-hidden="true" />
Overview
</TabsTab>
<TabsTab value="tab-2">
<PanelsTopLeftIcon aria-hidden="true" />
Projects
</TabsTab>
<TabsTab value="tab-3">
<SettingsIcon aria-hidden="true" />
Settings
</TabsTab>
</TabsList>
</div>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">Overview content</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">Projects content</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">Settings content</p>
</TabsPanel>
</Tabs>
</div>
);
}