Removed prefix

Author: matthewlipski

packages/shadcn/components.json

@@ -4,11 +4,10 @@
   "rsc": false,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
     "css": "src/style.css",
     "baseColor": "slate",
     "cssVariables": true,
-    "prefix": "bn"
+    "prefix": ""
   },
   "aliases": {
     "components": "@/components",

packages/shadcn/src/badge/Badge.tsx

@@ -30,7 +30,7 @@ export const Badge = forwardRef<
       variant={isSelected ? "secondary" : "outline"}
       className={cn(
         className,
-        "bn-flex bn-items-center bn-gap-1 bn-rounded-full bn-h-7 bn-px-2.5",
+        "flex h-7 items-center gap-1 rounded-full px-2.5",
       )}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
@@ -51,7 +51,7 @@ export const Badge = forwardRef<
         {badge}
       </ShadCNComponents.Tooltip.TooltipTrigger>
       <ShadCNComponents.Tooltip.TooltipContent
-        className={"bn-flex bn-flex-col bn-items-center bn-whitespace-pre-wrap"}
+        className={"flex flex-col items-center whitespace-pre-wrap"}
       >
         <span>{mainTooltip}</span>
         {secondaryTooltip && <span>{secondaryTooltip}</span>}
@@ -73,10 +73,7 @@ export const BadgeGroup = forwardRef<
   return (
     <ShadCNComponents.Tooltip.TooltipProvider delayDuration={0}>
       <div
-        className={cn(
-          className,
-          "bn-flex bn-flex-row bn-flex-wrap bn-gap-1 bn-w-full",
-        )}
+        className={cn(className, "flex w-full flex-row flex-wrap gap-1")}
         ref={ref}
       >
         {children}

packages/shadcn/src/comments/Card.tsx

@@ -28,18 +28,16 @@ export const Card = forwardRef<
     <ShadCNComponents.Card.Card
       className={cn(
         className,
-        "bn-w-[300px]",
-        selected ? "bn-bg-accent bn-text-accent-foreground" : "",
+        "w-[300px]",
+        selected ? "bg-accent text-accent-foreground" : "",
       )}
       onFocus={onFocus}
       onBlur={onBlur}
       tabIndex={tabIndex}
       ref={ref}
     >
       {headerText && (
-        <div className={"bn-px-4 bn-pt-4 bn-italic bn-text-sm"}>
-          {headerText}
-        </div>
+        <div className={"px-4 pt-4 text-sm italic"}>{headerText}</div>
       )}
       {children}
     </ShadCNComponents.Card.Card>
@@ -58,9 +56,9 @@ export const CardSection = forwardRef<
     <div
       className={cn(
         className,
-        "bn-p-4",
-        className?.includes("bn-thread-comments")
-          ? "bn-flex bn-flex-col bn-gap-6 bn-border-b"
+        "p-4",
+        className?.includes("thread-comments")
+          ? "flex flex-col gap-6 border-b"
           : "",
       )}
       ref={ref}
@@ -84,7 +82,7 @@ export const ExpandSectionsPrompt = forwardRef<
     <ShadCNComponents.Button.Button
       className={cn(
         className,
-        "bn-p-0 bn-w-fit bn-text-foreground bn-bg-transparent hover:bn-bg-transparent",
+        "text-foreground w-fit bg-transparent p-0 hover:bg-transparent",
       )}
       ref={ref}
     >

packages/shadcn/src/comments/Comment.tsx

@@ -25,47 +25,33 @@ const AuthorInfo = forwardRef<
 
   if (authorInfo === "loading") {
     return (
-      <div
-        className={
-          "bn-flex bn-flex-row bn-flex-nowrap bn-items-center bn-gap-4"
-        }
-      >
+      <div className={"flex flex-row flex-nowrap items-center gap-4"}>
         <ShadCNComponents.Skeleton.Skeleton
-          className={
-            "bn-size-7 bn-rounded-full bn-bg-neutral-400 bn-animate-pulse"
-          }
+          className={"size-7 animate-pulse rounded-full bg-neutral-400"}
         />
         <ShadCNComponents.Skeleton.Skeleton
-          className={
-            "bn-h-3 bn-w-32 bn-rounded-full bn-bg-neutral-400 bn-animate-pulse"
-          }
+          className={"h-3 w-32 animate-pulse rounded-full bg-neutral-400"}
         />
       </div>
     );
   }
 
   return (
-    <div
-      className={"bn-flex bn-flex-row bn-flex-nowrap bn-items-center bn-gap-4"}
-    >
+    <div className={"flex flex-row flex-nowrap items-center gap-4"}>
       <ShadCNComponents.Avatar.Avatar>
         <ShadCNComponents.Avatar.AvatarImage
           src={authorInfo.avatarUrl}
           alt={authorInfo.username}
-          className={"bn-h-7 bn-rounded-full"}
+          className={"h-7 rounded-full"}
         />
         <ShadCNComponents.Avatar.AvatarFallback>
           {authorInfo.username[0]}
         </ShadCNComponents.Avatar.AvatarFallback>
       </ShadCNComponents.Avatar.Avatar>
 
-      <div
-        className={
-          "bn-flex bn-flex-row bn-flex-nowrap bn-items-center bn-gap-2"
-        }
-      >
-        <span className={"bn-text-sm bn-font-bold"}>{authorInfo.username}</span>
-        <span className={"bn-text-xs"}>
+      <div className={"flex flex-row flex-nowrap items-center gap-2"}>
+        <span className={"text-sm font-bold"}>{authorInfo.username}</span>
+        <span className={"text-xs"}>
           {timeString} {edited && `(${dict.comments.edited})`}
         </span>
       </div>
@@ -103,15 +89,12 @@ export const Comment = forwardRef<
   return (
     <div
       ref={ref}
-      className={cn(className, "bn-relative bn-flex bn-flex-col bn-gap-2")}
+      className={cn(className, "relative flex flex-col gap-2")}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
       {doShowActions ? (
-        <div
-          className={"bn-absolute bn-right-0 bn-top-0 bn-z-10"}
-          ref={focusRef}
-        >
+        <div className={"absolute right-0 top-0 z-10"} ref={focusRef}>
           {actions}
         </div>
       ) : null}

packages/shadcn/src/components/ui/avatar.tsx

@@ -13,7 +13,7 @@ function Avatar({
     <AvatarPrimitive.Root
       data-slot="avatar"
       className={cn(
-        "bn:relative bn:flex bn:size-8 bn:shrink-0 bn:overflow-hidden bn:rounded-full",
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
         className,
       )}
       {...props}
@@ -28,7 +28,7 @@ function AvatarImage({
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn("bn:aspect-square bn:size-full", className)}
+      className={cn("aspect-square size-full", className)}
       {...props}
     />
   );
@@ -42,7 +42,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bn:bg-muted bn:flex bn:size-full bn:items-center bn:justify-center bn:rounded-full",
+        "bg-muted flex size-full items-center justify-center rounded-full",
         className,
       )}
       {...props}

packages/shadcn/src/components/ui/badge.tsx

@@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "bn:inline-flex bn:items-center bn:justify-center bn:rounded-md bn:border bn:px-2 bn:py-0.5 bn:text-xs bn:font-medium bn:w-fit bn:whitespace-nowrap bn:shrink-0 bn:[&>svg]:size-3 bn:gap-1 bn:[&>svg]:pointer-events-none bn:focus-visible:border-ring bn:focus-visible:ring-ring/50 bn:focus-visible:ring-[3px] bn:aria-invalid:ring-destructive/20 bn:dark:aria-invalid:ring-destructive/40 bn:aria-invalid:border-destructive bn:transition-[color,box-shadow] bn:overflow-hidden",
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
         default:
-          "bn:border-transparent bn:bg-primary bn:text-primary-foreground bn:[a&]:hover:bg-primary/90",
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          "bn:border-transparent bn:bg-secondary bn:text-secondary-foreground bn:[a&]:hover:bg-secondary/90",
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "bn:border-transparent bn:bg-destructive bn:text-white bn:[a&]:hover:bg-destructive/90 bn:focus-visible:ring-destructive/20 bn:dark:focus-visible:ring-destructive/40 bn:dark:bg-destructive/60",
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "bn:text-foreground bn:[a&]:hover:bg-accent bn:[a&]:hover:text-accent-foreground",
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {

packages/shadcn/src/components/ui/button.tsx

@@ -5,27 +5,27 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "bn:inline-flex bn:items-center bn:justify-center bn:gap-2 bn:whitespace-nowrap bn:rounded-md bn:text-sm bn:font-medium bn:transition-all bn:disabled:pointer-events-none bn:disabled:opacity-50 bn:[&_svg]:pointer-events-none bn:[&_svg:not([class*=size-])]:size-4 bn:shrink-0 bn:[&_svg]:shrink-0 bn:outline-none bn:focus-visible:border-ring bn:focus-visible:ring-ring/50 bn:focus-visible:ring-[3px] bn:aria-invalid:ring-destructive/20 bn:dark:aria-invalid:ring-destructive/40 bn:aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default:
-          "bn:bg-primary bn:text-primary-foreground bn:shadow-xs bn:hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bn:bg-destructive bn:text-white bn:shadow-xs bn:hover:bg-destructive/90 bn:focus-visible:ring-destructive/20 bn:dark:focus-visible:ring-destructive/40 bn:dark:bg-destructive/60",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "bn:border bn:bg-background bn:shadow-xs bn:hover:bg-accent bn:hover:text-accent-foreground bn:dark:bg-input/30 bn:dark:border-input bn:dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bn:bg-secondary bn:text-secondary-foreground bn:shadow-xs bn:hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
-          "bn:hover:bg-accent bn:hover:text-accent-foreground bn:dark:hover:bg-accent/50",
-        link: "bn:text-primary bn:underline-offset-4 bn:hover:underline",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "bn:h-9 bn:px-4 bn:py-2 bn:has-[>svg]:px-3",
-        sm: "bn:h-8 bn:rounded-md bn:gap-1.5 bn:px-3 bn:has-[>svg]:px-2.5",
-        lg: "bn:h-10 bn:rounded-md bn:px-6 bn:has-[>svg]:px-4",
-        icon: "bn:size-9",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
       },
     },
     defaultVariants: {

packages/shadcn/src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bn:bg-card bn:text-card-foreground bn:flex bn:flex-col bn:gap-6 bn:rounded-xl bn:border bn:py-6 bn:shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
         className,
       )}
       {...props}
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "bn:@container/card-header bn:grid bn:auto-rows-min bn:grid-rows-[auto_auto] bn:items-start bn:gap-1.5 bn:px-6 bn:has-data-[slot=card-action]:grid-cols-[1fr_auto] bn:[.border-b]:pb-6",
+        "@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
         className,
       )}
       {...props}
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("bn:leading-none bn:font-semibold", className)}
+      className={cn("font-semibold leading-none", className)}
       {...props}
     />
   );
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("bn:text-muted-foreground bn:text-sm", className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );
@@ -53,7 +53,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-action"
       className={cn(
-        "bn:col-start-2 bn:row-span-2 bn:row-start-1 bn:self-start bn:justify-self-end",
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
         className,
       )}
       {...props}
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("bn:px-6", className)}
+      className={cn("px-6", className)}
       {...props}
     />
   );
@@ -75,10 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-footer"
-      className={cn(
-        "bn:flex bn:items-center bn:px-6 bn:[.border-t]:pt-6",
-        className,
-      )}
+      className={cn("[.border-t]:pt-6 flex items-center px-6", className)}
       {...props}
     />
   );