From ee9bd3623de378dc29ebb784f2f9650402a84ae6 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 26 Aug 2025 15:26:53 +0200
Subject: [PATCH 1/7] Removed prefix

---
 packages/shadcn/components.json               |  3 +-
 packages/shadcn/src/badge/Badge.tsx           |  9 ++--
 packages/shadcn/src/comments/Card.tsx         | 16 ++++---
 packages/shadcn/src/comments/Comment.tsx      | 37 +++++-----------
 packages/shadcn/src/components/ui/avatar.tsx  |  6 +--
 packages/shadcn/src/components/ui/badge.tsx   | 10 ++---
 packages/shadcn/src/components/ui/button.tsx  | 22 +++++-----
 packages/shadcn/src/components/ui/card.tsx    | 17 ++++----
 .../src/components/ui/dropdown-menu.tsx       | 28 ++++++-------
 packages/shadcn/src/components/ui/form.tsx    |  8 ++--
 packages/shadcn/src/components/ui/input.tsx   | 16 +++----
 packages/shadcn/src/components/ui/label.tsx   | 16 +++----
 packages/shadcn/src/components/ui/popover.tsx |  2 +-
 packages/shadcn/src/components/ui/select.tsx  | 36 +++++++---------
 .../shadcn/src/components/ui/skeleton.tsx     |  8 ++--
 packages/shadcn/src/components/ui/tabs.tsx    | 30 ++++++-------
 packages/shadcn/src/components/ui/toggle.tsx  | 28 ++++++-------
 packages/shadcn/src/components/ui/tooltip.tsx |  4 +-
 packages/shadcn/src/form/TextInput.tsx        |  8 ++--
 packages/shadcn/src/menu/Button.tsx           |  2 +-
 packages/shadcn/src/menu/Menu.tsx             |  4 +-
 packages/shadcn/src/panel/Panel.tsx           |  4 +-
 packages/shadcn/src/panel/PanelTab.tsx        |  2 +-
 packages/shadcn/src/panel/PanelTextInput.tsx  |  2 +-
 packages/shadcn/src/popover/popover.tsx       |  4 +-
 .../shadcn/src/sideMenu/SideMenuButton.tsx    |  2 +-
 packages/shadcn/src/style.css                 |  6 +--
 .../src/suggestionMenu/SuggestionMenu.tsx     |  2 +-
 .../SuggestionMenuEmptyItem.tsx               |  6 +--
 .../src/suggestionMenu/SuggestionMenuItem.tsx | 24 +++++------
 .../suggestionMenu/SuggestionMenuLabel.tsx    |  2 +-
 .../suggestionMenu/SuggestionMenuLoader.tsx   |  5 ++-
 .../gridSuggestionMenu/GridSuggestionMenu.tsx |  4 +-
 .../GridSuggestionMenuItem.tsx                |  8 ++--
 .../shadcn/src/tableHandle/ExtendButton.tsx   | 12 +++---
 .../shadcn/src/tableHandle/TableHandle.tsx    |  2 +-
 packages/shadcn/src/toolbar/Toolbar.tsx       | 16 ++++---
 packages/shadcn/tailwind.config.js            |  6 ---
 playground/src/main.tsx                       |  2 +-
 playground/src/style.css                      | 42 +++++++++++++++++++
 40 files changed, 231 insertions(+), 230 deletions(-)
 delete mode 100644 packages/shadcn/tailwind.config.js

diff --git a/packages/shadcn/components.json b/packages/shadcn/components.json
index 7b5a0aa931..eafc961dca 100644
--- a/packages/shadcn/components.json
+++ b/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",
diff --git a/packages/shadcn/src/badge/Badge.tsx b/packages/shadcn/src/badge/Badge.tsx
index d8333fc2f1..74c1787953 100644
--- a/packages/shadcn/src/badge/Badge.tsx
+++ b/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}
diff --git a/packages/shadcn/src/comments/Card.tsx b/packages/shadcn/src/comments/Card.tsx
index 70cdb17193..75b880b54f 100644
--- a/packages/shadcn/src/comments/Card.tsx
+++ b/packages/shadcn/src/comments/Card.tsx
@@ -28,8 +28,8 @@ 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}
@@ -37,9 +37,7 @@ export const Card = forwardRef<
       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}
     >
diff --git a/packages/shadcn/src/comments/Comment.tsx b/packages/shadcn/src/comments/Comment.tsx
index c493a56642..75caab87bb 100644
--- a/packages/shadcn/src/comments/Comment.tsx
+++ b/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}
diff --git a/packages/shadcn/src/components/ui/avatar.tsx b/packages/shadcn/src/components/ui/avatar.tsx
index 41070f9c95..1dcdcee406 100644
--- a/packages/shadcn/src/components/ui/avatar.tsx
+++ b/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}
diff --git a/packages/shadcn/src/components/ui/badge.tsx b/packages/shadcn/src/components/ui/badge.tsx
index 571939ac14..b1c2ab1b85 100644
--- a/packages/shadcn/src/components/ui/badge.tsx
+++ b/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: {
diff --git a/packages/shadcn/src/components/ui/button.tsx b/packages/shadcn/src/components/ui/button.tsx
index 6e10ccca17..43ab1151fc 100644
--- a/packages/shadcn/src/components/ui/button.tsx
+++ b/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: {
diff --git a/packages/shadcn/src/components/ui/card.tsx b/packages/shadcn/src/components/ui/card.tsx
index 462d6cc96d..0deef84bed 100644
--- a/packages/shadcn/src/components/ui/card.tsx
+++ b/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}
     />
   );
diff --git a/packages/shadcn/src/components/ui/dropdown-menu.tsx b/packages/shadcn/src/components/ui/dropdown-menu.tsx
index ca914f7ca5..568aad2a78 100644
--- a/packages/shadcn/src/components/ui/dropdown-menu.tsx
+++ b/packages/shadcn/src/components/ui/dropdown-menu.tsx
@@ -41,7 +41,7 @@ function DropdownMenuContent({
       data-slot="dropdown-menu-content"
       sideOffset={sideOffset}
       className={cn(
-        "bn:bg-popover bn:text-popover-foreground bn:data-[state=open]:animate-in bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=open]:fade-in-0 bn:data-[state=closed]:zoom-out-95 bn:data-[state=open]:zoom-in-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:z-50 bn:max-h-(--radix-dropdown-menu-content-available-height) bn:min-w-[8rem] bn:origin-(--radix-dropdown-menu-content-transform-origin) bn:overflow-x-hidden bn:overflow-y-auto bn:rounded-md bn:border bn:p-1 bn:shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
         className,
       )}
       {...props}
@@ -72,7 +72,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:data-[variant=destructive]:text-destructive bn:data-[variant=destructive]:focus:bg-destructive/10 bn:dark:data-[variant=destructive]:focus:bg-destructive/20 bn:data-[variant=destructive]:focus:text-destructive bn:data-[variant=destructive]:*:[svg]:!text-destructive bn:[&_svg:not([class*=text-])]:text-muted-foreground bn:relative bn:flex bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:px-2 bn:py-1.5 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:data-[inset]:pl-8 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -90,15 +90,15 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:relative bn:flex bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:py-1.5 bn:pr-2 bn:pl-8 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
       {...props}
     >
-      <span className="bn:pointer-events-none bn:absolute bn:left-2 bn:flex bn:size-3.5 bn:items-center bn:justify-center">
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="bn:size-4" />
+          <CheckIcon className="size-4" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -126,14 +126,14 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:relative bn:flex bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:py-1.5 bn:pr-2 bn:pl-8 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
     >
-      <span className="bn:pointer-events-none bn:absolute bn:left-2 bn:flex bn:size-3.5 bn:items-center bn:justify-center">
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="bn:size-2 bn:fill-current" />
+          <CircleIcon className="size-2 fill-current" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -153,7 +153,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "bn:px-2 bn:py-1.5 bn:text-sm bn:font-medium bn:data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
         className,
       )}
       {...props}
@@ -168,7 +168,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bn:bg-border bn:-mx-1 bn:my-1 bn:h-px", className)}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
   );
@@ -182,7 +182,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "bn:text-muted-foreground bn:ml-auto bn:text-xs bn:tracking-widest",
+        "text-muted-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}
@@ -209,13 +209,13 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:data-[state=open]:bg-accent bn:data-[state=open]:text-accent-foreground bn:flex bn:cursor-default bn:items-center bn:rounded-sm bn:px-2 bn:py-1.5 bn:text-sm bn:outline-hidden bn:select-none bn:data-[inset]:pl-8",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8",
         className,
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="bn:ml-auto bn:size-4" />
+      <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
   );
 }
