8-bit Label
An 8-bit-styled wrapper around the shadcn/ui Label component. It applies the retro font by default; set `font="normal"` to omit the retro font class.
componentregistry-item.json
Installed with shadcn add · 1 workaround · theme from the install docs
- applied the registry's theme (tokens, fonts and CSS from the registry preview settings)
Installation
pnpm dlx shadcn@latest add @8bitcn/label
Requires @8bitcn in the registries of your components.json (shadcn adds official directory namespaces automatically).
Usage
usage.tsx
import { Label } from "@/components/ui/8bit/label";export function Example() { return ( <div> <Label htmlFor="username">Username</Label> <input id="username" name="username" /> <Label htmlFor="email" font="normal">Email</Label> <input id="email" name="email" type="email" /> <Label htmlFor="updates">Receive updates</Label> <input id="updates" name="updates" type="checkbox" /> </div> );}- Label a form control in a retro or pixel-art themed interface.
- Use the default pixel font for a consistent 8-bit visual style.
- Set `font="normal"` when a label should use the surrounding typography instead.
Examples
Retro text field label
Associate a default retro label with a text input.
retro-text-field-label.tsx
import { Label } from "@/components/ui/8bit/label";export function UsernameField() { return ( <div> <Label htmlFor="username">Username</Label> <input id="username" name="username" /> </div> );}Normal-font label
Opt out of the retro font for a label that should match surrounding typography.
normal-font-label.tsx
import { Label } from "@/components/ui/8bit/label";export function EmailField() { return ( <div> <Label htmlFor="email" font="normal">Email</Label> <input id="email" name="email" type="email" /> </div> );}Checkbox label
Use the label with a checkbox control.
checkbox-label.tsx
import { Label } from "@/components/ui/8bit/label";export function UpdatesOption() { return ( <div> <input id="updates" name="updates" type="checkbox" /> <Label htmlFor="updates">Receive updates</Label> </div> );}API reference
PropTypeDefaultDescription
font"normal" | "retro" | null—Selects the font style. `normal` omits the `retro` class; `retro` or an omitted value applies it. Although the variant definition declares a retro default, the component does not call the variant function, so its runtime behavior comes from this explicit class condition.
asChildboolean—Passed through to the underlying Radix/shadcn Label component.
classNamestring—Additional CSS class name, combined with the conditional `retro` class.
Radix Label Root propsReact.ComponentProps<typeof LabelPrimitive.Root>—All props accepted by the Radix Label Root, including standard label attributes such as `htmlFor`, as well as its supported children and event props.
Accessibility
- Use `htmlFor` to associate the label with the matching form control `id`; this supports assistive technology and makes the label clickable where applicable.
- Keep the label text descriptive of the control’s purpose.
- The component preserves the underlying Radix/shadcn Label semantics and forwards the remaining props.
Docs written by openai:gpt-6-luna from the registry source.
Use with Coding Agent
Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.
prompt.md
Use the "8-bit Label" component (8bitcn/label) from its shadcn registry.1. Install it with: npx shadcn@latest add @8bitcn/label2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: font, asChild, className, Radix Label Root props.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport { Label } from "@/components/ui/8bit/label";export function Example() { return ( <div> <Label htmlFor="username">Username</Label> <input id="username" name="username" /> <Label htmlFor="email" font="normal">Email</Label> <input id="email" name="email" type="email" /> <Label htmlFor="updates">Receive updates</Label> <input id="updates" name="updates" type="checkbox" /> </div> );}```Files & dependencies
- components/ui/8bit/label.tsx→ components/ui/8bit/label.tsx
- components/ui/8bit/styles/retro.css→ components/ui/8bit/styles/retro.css
registryDependencieslabel
Uses from @8bitcn