8-bit Label

PreviousNext

A simple 8-bit label component

Docs
8bitcncomponent

Preview

Loading preview…
components/ui/8bit/label.tsx
"use client";

import type * as React from "react";

import type * as LabelPrimitive from "@radix-ui/react-label";
import { type VariantProps, cva } from "class-variance-authority";

import { cn } from "@/lib/utils";

import { Label as ShadcnLabel } from "@/components/ui/label";

import "./styles/retro.css";

export const inputVariants = cva("", {
  variants: {
    font: {
      normal: "",
      retro: "retro",
    },
  },
  defaultVariants: {
    font: "retro",
  },
});

interface BitLabelProps
  extends React.ComponentProps<typeof LabelPrimitive.Root>,
    VariantProps<typeof inputVariants> {
  asChild?: boolean;
}

function Label({ className, font, ...props }: BitLabelProps) {
  return (
    <ShadcnLabel
      className={cn(className, font !== "normal" && "retro")}
      {...props}
    />
  );
}

export { Label };

Installation

npx shadcn@latest add @8bitcn/label

Usage

import { Label } from "@/components/label"
<Label />