Components
Loading preview...
Pixel-art tabs from 8bitcn.com — retro pixel borders on triggers and content panels. Wraps shadcn/ui Tabs.
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-tabs"use client";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/8bit-tabs";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<Tabs defaultValue="stats" className="w-full max-w-sm">
<TabsList>
<TabsTrigger value="stats">Stats</TabsTrigger>
<TabsTrigger value="items">Items</TabsTrigger>
<TabsTrigger value="skills">Skills</TabsTrigger>
</TabsList>
<TabsContent value="stats" className="p-4 font-pixel text-sm">
HP 120 / 120 — ATK 42 — DEF 30
</TabsContent>
<TabsContent value="items" className="p-4 font-pixel text-sm">
Potion x3, Elixir x1, Phoenix Down x2
</TabsContent>
<TabsContent value="skills" className="p-4 font-pixel text-sm">
Fire II, Cure, Steal, Limit Break
</TabsContent>
</Tabs>
</div>
);
}