@@ -228,7 +228,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bn:bg-popover bn:text-popover-foreground bn:data-[state=open]:animate-in bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=open]:fade-in-0 bn:data-[state=closed]:zoom-out-95 bn:data-[state=open]:zoom-in-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:z-50 bn:min-w-[8rem] bn:origin-(--radix-dropdown-menu-content-transform-origin) bn:overflow-hidden bn:rounded-md bn:border bn:p-1 bn:shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
         className,
       )}
       {...props}
diff --git a/packages/shadcn/src/components/ui/form.tsx b/packages/shadcn/src/components/ui/form.tsx
index 1935c0aaff..733fdf6a62 100644
--- a/packages/shadcn/src/components/ui/form.tsx
+++ b/packages/shadcn/src/components/ui/form.tsx
@@ -78,7 +78,7 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
     <FormItemContext.Provider value={{ id }}>
       <div
         data-slot="form-item"
-        className={cn("bn:grid bn:gap-2", className)}
+        className={cn("grid gap-2", className)}
         {...props}
       />
     </FormItemContext.Provider>
@@ -95,7 +95,7 @@ function FormLabel({
     <Label
       data-slot="form-label"
       data-error={!!error}
-      className={cn("bn:data-[error=true]:text-destructive", className)}
+      className={cn("data-[error=true]:text-destructive", className)}
       htmlFor={formItemId}
       {...props}
     />
@@ -128,7 +128,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="form-description"
       id={formDescriptionId}
-      className={cn("bn:text-muted-foreground bn:text-sm", className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );
@@ -146,7 +146,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="form-message"
       id={formMessageId}
-      className={cn("bn:text-destructive bn:text-sm", className)}
+      className={cn("text-destructive text-sm", className)}
       {...props}
     >
       {body}
diff --git a/packages/shadcn/src/components/ui/input.tsx b/packages/shadcn/src/components/ui/input.tsx
index db642a1999..75927ffb35 100644
--- a/packages/shadcn/src/components/ui/input.tsx
+++ b/packages/shadcn/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -8,14 +8,14 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "bn:file:text-foreground bn:placeholder:text-muted-foreground bn:selection:bg-primary bn:selection:text-primary-foreground bn:dark:bg-input/30 bn:border-input bn:flex bn:h-9 bn:w-full bn:min-w-0 bn:rounded-md bn:border bn:bg-transparent bn:px-3 bn:py-1 bn:text-base bn:shadow-xs bn:transition-[color,box-shadow] bn:outline-none bn:file:inline-flex bn:file:h-7 bn:file:border-0 bn:file:bg-transparent bn:file:text-sm bn:file:font-medium bn:disabled:pointer-events-none bn:disabled:cursor-not-allowed bn:disabled:opacity-50 bn:md:text-sm",
-        "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",
-        className
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };
diff --git a/packages/shadcn/src/components/ui/label.tsx b/packages/shadcn/src/components/ui/label.tsx
index 43dcc59689..affa973b4a 100644
--- a/packages/shadcn/src/components/ui/label.tsx
+++ b/packages/shadcn/src/components/ui/label.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 function Label({
   className,
@@ -13,12 +13,12 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "bn:flex bn:items-center bn:gap-2 bn:text-sm bn:leading-none bn:font-medium bn:select-none bn:group-data-[disabled=true]:pointer-events-none bn:group-data-[disabled=true]:opacity-50 bn:peer-disabled:cursor-not-allowed bn:peer-disabled:opacity-50",
-        className
+        "flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };
diff --git a/packages/shadcn/src/components/ui/popover.tsx b/packages/shadcn/src/components/ui/popover.tsx
index d3616f90d2..bb96bd9f0a 100644
--- a/packages/shadcn/src/components/ui/popover.tsx
+++ b/packages/shadcn/src/components/ui/popover.tsx
@@ -29,7 +29,7 @@ function PopoverContent({
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "bn:bg-popover bn:text-popover-foreground bn:data-[state=open]:animate-in bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=open]:fade-in-0 bn:data-[state=closed]:zoom-out-95 bn:data-[state=open]:zoom-in-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:z-50 bn:w-72 bn:origin-(--radix-popover-content-transform-origin) bn:rounded-md bn:border bn:p-4 bn:shadow-md bn:outline-hidden",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md",
         className,
       )}
       {...props}
diff --git a/packages/shadcn/src/components/ui/select.tsx b/packages/shadcn/src/components/ui/select.tsx
index d5674bb119..69a5981dbf 100644
--- a/packages/shadcn/src/components/ui/select.tsx
+++ b/packages/shadcn/src/components/ui/select.tsx
@@ -35,14 +35,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "bn:border-input bn:data-[placeholder]:text-muted-foreground bn:[&_svg:not([class*=text-])]:text-muted-foreground bn:focus-visible:border-ring bn:focus-visible:ring-ring/50 bn:aria-invalid:ring-destructive/20 bn:dark:aria-invalid:ring-destructive/40 bn:aria-invalid:border-destructive bn:dark:bg-input/30 bn:dark:hover:bg-input/50 bn:flex bn:w-fit bn:items-center bn:justify-between bn:gap-2 bn:rounded-md bn:border bn:bg-transparent bn:px-3 bn:py-2 bn:text-sm bn:whitespace-nowrap bn:shadow-xs bn:transition-[color,box-shadow] bn:outline-none bn:focus-visible:ring-[3px] bn:disabled:cursor-not-allowed bn:disabled:opacity-50 bn:data-[size=default]:h-9 bn:data-[size=sm]:h-8 bn:*:data-[slot=select-value]:line-clamp-1 bn:*:data-[slot=select-value]:flex bn:*:data-[slot=select-value]:items-center bn:*:data-[slot=select-value]:gap-2 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=text-])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="bn:size-4 bn:opacity-50" />
+        <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -58,9 +58,9 @@ function SelectContent({
     <SelectPrimitive.Content
       data-slot="select-content"
       className={cn(
-        "bn:bg-popover bn:text-popover-foreground bn:data-[state=open]:animate-in bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=open]:fade-in-0 bn:data-[state=closed]:zoom-out-95 bn:data-[state=open]:zoom-in-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:relative bn:z-50 bn:max-h-(--radix-select-content-available-height) bn:min-w-[8rem] bn:origin-(--radix-select-content-transform-origin) bn:overflow-x-hidden bn:overflow-y-auto bn:rounded-md bn:border bn:shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md",
         position === "popper" &&
-          "bn:data-[side=bottom]:translate-y-1 bn:data-[side=left]:-translate-x-1 bn:data-[side=right]:translate-x-1 bn:data-[side=top]:-translate-y-1",
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
       )}
       position={position}
@@ -69,9 +69,9 @@ function SelectContent({
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "bn:p-1",
+          "p-1",
           position === "popper" &&
-            "bn:h-[var(--radix-select-trigger-height)] bn:w-full bn:min-w-[var(--radix-select-trigger-width)] bn:scroll-my-1",
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
         )}
       >
         {children}
@@ -88,10 +88,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn(
-        "bn:text-muted-foreground bn:px-2 bn:py-1.5 bn:text-xs",
-        className,
-      )}
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
       {...props}
     />
   );
@@ -106,14 +103,14 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:[&_svg:not([class*=text-])]:text-muted-foreground bn:relative bn:flex bn:w-full bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:py-1.5 bn:pr-8 bn:pl-2 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4 bn:*:[span]:last:flex bn:*:[span]:last:items-center bn:*:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
     >
-      <span className="bn:absolute bn:right-2 bn:flex bn:size-3.5 bn:items-center bn:justify-center">
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="bn:size-4" />
+          <CheckIcon className="size-4" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -128,10 +125,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn(
-        "bn:bg-border bn:pointer-events-none bn:-mx-1 bn:my-1 bn:h-px",
-        className,
-      )}
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
       {...props}
     />
   );
@@ -145,12 +139,12 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn(
-        "bn:flex bn:cursor-default bn:items-center bn:justify-center bn:py-1",
+        "flex cursor-default items-center justify-center py-1",
         className,
       )}
       {...props}
     >
-      <ChevronUpIcon className="bn:size-4" />
+      <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
   );
 }
@@ -163,12 +157,12 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn(
-        "bn:flex bn:cursor-default bn:items-center bn:justify-center bn:py-1",
+        "flex cursor-default items-center justify-center py-1",
         className,
       )}
       {...props}
     >
-      <ChevronDownIcon className="bn:size-4" />
+      <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
   );
 }
