// Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and examples.
| name | 8-bit-pixel-art-patterns |
| description | Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics. |
Create authentic pixelated borders and shadows using absolute-positioned divs. These patterns are essential for the retro aesthetic of 8-bit components.
Use 9 div elements to create a pixelated border effect:
<div className="relative">
<ShadcnButton {...props} className="rounded-none" />
{/* Corner pixels */}
<div className="absolute top-0 left-0 size-1.5 bg-foreground" />
<div className="absolute top-0 right-0 size-1.5 bg-foreground" />
<div className="absolute bottom-0 left-0 size-1.5 bg-foreground" />
<div className="absolute bottom-0 right-0 size-1.5 bg-foreground" />
{/* Edge segments */}
<div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
<div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />
<div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
<div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />
{/* Side borders */}
<div className="absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
<div className="absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
</div>
Add depth with pixelated shadows:
{variant !== "outline" && (
<>
{/* Top shadow */}
<div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
<div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />
{/* Bottom shadow */}
<div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
<div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
</>
)}
Smaller, self-contained pixel borders for icon buttons:
{size === "icon" && (
<>
{/* Top/bottom full bars */}
<div className="absolute top-0 left-0 w-full h-1.5 bg-foreground" />
<div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground" />
{/* Side segments */}
<div className="absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground" />
<div className="absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground" />
<div className="absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground" />
<div className="absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground" />
</>
)}
Use CSS custom properties or dark mode variants:
<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
rounded-none - Remove all border radius from base componentsring or foreground with dark variant for contrastSee components/ui/8bit/button.tsx for complete implementation.