Cyberpunk Text Box
A fully-customisable bordered monospace label box with Tailwind-based theming for color, typography, and background.
CyberpunkTextBox is the configurable sibling of CyberpunkText. Unlike its counterpart, every visual aspect — border color, text color, font size, background — is controlled through props rather than theme tokens, making it suitable for standalone use or as a design-system primitive. Optional ref props allow GSAP-driven parent animations.
Installation
npx shadcn@latest add @adv/cyberpunk-text-boxUsage
import { CyberpunkTextBox } from '@/components/ui/CyberpunkTextBox';
<CyberpunkTextBox
text="ACCESS GRANTED"
borderColor="border-cyan-500"
textColor="text-cyan-500"
textBackgroundColor="bg-black"
fontSize="text-lg"
letterSpacing="tracking-widest"
/>Example
DEFAULT
CUSTOM
BOLD
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The label text rendered inside the box. |
padding | number | 3 | Tailwind padding level applied to the inner container (e.g. 3 → p-3). |
fontSize | string | "text-base" | Tailwind font-size class. |
borderColor | string | "border-red-500" | Tailwind border-color class. |
borderThickness | string | "4" | Tailwind border-width value (e.g. "4" → border-4). |
textColor | string | "text-red-500" | Tailwind text-color class. |
fontFamily | string | "font-mono" | Tailwind font-family class. |
fontWeight | string | "font-bold" | Tailwind font-weight class. |
letterSpacing | string | "tracking-wider" | Tailwind letter-spacing class. |
textTransform | string | "uppercase" | Tailwind text-transform class. |
textBackgroundColor | string | "bg-transparent" | Tailwind background-color class for the inner text area. |
className | string | "" | Extra classes applied to the outermost container. |
containerRef | Ref<HTMLDivElement> | — | Ref for the animated-width wrapper. |
boxRef | Ref<HTMLDivElement> | — | Ref for the bordered box (GSAP scale target). |
textVisualRef | Ref<HTMLDivElement> | — | Ref for the text <div> (GSAP text scramble target). |