diff --git a/packages/shadcn/src/components/ui/skeleton.tsx b/packages/shadcn/src/components/ui/skeleton.tsx
index 96468503dd..f0d550c365 100644
--- a/packages/shadcn/src/components/ui/skeleton.tsx
+++ b/packages/shadcn/src/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bn:bg-accent bn:animate-pulse bn:rounded-md", className)}
+      className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/packages/shadcn/src/components/ui/tabs.tsx b/packages/shadcn/src/components/ui/tabs.tsx
index 9846cee57e..21dce6cc6e 100644
--- a/packages/shadcn/src/components/ui/tabs.tsx
+++ b/packages/shadcn/src/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 function Tabs({
   className,
@@ -12,10 +12,10 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("bn:flex bn:flex-col bn:gap-2", className)}
+      className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsList({
@@ -26,12 +26,12 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bn:bg-muted bn:text-muted-foreground bn:inline-flex bn:h-9 bn:w-fit bn:items-center bn:justify-center bn:rounded-lg bn:p-[3px]",
-        className
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({
@@ -42,12 +42,12 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "bn:data-[state=active]:bg-background bn:dark:data-[state=active]:text-foreground bn:focus-visible:border-ring bn:focus-visible:ring-ring/50 bn:focus-visible:outline-ring bn:dark:data-[state=active]:border-input bn:dark:data-[state=active]:bg-input/30 bn:text-foreground bn:dark:text-muted-foreground bn:inline-flex bn:h-[calc(100%-1px)] bn:flex-1 bn:items-center bn:justify-center bn:gap-1.5 bn:rounded-md bn:border bn:border-transparent bn:px-2 bn:py-1 bn:text-sm bn:font-medium bn:whitespace-nowrap bn:transition-[color,box-shadow] bn:focus-visible:ring-[3px] bn:focus-visible:outline-1 bn:disabled:pointer-events-none bn:disabled:opacity-50 bn:data-[state=active]:shadow-sm bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
-        className
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({
@@ -57,10 +57,10 @@ function TabsContent({
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn("bn:flex-1 bn:outline-none", className)}
+      className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/packages/shadcn/src/components/ui/toggle.tsx b/packages/shadcn/src/components/ui/toggle.tsx
index bd110b7a08..6b66928550 100644
--- a/packages/shadcn/src/components/ui/toggle.tsx
+++ b/packages/shadcn/src/components/ui/toggle.tsx
@@ -1,30 +1,30 @@
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 const toggleVariants = cva(
-  "bn:inline-flex bn:items-center bn:justify-center bn:gap-2 bn:rounded-md bn:text-sm bn:font-medium bn:hover:bg-muted bn:hover:text-muted-foreground bn:disabled:pointer-events-none bn:disabled:opacity-50 bn:data-[state=on]:bg-accent bn:data-[state=on]:text-accent-foreground bn:[&_svg]:pointer-events-none bn:[&_svg:not([class*=size-])]:size-4 bn:[&_svg]:shrink-0 bn:focus-visible:border-ring bn:focus-visible:ring-ring/50 bn:focus-visible:ring-[3px] bn:outline-none bn:transition-[color,box-shadow] bn:aria-invalid:ring-destructive/20 bn:dark:aria-invalid:ring-destructive/40 bn:aria-invalid:border-destructive bn:whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
-        default: "bn:bg-transparent",
+        default: "bg-transparent",
         outline:
-          "bn:border bn:border-input bn:bg-transparent bn:shadow-xs bn:hover:bg-accent bn:hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "bn:h-9 bn:px-2 bn:min-w-9",
-        sm: "bn:h-8 bn:px-1.5 bn:min-w-8",
-        lg: "bn:h-10 bn:px-2.5 bn:min-w-10",
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Toggle({
   className,
@@ -39,7 +39,7 @@ function Toggle({
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/packages/shadcn/src/components/ui/tooltip.tsx b/packages/shadcn/src/components/ui/tooltip.tsx
index 279c38b83a..0a99b9a184 100644
--- a/packages/shadcn/src/components/ui/tooltip.tsx
+++ b/packages/shadcn/src/components/ui/tooltip.tsx
@@ -43,13 +43,13 @@ function TooltipContent({
       data-slot="tooltip-content"
       sideOffset={sideOffset}
       className={cn(
-        "bn:bg-primary bn:text-primary-foreground bn:animate-in bn:fade-in-0 bn:zoom-in-95 bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=closed]:zoom-out-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:z-50 bn:w-fit bn:origin-(--radix-tooltip-content-transform-origin) bn:rounded-md bn:px-3 bn:py-1.5 bn:text-xs bn:text-balance",
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
         className,
       )}
       {...props}
     >
       {children}
-      <TooltipPrimitive.Arrow className="bn:bg-primary bn:fill-primary bn:z-50 bn:size-2.5 bn:translate-y-[calc(-50%_-_2px)] bn:rotate-45 bn:rounded-[2px]" />
+      <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
     </TooltipPrimitive.Content>
   );
 }
diff --git a/packages/shadcn/src/form/TextInput.tsx b/packages/shadcn/src/form/TextInput.tsx
index 869a6ff056..29b63cfb4c 100644
--- a/packages/shadcn/src/form/TextInput.tsx
+++ b/packages/shadcn/src/form/TextInput.tsx
@@ -35,19 +35,19 @@ export const TextInput = forwardRef<
     <div
       className={cn(
         className,
-        "bn:flex bn:h-10 bn:w-full bn:rounded-md bn:border bn:border-input bn:bg-background bn:px-3 bn:py-2 bn:text-sm bn:ring-offset-background file:bn:border-0 file:bn:bg-transparent file:bn:text-sm file:bn:font-medium placeholder:bn:text-muted-foreground focus-visible:bn:outline-none focus-visible:bn:ring-2 focus-visible:bn:ring-ring focus-visible:bn:ring-offset-2 disabled:bn:cursor-not-allowed disabled:bn:opacity-50",
-        "bn:items-center bn:gap-2 bn:text-foreground",
+        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "text-foreground items-center gap-2",
       )}
     >
       {icon}
-      <div className="bn:flex-1">
+      <div className="flex-1">
         {label && (
           <ShadCNComponents.Label.Label htmlFor={label}>
             {label}
           </ShadCNComponents.Label.Label>
         )}
         <ShadCNComponents.Input.Input
-          className={cn(className, "bn:border-none bn:p-0 bn:h-auto")}
+          className={cn(className, "h-auto border-none p-0")}
           id={label}
           name={name}
           autoFocus={autoFocus}
diff --git a/packages/shadcn/src/menu/Button.tsx b/packages/shadcn/src/menu/Button.tsx
index 06501f8d67..7cb91c4f87 100644
--- a/packages/shadcn/src/menu/Button.tsx
+++ b/packages/shadcn/src/menu/Button.tsx
@@ -30,7 +30,7 @@ export const MenuButton = forwardRef<
   return (
     <ShadCNComponents.Button.Button
       variant={"ghost"}
-      className={cn(className, "bn:text-gray-400")}
+      className={cn(className, "text-gray-400")}
       ref={ref}
       aria-label={label}
       onClick={onClick}
diff --git a/packages/shadcn/src/menu/Menu.tsx b/packages/shadcn/src/menu/Menu.tsx
index e9e6ef4457..1c87e383c7 100644
--- a/packages/shadcn/src/menu/Menu.tsx
+++ b/packages/shadcn/src/menu/Menu.tsx
@@ -153,7 +153,7 @@ export const MenuItem = forwardRef<
   if (checked !== undefined) {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem
-        className={cn(className, "bn:gap-1", checked ? "" : "bn:px-2")}
+        className={cn(className, "gap-1", checked ? "" : "px-2")}
         ref={ref}
         checked={checked}
         onClick={onClick}
@@ -174,7 +174,7 @@ export const MenuItem = forwardRef<
     >
       {icon}
       {children}
-      {subTrigger && <ChevronRight className="bn:ml-auto bn:h-4 bn:w-4" />}
+      {subTrigger && <ChevronRight className="ml-auto h-4 w-4" />}
     </ShadCNComponents.DropdownMenu.DropdownMenuItem>
   );
 });
diff --git a/packages/shadcn/src/panel/Panel.tsx b/packages/shadcn/src/panel/Panel.tsx
index 407b46b399..298a38f9fd 100644
--- a/packages/shadcn/src/panel/Panel.tsx
+++ b/packages/shadcn/src/panel/Panel.tsx
@@ -25,7 +25,7 @@ export const Panel = forwardRef<
 
   return (
     <ShadCNComponents.Tabs.Tabs
-      className={cn(className, "bn:bg-popover bn:p-2 bn:rounded-lg")}
+      className={cn(className, "bg-popover rounded-lg p-2")}
       ref={ref}
       value={openTab}
       defaultValue={defaultOpenTab}
@@ -44,7 +44,7 @@ export const Panel = forwardRef<
       {tabs.map((tab) => (
         <ShadCNComponents.Tabs.TabsContent value={tab.name} key={tab.name}>
           <ShadCNComponents.Card.Card>
-            <ShadCNComponents.Card.CardContent className={"bn:p-4"}>
+            <ShadCNComponents.Card.CardContent className={"p-4"}>
               {tab.tabPanel}
             </ShadCNComponents.Card.CardContent>
           </ShadCNComponents.Card.Card>
diff --git a/packages/shadcn/src/panel/PanelTab.tsx b/packages/shadcn/src/panel/PanelTab.tsx
index 2297c614ad..1b60cd4e4e 100644
--- a/packages/shadcn/src/panel/PanelTab.tsx
+++ b/packages/shadcn/src/panel/PanelTab.tsx
@@ -16,7 +16,7 @@ export const PanelTab = forwardRef<
     <div
       className={cn(
         className,
-        "bn:flex bn:flex-col bn:gap-2 bn:items-start bn:justify-center",
+        "flex flex-col items-start justify-center gap-2",
       )}
       ref={ref}
     >
diff --git a/packages/shadcn/src/panel/PanelTextInput.tsx b/packages/shadcn/src/panel/PanelTextInput.tsx
index 59f47e68e7..3a25cb3f66 100644
--- a/packages/shadcn/src/panel/PanelTextInput.tsx
+++ b/packages/shadcn/src/panel/PanelTextInput.tsx
@@ -18,7 +18,7 @@ export const PanelTextInput = forwardRef<
   return (
     <ShadCNComponents.Input.Input
       data-test={"embed-input"}
-      className={cn(className, "bn:w-80")}
+      className={cn(className, "w-80")}
       ref={ref}
       value={value}
       placeholder={placeholder}
diff --git a/packages/shadcn/src/popover/popover.tsx b/packages/shadcn/src/popover/popover.tsx
index d04f3511d0..ac14b34f13 100644
--- a/packages/shadcn/src/popover/popover.tsx
+++ b/packages/shadcn/src/popover/popover.tsx
@@ -57,9 +57,9 @@ export const PopoverContent = forwardRef<
       sideOffset={8}
       className={cn(
         className,
-        "bn:flex bn:flex-col bn:gap-2",
+        "flex flex-col gap-2",
         variant === "panel-popover"
-          ? "bn:p-0 bn:border-none bn:shadow-none bn:max-w-none bn:w-fit"
+          ? "w-fit max-w-none border-none p-0 shadow-none"
           : "",
       )}
       ref={ref}
diff --git a/packages/shadcn/src/sideMenu/SideMenuButton.tsx b/packages/shadcn/src/sideMenu/SideMenuButton.tsx
index b0aac5c796..b433111e50 100644
--- a/packages/shadcn/src/sideMenu/SideMenuButton.tsx
+++ b/packages/shadcn/src/sideMenu/SideMenuButton.tsx
@@ -30,7 +30,7 @@ export const SideMenuButton = forwardRef<
   return (
     <ShadCNComponents.Button.Button
       variant={"ghost"}
-      className={cn(className, "bn:text-gray-400")}
+      className={cn(className, "text-gray-400")}
       ref={ref}
       aria-label={label}
       onClick={onClick}
diff --git a/packages/shadcn/src/style.css b/packages/shadcn/src/style.css
index 49c565ea2d..614a503ad6 100644
--- a/packages/shadcn/src/style.css
+++ b/packages/shadcn/src/style.css
@@ -2,8 +2,6 @@
 @import "tw-animate-css";
 @import "@blocknote/react/style.css";
 
-@config "../tailwind.config.js";
-
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -118,10 +116,10 @@
 
 @layer base {
   * {
-    @apply bn:border-border bn:outline-ring/50;
+    @apply border-border outline-ring/50;
   }
   body {
-    @apply bn:bg-background bn:text-foreground;
+    @apply bg-background text-foreground;
   }
 }
 
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx
index ed5260aeda..3802d88019 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenu.tsx
@@ -18,7 +18,7 @@ export const SuggestionMenu = forwardRef<
       role="listbox"
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
-        "bn:bg-popover bn:text-popover-foreground bn:data-[state=open]:animate-in bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=open]:fade-in-0 bn:data-[state=closed]:zoom-out-95 bn:data-[state=open]:zoom-in-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:z-50 bn:max-h-(--radix-dropdown-menu-content-available-height) bn:min-w-[8rem] bn:origin-(--radix-dropdown-menu-content-transform-origin) bn:overflow-x-hidden bn:overflow-y-auto bn:rounded-md bn:border bn:p-1 bn:shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
         className,
       )}
       ref={ref}
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
index 8ae5b203ea..a217539788 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuEmptyItem.tsx
@@ -16,9 +16,9 @@ export const SuggestionMenuEmptyItem = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:data-[variant=destructive]:text-destructive bn:data-[variant=destructive]:focus:bg-destructive/10 bn:dark:data-[variant=destructive]:focus:bg-destructive/20 bn:data-[variant=destructive]:focus:text-destructive bn:data-[variant=destructive]:*:[svg]:!text-destructive bn:[&_svg:not([class*=text-])]:text-muted-foreground bn:relative bn:flex bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:px-2 bn:py-1.5 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:data-[inset]:pl-8 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
-        "bn:hover:bg-accent bn:hover:text-accent-foreground bn:data-[variant=destructive]:hover:bg-destructive/10 bn:dark:data-[variant=destructive]:hover:bg-destructive/20 bn:data-[variant=destructive]:hover:text-destructive",
-        "bn:aria-selected:bg-accent bn:aria-selected:text-accent-foreground bn:data-[variant=destructive]:aria-selected:bg-destructive/10 bn:dark:data-[variant=destructive]:aria-selected:bg-destructive/20 bn:data-[variant=destructive]:aria-selected:text-destructive",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
+        "aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
         className,
       )}
       ref={ref}
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx
index 8bbbd37004..025064596a 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuItem.tsx
@@ -37,10 +37,10 @@ export const SuggestionMenuItem = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:data-[variant=destructive]:text-destructive bn:data-[variant=destructive]:focus:bg-destructive/10 bn:dark:data-[variant=destructive]:focus:bg-destructive/20 bn:data-[variant=destructive]:focus:text-destructive bn:data-[variant=destructive]:*:[svg]:!text-destructive bn:[&_svg:not([class*=text-])]:text-muted-foreground bn:relative bn:flex bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:px-2 bn:py-1.5 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:data-[inset]:pl-8 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
-        "bn:hover:bg-accent bn:hover:text-accent-foreground bn:data-[variant=destructive]:hover:bg-destructive/10 bn:dark:data-[variant=destructive]:hover:bg-destructive/20 bn:data-[variant=destructive]:hover:text-destructive",
-        "bn:aria-selected:bg-accent bn:aria-selected:text-accent-foreground bn:data-[variant=destructive]:aria-selected:bg-destructive/10 bn:dark:data-[variant=destructive]:aria-selected:bg-destructive/20 bn:data-[variant=destructive]:aria-selected:text-destructive",
-        props.item.size === "small" ? "bn:gap-3 bn:py-1" : "",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
+        "aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
+        props.item.size === "small" ? "gap-3 py-1" : "",
         className,
       )}
       data-highlighted
@@ -54,8 +54,8 @@ export const SuggestionMenuItem = forwardRef<
       {item.icon && (
         <div
           className={cn(
-            "bn:p-3",
-            props.item.size === "small" ? "bn:p-0" : "",
+            "p-3",
+            props.item.size === "small" ? "p-0" : "",
             className,
           )}
           data-position="left"
@@ -63,11 +63,11 @@ export const SuggestionMenuItem = forwardRef<
           {item.icon}
         </div>
       )}
-      <div className="bn:flex-1">
+      <div className="flex-1">
         <div
           className={cn(
-            "bn:text-base",
-            props.item.size === "small" ? "bn:text-sm" : "",
+            "text-base",
+            props.item.size === "small" ? "text-sm" : "",
             className,
           )}
         >
@@ -75,8 +75,8 @@ export const SuggestionMenuItem = forwardRef<
         </div>
         <div
           className={cn(
-            "bn:text-xs",
-            props.item.size === "small" ? "bn:hidden" : "",
+            "text-xs",
+            props.item.size === "small" ? "hidden" : "",
             className,
           )}
         >
@@ -84,7 +84,7 @@ export const SuggestionMenuItem = forwardRef<
         </div>
       </div>
       {item.badge && (
-        <div data-position="right" className="bn:text-xs">
+        <div data-position="right" className="text-xs">
           <ShadCNComponents.Badge.Badge variant={"secondary"}>
             {item.badge}
           </ShadCNComponents.Badge.Badge>
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx
index 0901e3cd79..b1f9888795 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuLabel.tsx
@@ -16,7 +16,7 @@ export const SuggestionMenuLabel = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuLabel component
       className={cn(
-        "bn:px-2 bn:py-1.5 bn:text-sm bn:font-medium bn:data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
         className,
       )}
       ref={ref}
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
index 5188b3a7bd..1c189b3e5f 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
@@ -13,7 +13,7 @@ export const SuggestionMenuLoader = forwardRef<
   assertEmpty(rest);
 
   return (
-    <div className={cn(className, "bn:animate-spin")} ref={ref}>
+    <div className={cn(className, "animate-spin")} ref={ref}>
       {/* Taken from Google Material Icons */}
       {/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:progress_activity:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=load&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */}
       <svg
@@ -21,7 +21,8 @@ export const SuggestionMenuLoader = forwardRef<
         height="1em"
         viewBox="0 -960 960 960"
         width="1em"
-        fill="#e8eaed">
+        fill="#e8eaed"
+      >
         <path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z" />
       </svg>
     </div>
diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
index 83c2df27f2..1efeff3076 100644
--- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
+++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
@@ -16,8 +16,8 @@ export const GridSuggestionMenu = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
-        "bn:bg-popover bn:text-popover-foreground bn:data-[state=open]:animate-in bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=open]:fade-in-0 bn:data-[state=closed]:zoom-out-95 bn:data-[state=open]:zoom-in-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:z-50 bn:max-h-(--radix-dropdown-menu-content-available-height) bn:min-w-[8rem] bn:origin-(--radix-dropdown-menu-content-transform-origin) bn:overflow-x-hidden bn:overflow-y-auto bn:rounded-md bn:border bn:p-1 bn:shadow-md",
-        "bn:grid",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
+        "grid",
         className,
       )}
       style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` } as any}
diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx
index 39c519aa55..aa01b44944 100644
--- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx
+++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx
@@ -35,10 +35,10 @@ export const GridSuggestionMenuItem = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
-        "bn:focus:bg-accent bn:focus:text-accent-foreground bn:data-[variant=destructive]:text-destructive bn:data-[variant=destructive]:focus:bg-destructive/10 bn:dark:data-[variant=destructive]:focus:bg-destructive/20 bn:data-[variant=destructive]:focus:text-destructive bn:data-[variant=destructive]:*:[svg]:!text-destructive bn:[&_svg:not([class*=text-])]:text-muted-foreground bn:relative bn:flex bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:px-2 bn:py-1.5 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:data-[inset]:pl-8 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4",
-        "bn:hover:bg-accent bn:hover:text-accent-foreground bn:data-[variant=destructive]:hover:bg-destructive/10 bn:dark:data-[variant=destructive]:hover:bg-destructive/20 bn:data-[variant=destructive]:hover:text-destructive",
-        "bn:aria-selected:bg-accent bn:aria-selected:text-accent-foreground bn:data-[variant=destructive]:aria-selected:bg-destructive/10 bn:dark:data-[variant=destructive]:aria-selected:bg-destructive/20 bn:data-[variant=destructive]:aria-selected:text-destructive",
-        "bn:text-lg!",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
+        "aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
+        "text-lg!",
         className,
       )}
       ref={mergeRefs([ref, itemRef])}
diff --git a/packages/shadcn/src/tableHandle/ExtendButton.tsx b/packages/shadcn/src/tableHandle/ExtendButton.tsx
index 95a04ba828..493e6da0f5 100644
--- a/packages/shadcn/src/tableHandle/ExtendButton.tsx
+++ b/packages/shadcn/src/tableHandle/ExtendButton.tsx
@@ -22,12 +22,12 @@ export const ExtendButton = forwardRef<
       variant={"ghost"}
       className={cn(
         className,
-        "bn:p-0 bn:h-full bn:w-full bn:text-gray-400",
-        className?.includes("bn:extend-button-add-remove-columns")
-          ? "bn:ml-1"
-          : "bn:mt-1",
-        className?.includes("bn:extend-button-editing")
-          ? "bn:bg-accent bn:text-accent-foreground"
+        "h-full w-full p-0 text-gray-400",
+        className?.includes("extend-button-add-remove-columns")
+          ? "ml-1"
+          : "mt-1",
+        className?.includes("extend-button-editing")
+          ? "bg-accent text-accent-foreground"
           : "",
       )}
       ref={ref}
diff --git a/packages/shadcn/src/tableHandle/TableHandle.tsx b/packages/shadcn/src/tableHandle/TableHandle.tsx
index 2847a01d97..39da860fca 100644
--- a/packages/shadcn/src/tableHandle/TableHandle.tsx
+++ b/packages/shadcn/src/tableHandle/TableHandle.tsx
@@ -29,7 +29,7 @@ export const TableHandle = forwardRef<
   return (
     <ShadCNComponents.Button.Button
       variant={"ghost"}
-      className={cn(className, "bn:p-0 bn:h-fit bn:w-fit bn:text-gray-400")}
+      className={cn(className, "h-fit w-fit p-0 text-gray-400")}
       ref={ref}
       aria-label={label}
       draggable={draggable}
diff --git a/packages/shadcn/src/toolbar/Toolbar.tsx b/packages/shadcn/src/toolbar/Toolbar.tsx
index 879111bd75..5ea063892e 100644
--- a/packages/shadcn/src/toolbar/Toolbar.tsx
+++ b/packages/shadcn/src/toolbar/Toolbar.tsx
@@ -27,8 +27,8 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
         <div
           className={cn(
             className,
-            "bn:flex bn:gap-1 bn:p-1 bn:bg-popover bn:text-popover-foreground bn:border bn:rounded-lg bn:shadow-md bn:h-fit",
-            variant === "action-toolbar" ? "bn:w-fit" : "",
+            "bg-popover text-popover-foreground flex h-fit gap-1 rounded-lg border p-1 shadow-md",
+            variant === "action-toolbar" ? "w-fit" : "",
           )}
           ref={ref}
           onMouseEnter={onMouseEnter}
@@ -70,7 +70,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         <ShadCNComponents.Button.Button
           className={cn(
             className,
-            variant === "compact" ? "bn:h-6 bn:min-w-6 bn:p-0" : "",
+            variant === "compact" ? "h-6 min-w-6 p-0" : "",
           )}
           variant="ghost"
           size={variant === "compact" ? "sm" : "default"}
@@ -88,7 +88,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           className={cn(
             className,
             "data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground",
-            variant === "compact" ? "bn:h-6 bn:min-w-6 bn:p-0" : "",
+            variant === "compact" ? "h-6 min-w-6 p-0" : "",
           )}
           size={variant === "compact" ? "sm" : "default"}
           aria-label={label}
@@ -111,9 +111,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           {trigger}
         </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>}
@@ -135,7 +133,7 @@ export const ToolbarSelect = forwardRef<
 
   // TODO?
   const SelectItemContent = (props: any) => (
-    <div className={"bn:flex bn:gap-1 bn:items-center"}>
+    <div className={"flex items-center gap-1"}>
       {props.icon}
       {props.text}
     </div>
@@ -155,7 +153,7 @@ export const ToolbarSelect = forwardRef<
       }
       disabled={isDisabled}
     >
-      <ShadCNComponents.Select.SelectTrigger className={"bn:border-none"}>
+      <ShadCNComponents.Select.SelectTrigger className={"border-none"}>
         <ShadCNComponents.Select.SelectValue />
       </ShadCNComponents.Select.SelectTrigger>
       <ShadCNComponents.Select.SelectContent className={className} ref={ref}>
diff --git a/packages/shadcn/tailwind.config.js b/packages/shadcn/tailwind.config.js
deleted file mode 100644
index dc99fecea3..0000000000
--- a/packages/shadcn/tailwind.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-const dir = __dirname + "/src";
-module.exports = {
-  content: [dir + "/**/*.{ts,tsx}"],
-  prefix: "bn",
-};
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
index 88276b9d12..fbd2749bb1 100644
--- a/playground/src/main.tsx
+++ b/playground/src/main.tsx
@@ -84,7 +84,7 @@ function Root() {
           </AppShell.Navbar>
         )}
         <AppShell.Main>
-          <div className="bg-sky-400">
+          <div>
             <Outlet />
           </div>
         </AppShell.Main>
diff --git a/playground/src/style.css b/playground/src/style.css
index f6001c9206..e6c83d6d15 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -1,4 +1,46 @@
 @import url("@mantine/core/styles.css");
+@import "tailwindcss";
+@source "../../packages/shadcn/src";
+/* @import "tw-animate-css"; */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
 
 body {
   height: auto;

From f806aed8cd4711f30ee7267c3d3d49142f01b921 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 26 Aug 2025 17:00:17 +0200
Subject: [PATCH 2/7] Removed Tailwind dependency from ShadCN package

---
 packages/shadcn/package.json     |   2 -
 packages/shadcn/src/lib/utils.ts |  10 +--
 packages/shadcn/src/style.css    | 123 -------------------------------
 playground/components.json       |  21 ++++++
 playground/package.json          |   8 +-
 playground/src/lib/utils.ts      |   6 ++
 playground/src/style.css         |  85 ++++++++++++++++++++-
 playground/tsconfig.json         |   6 +-
 pnpm-lock.yaml                   |  39 +++++-----
 9 files changed, 141 insertions(+), 159 deletions(-)
 create mode 100644 playground/components.json
 create mode 100644 playground/src/lib/utils.ts

diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json
index fa99fe698f..6373f8317e 100644
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -74,8 +74,6 @@
     "lucide-react": "^0.525.0",
     "react-hook-form": "^7.54.2",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^4.1.12",
-    "tw-animate-css": "^1.3.7",
     "zod": "^3.24.2"
   },
   "devDependencies": {
diff --git a/packages/shadcn/src/lib/utils.ts b/packages/shadcn/src/lib/utils.ts
index 27b2ed0c63..a5ef193506 100644
--- a/packages/shadcn/src/lib/utils.ts
+++ b/packages/shadcn/src/lib/utils.ts
@@ -1,11 +1,5 @@
-import { type ClassValue, clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-
-// Ensures that `bn-` prefixed Tailwind classes are recognized as Tailwind
-// classes, so they can be merged correctly.
-const twMerge = extendTailwindMerge({
-  prefix: "bn-",
-});
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
diff --git a/packages/shadcn/src/style.css b/packages/shadcn/src/style.css
index 614a503ad6..651e63f52c 100644
--- a/packages/shadcn/src/style.css
+++ b/packages/shadcn/src/style.css
@@ -1,128 +1,5 @@
-@import "tailwindcss";
-@import "tw-animate-css";
 @import "@blocknote/react/style.css";
 
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
 .bn-shadcn svg:not([class*="size-"]) {
   width: revert;
   height: revert;
diff --git a/playground/components.json b/playground/components.json
new file mode 100644
index 0000000000..8f043e61a3
--- /dev/null
+++ b/playground/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/playground/package.json b/playground/package.json
index caadbd5487..7b029c3869 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -55,11 +55,17 @@
     "@uppy/xhr-upload": "^3.4.0",
     "@y-sweet/react": "^0.6.3",
     "ai": "^4.3.15",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "docx": "^9.0.2",
+    "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.20.0",
+    "tailwindcss": "^4.1.12",
+    "tailwind-merge": "^2.6.0",
+    "tw-animate-css": "^1.3.7",
     "y-partykit": "^0.0.25",
     "yjs": "^13.6.27",
     "zustand": "^5.0.3"
@@ -72,8 +78,6 @@
     "eslint": "^8.10.0",
     "rimraf": "^5.0.5",
     "rollup-plugin-webpack-stats": "^0.2.2",
-    "tailwindcss": "^4.1.12",
-    "tailwindcss-animate": "^1.0.7",
     "vite": "^6",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-inspect": "11.1.0"
diff --git a/playground/src/lib/utils.ts b/playground/src/lib/utils.ts
new file mode 100644
index 0000000000..bd0c391ddd
--- /dev/null
+++ b/playground/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/playground/src/style.css b/playground/src/style.css
index e6c83d6d15..e1f2001a9a 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -1,7 +1,88 @@
 @import url("@mantine/core/styles.css");
 @import "tailwindcss";
-@source "../../packages/shadcn/src";
-/* @import "tw-animate-css"; */
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@source "../../packages/shadcn";
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
 
 @theme inline {
   --color-background: var(--background);
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
index 5e675e4f64..eb35bcd48d 100644
--- a/playground/tsconfig.json
+++ b/playground/tsconfig.json
@@ -16,7 +16,11 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "composite": true,
-    "rootDir": ".."
+    "rootDir": "..",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src", "../examples", "./vite.config.ts"],
   "references": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54408d50fa..a4a1e21939 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3991,12 +3991,6 @@ importers:
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.6.0
-      tailwindcss:
-        specifier: ^4.1.12
-        version: 4.1.12
-      tw-animate-css:
-        specifier: ^1.3.7
-        version: 1.3.7
       zod:
         specifier: ^3.24.2
         version: 3.24.2
@@ -4677,9 +4671,18 @@ importers:
       ai:
         specifier: ^4.3.15
         version: 4.3.15(react@19.1.0)(zod@3.25.76)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       docx:
         specifier: ^9.0.2
         version: 9.3.0
+      lucide-react:
+        specifier: ^0.525.0
+        version: 0.525.0(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -4692,6 +4695,15 @@ importers:
       react-router-dom:
         specifier: ^6.20.0
         version: 6.30.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      tailwind-merge:
+        specifier: ^2.6.0
+        version: 2.6.0
+      tailwindcss:
+        specifier: ^4.1.12
+        version: 4.1.12
+      tw-animate-css:
+        specifier: ^1.3.7
+        version: 1.3.7
       y-partykit:
         specifier: ^0.0.25
         version: 0.0.25
@@ -4723,12 +4735,6 @@ importers:
       rollup-plugin-webpack-stats:
         specifier: ^0.2.2
         version: 0.2.6(rollup@4.37.0)
-      tailwindcss:
-        specifier: ^4.1.12
-        version: 4.1.12
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.1.12)
       vite:
         specifier: ^6
         version: 6.3.5(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1)(tsx@4.19.3)(yaml@2.7.0)
@@ -14327,11 +14333,6 @@ packages:
   tailwind-merge@3.3.1:
     resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
   tailwindcss@4.1.11:
     resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
 
@@ -26746,10 +26747,6 @@ snapshots:
 
   tailwind-merge@3.3.1: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@4.1.12):
-    dependencies:
-      tailwindcss: 4.1.12
-
   tailwindcss@4.1.11: {}
 
   tailwindcss@4.1.12: {}

From c54308579e40b77d6e32d03494b748674fa8221b Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 26 Aug 2025 17:28:04 +0200
Subject: [PATCH 3/7] Removed unneeded ShadCN things from playground

---
 playground/components.json  | 21 ---------------------
 playground/package.json     |  3 ---
 playground/src/lib/utils.ts |  6 ------
 playground/src/style.css    |  4 ++--
 playground/tsconfig.json    |  6 +-----
 pnpm-lock.yaml              |  9 ---------
 6 files changed, 3 insertions(+), 46 deletions(-)
 delete mode 100644 playground/components.json
 delete mode 100644 playground/src/lib/utils.ts

diff --git a/playground/components.json b/playground/components.json
deleted file mode 100644
index 8f043e61a3..0000000000
--- a/playground/components.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/style.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}
\ No newline at end of file
diff --git a/playground/package.json b/playground/package.json
index 7b029c3869..11b41ce3ed 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -55,10 +55,7 @@
     "@uppy/xhr-upload": "^3.4.0",
     "@y-sweet/react": "^0.6.3",
     "ai": "^4.3.15",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "docx": "^9.0.2",
-    "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.2.1",
diff --git a/playground/src/lib/utils.ts b/playground/src/lib/utils.ts
deleted file mode 100644
index bd0c391ddd..0000000000
--- a/playground/src/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
diff --git a/playground/src/style.css b/playground/src/style.css
index e1f2001a9a..9952f8bce0 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -2,10 +2,10 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
 @source "../../packages/shadcn";
 
+@custom-variant dark (&:is(.dark *));
+
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
index eb35bcd48d..5e675e4f64 100644
--- a/playground/tsconfig.json
+++ b/playground/tsconfig.json
@@ -16,11 +16,7 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "composite": true,
-    "rootDir": "..",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "rootDir": ".."
   },
   "include": ["src", "../examples", "./vite.config.ts"],
   "references": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4a1e21939..a6c706a011 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4671,18 +4671,9 @@ importers:
       ai:
         specifier: ^4.3.15
         version: 4.3.15(react@19.1.0)(zod@3.25.76)
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
       docx:
         specifier: ^9.0.2
         version: 9.3.0
-      lucide-react:
-        specifier: ^0.525.0
-        version: 0.525.0(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0

From c629d6237b9f319b62cffa7bbfb89a730764a6c8 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 26 Aug 2025 17:36:57 +0200
Subject: [PATCH 4/7] Removed `tailwind-merge` dep from playground

---
 playground/package.json | 1 -
 pnpm-lock.yaml          | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/playground/package.json b/playground/package.json
index 11b41ce3ed..13e722b6dc 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -61,7 +61,6 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.20.0",
     "tailwindcss": "^4.1.12",
-    "tailwind-merge": "^2.6.0",
     "tw-animate-css": "^1.3.7",
     "y-partykit": "^0.0.25",
     "yjs": "^13.6.27",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6c706a011..9f709b5c3f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4686,9 +4686,6 @@ importers:
       react-router-dom:
         specifier: ^6.20.0
         version: 6.30.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      tailwind-merge:
-        specifier: ^2.6.0
-        version: 2.6.0
       tailwindcss:
         specifier: ^4.1.12
         version: 4.1.12

From 9058db0b8a74db8bd02a0abc1c44eaa04797e6f9 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Wed, 27 Aug 2025 12:20:00 +0200
Subject: [PATCH 5/7] Moved tailwind import & shadcn theme from playground to
 example

---
 docs/package.json                           |   3 +-
 examples/01-basic/09-shadcn/.bnexample.json |   6 +-
 examples/01-basic/09-shadcn/package.json    |   4 +-
 examples/01-basic/09-shadcn/src/App.tsx     |   2 +
 examples/01-basic/09-shadcn/src/style.css   | 123 ++++++++++++++++++++
 packages/shadcn/package.json                |   4 +-
 packages/shadcn/vite.config.ts              |   3 +-
 playground/package.json                     |   2 -
 playground/src/examples.gen.tsx             |  10 +-
 playground/src/style.css                    | 123 --------------------
 pnpm-lock.yaml                              |  54 ++++-----
 11 files changed, 169 insertions(+), 165 deletions(-)
 create mode 100644 examples/01-basic/09-shadcn/src/style.css

diff --git a/docs/package.json b/docs/package.json
index 76ae06de20..0abe44529b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -134,7 +134,8 @@
     "postcss": "^8.5.6",
     "react-email": "^4.0.16",
     "react-icons": "^5.5.0",
-    "tailwindcss": "^4.1.10",
+    "tailwindcss": "^4.1.12",
+    "tw-animate-css": "^1.3.7",
     "typescript": "^5.8.3",
     "y-partykit": "^0.0.33",
     "yjs": "^13.6.27"
diff --git a/examples/01-basic/09-shadcn/.bnexample.json b/examples/01-basic/09-shadcn/.bnexample.json
index 6d4a02dd52..3be8f1abba 100644
--- a/examples/01-basic/09-shadcn/.bnexample.json
+++ b/examples/01-basic/09-shadcn/.bnexample.json
@@ -2,5 +2,9 @@
   "playground": true,
   "docs": true,
   "author": "matthewlipski",
-  "tags": ["Basic"]
+  "tags": ["Basic"],
+  "dependencies": {
+    "tailwindcss": "^4.1.12",
+    "tw-animate-css": "^1.3.7"
+  }
 }
diff --git a/examples/01-basic/09-shadcn/package.json b/examples/01-basic/09-shadcn/package.json
index 99fc5808ce..2e26c10e1f 100644
--- a/examples/01-basic/09-shadcn/package.json
+++ b/examples/01-basic/09-shadcn/package.json
@@ -16,7 +16,9 @@
     "@blocknote/mantine": "latest",
     "@blocknote/shadcn": "latest",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.12",
+    "tw-animate-css": "^1.3.7"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
diff --git a/examples/01-basic/09-shadcn/src/App.tsx b/examples/01-basic/09-shadcn/src/App.tsx
index 754b4a5e94..bb645397e3 100644
--- a/examples/01-basic/09-shadcn/src/App.tsx
+++ b/examples/01-basic/09-shadcn/src/App.tsx
@@ -3,6 +3,8 @@ import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/shadcn";
 import "@blocknote/shadcn/style.css";
 
+import "./style.css";
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote();
diff --git a/examples/01-basic/09-shadcn/src/style.css b/examples/01-basic/09-shadcn/src/style.css
new file mode 100644
index 0000000000..7a5aa46317
--- /dev/null
+++ b/examples/01-basic/09-shadcn/src/style.css
@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../node_modules/@blocknote/shadcn";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json
index 6373f8317e..20bfdf3657 100644
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -78,7 +78,6 @@
   },
   "devDependencies": {
     "@radix-ui/colors": "^3.0.0",
-    "@tailwindcss/vite": "^4.1.12",
     "@types/node": "^20.12.7",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
@@ -95,7 +94,8 @@
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || >= 19.0.0-rc",
-    "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc"
+    "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc",
+    "tailwindcss": "^4.1.12"
   },
   "eslintConfig": {
     "extends": [
diff --git a/packages/shadcn/vite.config.ts b/packages/shadcn/vite.config.ts
index 205d11ed37..4c5387ee42 100644
--- a/packages/shadcn/vite.config.ts
+++ b/packages/shadcn/vite.config.ts
@@ -3,7 +3,6 @@ import * as path from "path";
 import { webpackStats } from "rollup-plugin-webpack-stats";
 import { defineConfig } from "vite";
 import pkg from "./package.json";
-import tailwindcss from "@tailwindcss/vite";
 // import eslintPlugin from "vite-plugin-eslint";
 
 // https://vitejs.dev/config/
@@ -12,7 +11,7 @@ export default defineConfig((conf) => ({
     environment: "jsdom",
     setupFiles: ["./vitestSetup.ts"],
   },
-  plugins: [react(), webpackStats(), tailwindcss()],
+  plugins: [react(), webpackStats()],
   // used so that vitest resolves the core package from the sources instead of the built version
   resolve: {
     alias:
diff --git a/playground/package.json b/playground/package.json
index 13e722b6dc..76a6c33a01 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -60,8 +60,6 @@
     "react-dom": "^19.1.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.20.0",
-    "tailwindcss": "^4.1.12",
-    "tw-animate-css": "^1.3.7",
     "y-partykit": "^0.0.25",
     "yjs": "^13.6.27",
     "zustand": "^5.0.3"
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index 4964fbb6a6..4fac2d8a8a 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -179,7 +179,11 @@
           "author": "matthewlipski",
           "tags": [
             "Basic"
-          ]
+          ],
+          "dependencies": {
+            "tailwindcss": "^4.1.12",
+            "tw-animate-css": "^1.3.7"
+          } as any
         },
         "title": "Use with ShadCN",
         "group": {
@@ -399,7 +403,7 @@
           "pathFromRoot": "examples/03-ui-components",
           "slug": "ui-components"
         },
-        "readme": "In this example, we add a blue text/background color and code style button to the Formatting Toolbar.\n\n**Try it out:** Select some text to open the Formatting Toolbar, and click one of the new buttons!\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Manipulating Inline Content](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)"
+        "readme": "In this example, we add a blue text/background color and code style button to the Formatting Toolbar. We also make sure it only shows up when some text is selected.\n\n**Try it out:** Select some text to open the Formatting Toolbar, and click one of the new buttons!\n\n**Relevant Docs:**\n\n- [Changing the Formatting Toolbar](/docs/react/components/formatting-toolbar)\n- [Manipulating Inline Content](/docs/reference/editor/manipulating-content)\n- [Editor Setup](/docs/getting-started/editor-setup)"
       },
       {
         "projectSlug": "formatting-toolbar-block-type-items",
@@ -749,7 +753,7 @@
           "pathFromRoot": "examples/03-ui-components",
           "slug": "ui-components"
         },
-        "readme": "In this example, we add a button to the Link Toolbar which opens a browser alert.\n\n**Try it out:** Hover the link open the Link Toolbar, and click the new \"Open Alert\" button!\n\n**Relevant Docs:**\n\n- [Changing the Link Toolbar](/docs/react/components/link-toolbar)\n- [Editor Setup](/docs/getting-started/editor-setup)"
+        "readme": "In this example, we add a button to the Link Toolbar which opens a browser alert.\n\n**Try it out:** Hover the link open the Link Toolbar, and click the new \"Open Alert\" button!\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)"
       },
       {
         "projectSlug": "advanced-tables-2",
diff --git a/playground/src/style.css b/playground/src/style.css
index 9952f8bce0..f6001c9206 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -1,127 +1,4 @@
 @import url("@mantine/core/styles.css");
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../../packages/shadcn";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
 
 body {
   height: auto;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f709b5c3f..92d2cd5023 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -259,13 +259,13 @@ importers:
         version: 11.6.10(@fumadocs/mdx-remote@1.3.0(acorn@8.14.1)(fumadocs-core@15.6.3(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0))(acorn@8.14.1)(fumadocs-core@15.6.3(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(vite@6.3.5(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1)(tsx@4.19.3)(yaml@2.7.0))
       fumadocs-twoslash:
         specifier: ^3.1.4
-        version: 3.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(fumadocs-ui@15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.11))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.8.3)
+        version: 3.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(fumadocs-ui@15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.12))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.8.3)
       fumadocs-typescript:
         specifier: ^4.0.6
         version: 4.0.6(@types/react@19.1.8)(typescript@5.8.3)
       fumadocs-ui:
         specifier: ^15.5.4
-        version: 15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.11)
+        version: 15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.12)
       import-in-the-middle:
         specifier: ^1.14.2
         version: 1.14.2
@@ -308,9 +308,15 @@ importers:
       shiki:
         specifier: ^3.7.0
         version: 3.7.0
+      tailwindcss:
+        specifier: ^4.1.12
+        version: 4.1.12
       ts-morph:
         specifier: 26.0.0
         version: 26.0.0
+      tw-animate-css:
+        specifier: ^1.3.7
+        version: 1.3.7
       twoslash:
         specifier: ^0.3.2
         version: 0.3.2(typescript@5.8.3)
@@ -348,6 +354,9 @@ importers:
       '@tailwindcss/postcss':
         specifier: ^4.1.10
         version: 4.1.12
+      '@tailwindcss/vite':
+        specifier: ^4.1.12
+        version: 4.1.12(vite@6.3.5(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1)(tsx@4.19.3)(yaml@2.7.0))
       '@types/better-sqlite3':
         specifier: 7.6.13
         version: 7.6.13
@@ -381,9 +390,6 @@ importers:
       react-email:
         specifier: ^4.0.16
         version: 4.0.16(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      tailwindcss:
-        specifier: ^4.1.10
-        version: 4.1.11
       typescript:
         specifier: ^5.8.3
         version: 5.8.3
@@ -710,6 +716,12 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      tailwindcss:
+        specifier: ^4.1.12
+        version: 4.1.12
+      tw-animate-css:
+        specifier: ^1.3.7
+        version: 1.3.7
     devDependencies:
       '@types/react':
         specifier: ^19.1.0
@@ -3991,6 +4003,9 @@ importers:
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.6.0
+      tailwindcss:
+        specifier: ^4.1.12
+        version: 4.1.12
       zod:
         specifier: ^3.24.2
         version: 3.24.2
@@ -3998,9 +4013,6 @@ importers:
       '@radix-ui/colors':
         specifier: ^3.0.0
         version: 3.0.0
-      '@tailwindcss/vite':
-        specifier: ^4.1.12
-        version: 4.1.12(vite@5.4.15(@types/node@20.17.28)(lightningcss@1.30.1)(terser@5.43.1))
       '@types/node':
         specifier: ^20.12.7
         version: 20.17.28
@@ -4686,12 +4698,6 @@ importers:
       react-router-dom:
         specifier: ^6.20.0
         version: 6.30.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      tailwindcss:
-        specifier: ^4.1.12
-        version: 4.1.12
-      tw-animate-css:
-        specifier: ^1.3.7
-        version: 1.3.7
       y-partykit:
         specifier: ^0.0.25
         version: 0.0.25
@@ -14321,9 +14327,6 @@ packages:
   tailwind-merge@3.3.1:
     resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
 
-  tailwindcss@4.1.11:
-    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
-
   tailwindcss@4.1.12:
     resolution: {integrity: sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==}
 
@@ -20216,13 +20219,6 @@ snapshots:
       postcss: 8.5.6
       tailwindcss: 4.1.12
 
-  '@tailwindcss/vite@4.1.12(vite@5.4.15(@types/node@20.17.28)(lightningcss@1.30.1)(terser@5.43.1))':
-    dependencies:
-      '@tailwindcss/node': 4.1.12
-      '@tailwindcss/oxide': 4.1.12
-      tailwindcss: 4.1.12
-      vite: 5.4.15(@types/node@20.17.28)(lightningcss@1.30.1)(terser@5.43.1)
-
   '@tailwindcss/vite@4.1.12(vite@6.3.5(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1)(tsx@4.19.3)(yaml@2.7.0))':
     dependencies:
       '@tailwindcss/node': 4.1.12
@@ -22893,11 +22889,11 @@ snapshots:
       - acorn
       - supports-color
 
-  fumadocs-twoslash@3.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(fumadocs-ui@15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.11))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.8.3):
+  fumadocs-twoslash@3.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(fumadocs-ui@15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.12))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.8.3):
     dependencies:
       '@radix-ui/react-popover': 1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@shikijs/twoslash': 3.7.0(typescript@5.8.3)
-      fumadocs-ui: 15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.11)
+      fumadocs-ui: 15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.12)
       mdast-util-from-markdown: 2.0.2
       mdast-util-gfm: 3.1.0
       mdast-util-to-hast: 13.2.0
@@ -22930,7 +22926,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-ui@15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.11):
+  fumadocs-ui@15.6.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(next@15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tailwindcss@4.1.12):
     dependencies:
       '@radix-ui/react-accordion': 1.2.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -22955,7 +22951,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
       next: 15.5.0(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.51.1)(babel-plugin-react-compiler@19.1.0-rc.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      tailwindcss: 4.1.11
+      tailwindcss: 4.1.12
     transitivePeerDependencies:
       - '@oramacloud/client'
       - '@types/react-dom'
@@ -26735,8 +26731,6 @@ snapshots:
 
   tailwind-merge@3.3.1: {}
 
-  tailwindcss@4.1.11: {}
-
   tailwindcss@4.1.12: {}
 
   tapable@2.2.3: {}

From 718124d5e743eee2c8a1102daf47b5841d82bfa1 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Wed, 27 Aug 2025 12:20:15 +0200
Subject: [PATCH 6/7] Small fix

---
 playground/src/main.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/playground/src/main.tsx b/playground/src/main.tsx
index fbd2749bb1..9ee444b26c 100644
--- a/playground/src/main.tsx
+++ b/playground/src/main.tsx
@@ -84,9 +84,7 @@ function Root() {
           </AppShell.Navbar>
         )}
         <AppShell.Main>
-          <div>
-            <Outlet />
-          </div>
+          <Outlet />
         </AppShell.Main>
       </AppShell>
     </MantineProvider>

From 042d80c1d145f00b18ee83c3b0249a7b4bdd9d67 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Wed, 27 Aug 2025 12:45:43 +0200
Subject: [PATCH 7/7] Fixed docs

---
 docs/app/global.css | 123 ++++++++++++++++++++++++++++++++++++++++++++
 docs/package.json   |   6 ++-
 pnpm-lock.yaml      |   3 --
 3 files changed, 127 insertions(+), 5 deletions(-)

diff --git a/docs/app/global.css b/docs/app/global.css
index 2a4db71c34..861e3a0289 100644
--- a/docs/app/global.css
+++ b/docs/app/global.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 @import "fumadocs-ui/css/vitepress.css";
 @import "fumadocs-ui/css/preset.css";
 @import "fumadocs-twoslash/twoslash.css";
@@ -6,3 +7,125 @@
 @source ".";
 @source "../components";
 @source "../content";
+/* Ensures CSS is generated also for ShadCN components. */
+@source "../node_modules/@blocknote/shadcn";
+
+/* Add ShadCN theme variables. */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/docs/package.json b/docs/package.json
index 0abe44529b..30dd90280c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -102,7 +102,9 @@
     "y-partykit": "^0.0.25",
     "yjs": "^13.6.27",
     "zod": "^3.25.67",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "tailwindcss": "^4.1.12",
+    "tw-animate-css": "^1.3.7"
   },
   "devDependencies": {
     "@blocknote/ariakit": "workspace:^",
@@ -140,4 +142,4 @@
     "y-partykit": "^0.0.33",
     "yjs": "^13.6.27"
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92d2cd5023..c9b8374cc7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -354,9 +354,6 @@ importers:
       '@tailwindcss/postcss':
         specifier: ^4.1.10
         version: 4.1.12
-      '@tailwindcss/vite':
-        specifier: ^4.1.12
-        version: 4.1.12(vite@6.3.5(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1)(tsx@4.19.3)(yaml@2.7.0))
       '@types/better-sqlite3':
         specifier: 7.6.13
         version: 7.6.13