8-bit Tabs

Component 19

About

Pixel-art tabs from 8bitcn.com — retro pixel borders on triggers and content panels. Wraps shadcn/ui Tabs.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8-bit Tabs to your project and fits it to your theme.

Code

How 8-bit Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}