This component no longer exists. It was in shadcn-zhcndoc’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-14 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
badge
shadcn-zhcndoc/badgeRemovedComponent
shadcn-zhcndoc publishes no description for this item.
Live preview
live · rendered by the registry
Rendered by shadcn-zhcndoc on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://shadcn.zhcndoc.com/r/styles/new-york/badge.jsonSource
1import * as React from "react"2import { cva, type VariantProps } from "class-variance-authority"34import { cn } from "@/lib/utils"56const badgeVariants = cva(7 "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",8 {9 variants: {10 variant: {11 default:12 "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",13 secondary:14 "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",15 destructive:16 "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",17 outline: "text-foreground",18 },19 },20 defaultVariants: {21 variant: "default",22 },23 }24)2526export interface BadgeProps27 extends React.HTMLAttributes<HTMLDivElement>,28 VariantProps<typeof badgeVariants> {}2930function Badge({ className, variant, ...props }: BadgeProps) {31 return (32 <div className={cn(badgeVariants({ variant }), className)} {...props} />33 )34}3536export { Badge, badgeVariants }
