Add evex to registry directory (#11023)

DropdownMenuLabel renders Base UI's Menu.GroupLabel, which throws
"MenuGroupContext is missing" (Base UI error #31) unless rendered inside
a Menu.Group. Wrap the label and items in DropdownMenuGroup so the
"Jump to..." menu opens without crashing.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/v4/components/docs-sidebar.tsx

@@ -52,10 +52,6 @@ const TOP_LEVEL_SECTIONS = [
     name: "Registry",
     href: "/docs/registry",
   },
-  {
-    name: "@shadcn/react",
-    href: "/docs/react",
-  },
   {
     name: "Forms",
     href: "/docs/forms",

apps/v4/content/docs/changelog/2026-06-chat-components.mdx

@@ -96,6 +96,20 @@ logic stays tested in one place.
 
 Available now for Radix and Base UI.
 
+## AI Elements
+
+This does not replace [AI Elements](https://ai-sdk.dev/elements/overview). You
+can keep using AI Elements for AI interface components and patterns. This
+release is about bringing the core pieces of chat into shadcn/ui, one component
+at a time.
+
+If you are already using a component from AI Elements, you do not need to
+rewrite your app. Keep what works. Try the shadcn/ui version when you want the
+newer abstraction, the updated styling, or support across Radix and Base UI.
+
+The goal is to make these pieces easy to adopt independently. Replace one part,
+compose it with what you already have, and keep building.
+
 <Button asChild size="sm">
   <Link href="/docs/components" className="mt-6 no-underline!">
     View Components

apps/v4/content/docs/react/index.mdx

@@ -1,28 +0,0 @@
----
-title: "@shadcn/react"
-description: Headless, unstyled primitives that power the shadcn/ui components.
----
-
-import { MessagesSquareIcon } from "lucide-react"
-
-## Overview
-
-The components you copy from the registry are thin styled wrappers over the
-`@shadcn/react` package. The package ships the behavior, anchoring, scroll
-management, visibility, and the imperative hot paths, with no styling of its own.
-
-Use it directly when you are building your own design system, or when you want
-full control over the markup and styles.
-
-```bash
-npm install @shadcn/react
-```
-
-## Primitives
-
-<div className="mt-8 grid gap-4 sm:grid-cols-2 sm:gap-6">
-  <LinkedCard href="/docs/react/message-scroller">
-    <MessagesSquareIcon className="size-10" />
-    <p className="mt-2 font-medium">Message Scroller</p>
-  </LinkedCard>
-</div>

apps/v4/examples/base/message-scroller-commands.tsx

@@ -16,6 +16,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
@@ -137,22 +138,24 @@ function CommandMenu() {
         Jump to...
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" side="bottom" className="w-64">
-        <DropdownMenuLabel>Conversations</DropdownMenuLabel>
+        <DropdownMenuGroup>
-        {userMessages.map((message) => (
+          <DropdownMenuLabel>Conversations</DropdownMenuLabel>
-          <DropdownMenuItem
+          {userMessages.map((message) => (
-            key={message.id}
+            <DropdownMenuItem
-            onSelect={() =>
+              key={message.id}
-              scrollToMessage(message.id, {
+              onSelect={() =>
-                align: "start",
+                scrollToMessage(message.id, {
-                behavior: "smooth",
+                  align: "start",
-              })
+                  behavior: "smooth",
-            }
+                })
-          >
+              }
-            <span className="line-clamp-1 min-w-0">
+            >
-              {getTrimmedMessageText(message)}
+              <span className="line-clamp-1 min-w-0">
-            </span>
+                {getTrimmedMessageText(message)}
-          </DropdownMenuItem>
+              </span>
-        ))}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   )