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 { 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">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">
<p className="p-4 text-center text-muted-foreground text-xs">Tab 1 content</p>
</TabsPanel>
<TabsPanel value="tab-2">
<p className="p-4 text-center text-muted-foreground text-xs">Tab 2 content</p>
</TabsPanel>
<TabsPanel value="tab-3">
<p className="p-4 text-center text-muted-foreground text-xs">Tab 3 content</p>
</TabsPanel>
</Tabs>
</div>
);
}