Migration - Base UI based registry components

frontend/.claude/skills/react-best-practices/rules/bundle-barrel-imports.md

@@ -39,6 +39,6 @@ import TextField from '@mui/material/TextField'
 
 Direct imports provide 15-70% faster dev boot, 28% faster builds, 40% faster cold starts, and significantly faster HMR.
 
-Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
+Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
 
 Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

frontend/biome.jsonc

@@ -153,7 +153,7 @@
       }
     },
     {
-      "includes": ["**/scripts/**/*", "**/bin/**/*", "*.mjs", "*.cjs", "**/tests/global-*.mjs", "**/tests/*.sh"],
+      "includes": ["**/scripts/**/*", "**/bin/**/*", "*.mjs", "*.cjs", "**/tests/**/*", "**/tests/*.sh"],
       "linter": {
         "rules": {
           "suspicious": {

frontend/components.json

@@ -7,15 +7,17 @@
     "config": "",
     "css": "src/globals.css",
     "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
+    "cssVariables": true
   },
   "aliases": {
-    "components": "components",
-    "utils": "lib/utils",
-    "ui": "components/ui",
-    "lib": "lib",
-    "hooks": "hooks"
+    "components": "@/components/redpanda-ui",
+    "utils": "@/components/redpanda-ui/lib/utils",
+    "ui": "@/components/redpanda-ui",
+    "lib": "@/components/redpanda-ui/lib",
+    "hooks": "@/components/redpanda-ui/lib"
   },
-  "iconLibrary": "lucide"
+  "iconLibrary": "lucide",
+  "registries": {
+    "@redpanda": "https://redpanda-ui-registry.netlify.app/r/{name}.json"
+  }
 }

frontend/package.json

@@ -73,9 +73,11 @@
     "@a2a-js/sdk": "^0.3.13",
     "@autoform/react": "^4.0.0",
     "@autoform/zod": "^5.0.0",
+    "@base-ui/react": "^1.4.0",
     "@buf/redpandadata_cloud.connectrpc_query-es": "^2.2.0-20251128173054-b9f9fc6e5a70.1",
     "@buf/redpandadata_common.bufbuild_es": "^2.11.0-20260316210807-5d899910f714.1",
-    "@bufbuild/protobuf": "^2.10.0",
+    "@bufbuild/cel": "^0.4.0",
+    "@bufbuild/protobuf": "^2.11.0",
     "@bufbuild/protoc-gen-es": "^2.10.0",
     "@builder.io/sdk-react": "^4.2.4",
     "@chakra-ui/object-utils": "^2.1",
@@ -87,19 +89,19 @@
     "@connectrpc/connect-query": "^2.2.0",
     "@connectrpc/connect-web": "^2.1.0",
     "@emotion/css": "^11.13.5",
-    "@hookform/resolvers": "^4.1.3",
+    "@hookform/resolvers": "^5.2.2",
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@milkdown/kit": "^7.18.0",
     "@milkdown/react": "^7.18.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@module-federation/runtime": "^2.3.2",
     "@monaco-editor/react": "^4.7.0",
     "@redpanda-data/ui": "^4.2.0",
-    "@stepperize/react": "^5.1.8",
-    "@tailwindcss/postcss": "^4.1.17",
+    "@stepperize/react": "^5.1.9",
+    "@tailwindcss/postcss": "^4.2.4",
     "@tanstack/react-form": "^1.12.3",
     "@tanstack/react-query": "^5.90.7",
-    "@tanstack/react-router": "^1.158.0",
+    "@tanstack/react-router": "^1.168.10",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
     "@tanstack/zod-adapter": "^1.158.0",
@@ -111,6 +113,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "dexie": "^4.2.1",
     "dexie-react-hooks": "^4.2.0",
     "dotenv": "^17.2.3",
@@ -122,46 +125,45 @@
     "json-bigint": "^1.0.0",
     "jwt-decode": "^4.0.0",
     "lottie-react": "^2.4.1",
-    "lucide-react": "^1.8.0",
+    "lucide-react": "^1.7.0",
     "moment": "^2.30.1",
     "monaco-editor": "^0.55.0",
     "monaco-editor-webpack-plugin": "^7.1.1",
     "monaco-yaml": "^5.4.0",
-    "motion": "^12.23.24",
+    "motion": "^12.38.0",
     "nanoid": "^5.1.6",
     "nuqs": "^2.6.0",
     "pretty-bytes": "^5.6.0",
     "pretty-ms": "^7.0.1",
     "prismjs": "^1.30.0",
-    "radix-ui": "^1.4.3",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-compiler-runtime": "^1.0.0",
-    "react-day-picker": "^9.11.1",
+    "react-day-picker": "^9.14.0",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.5.0",
-    "react-dropzone": "^14.3.8",
+    "react-dropzone": "^15.0.0",
     "react-highlight-words": "^0.21.0",
-    "react-hook-form": "^7.54.2",
+    "react-hook-form": "^7.72.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.4",
+    "react-resizable-panels": "^3.0.6",
     "react-simple-code-editor": "^0.14.1",
     "react-syntax-highlighter": "^16.0.0",
-    "recharts": "2.15.4",
+    "recharts": "^2.15.4",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
-    "shiki": "^3.15.0",
+    "shiki": "^3.23.0",
     "sonner": "^2.0.7",
     "stacktrace-js": "^2.0.2",
     "streamdown": "^2.5.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.17",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.4",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.1",
     "uuid": "^13.0.0",
     "vaul": "^1.1.2",
     "yaml": "^2.8.3",
-    "zod": "^3.25.76",
+    "zod": "^4.3.6",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

frontend/postcss.config.mjs

@@ -1,5 +1,7 @@
 export default {
   plugins: {
-    '@tailwindcss/postcss': {},
+    '@tailwindcss/postcss': {
+      content: ['./src/**/*.{js,ts,jsx,tsx}'],
+    },
   },
 };

frontend/rsbuild.config.ts

@@ -13,6 +13,7 @@ import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 import { moduleFederationConfig } from './module-federation.config';
 import { HEAP_APP_ID } from './src/heap/heap.helper';
 import { HUBSPOT_PORTAL_ID } from './src/hubspot/hubspot.helper';
+import path from 'node:path';
 
 const { publicVars, rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });
 
@@ -138,6 +139,15 @@ export default defineConfig({
       /* resolve symlinks so the proto generate code can be built. */
       config.resolve.symlinks = false;
 
+      // `@redpanda-data/ui@4.2.0` has module-level imports from `date-fns-tz` v2
+      // paths in its bundled dist. We replaced `<DateTimeInput>` (the only caller)
+      // with `components/ui/date-time-input`, so these imports are dead — but
+      // they still need to resolve at link time. Point them at no-op stubs.
+      Object.assign(config.resolve.alias as Record<string, string>, {
+        'date-fns-tz$': path.resolve(__dirname, 'src/utils/vendor/date-fns-tz-shim.ts'),
+        'date-fns-tz/zonedTimeToUtc$': path.resolve(__dirname, 'src/utils/vendor/zonedTimeToUtc.ts'),
+      });
+
       config.output.publicPath = 'auto';
 
       // Prevent rebuild loop by ignoring generated route tree file

frontend/src/assets/connectors/component-logo-map.tsx

@@ -13,7 +13,7 @@ import {
   SiSplunk,
   SiTrino,
 } from '@icons-pack/react-simple-icons';
-import { RedpandaUILetterIconColor } from 'components/redpanda-ui/components/icons';
+import { RedpandaUILetterIcon } from 'components/redpanda-ui/components/icons';
 import {
   Activity,
   Archive,
@@ -43,6 +43,7 @@ import {
   Type,
   Workflow,
 } from 'lucide-react';
+import type { SVGProps } from 'react';
 
 import {
   AmazonWebServicesLogo,
@@ -96,6 +97,10 @@ import {
   XmlLogo,
 } from './logos';
 
+const RedpandaLetterLogo = (props: SVGProps<SVGSVGElement>) => (
+  <RedpandaUILetterIcon {...props} style={{ color: '#E14226', ...props.style }} />
+);
+
 export const componentLogoMap = {
   custom: Settings,
   amqp_0_9: RabbitMQLogo,
@@ -122,7 +127,7 @@ export const componentLogoMap = {
   batched: Package,
   beanstalkd: BeanstalkdLogo,
   benchmark: Activity,
-  bloblang: RedpandaUILetterIconColor,
+  bloblang: RedpandaLetterLogo,
   bounds_check: undefined,
   branch: undefined,
   broker: undefined,
@@ -249,12 +254,12 @@ export const componentLogoMap = {
   redis_scan: RedisLogo,
   redis_script: RedisLogo,
   redis_streams: RedisLogo,
-  redpanda: RedpandaUILetterIconColor,
-  redpanda_common: RedpandaUILetterIconColor,
-  redpanda_data_transform: RedpandaUILetterIconColor,
-  redpanda_migrator: RedpandaUILetterIconColor,
-  redpanda_migrator_bundle: RedpandaUILetterIconColor,
-  redpanda_migrator_offsets: RedpandaUILetterIconColor,
+  redpanda: RedpandaLetterLogo,
+  redpanda_common: RedpandaLetterLogo,
+  redpanda_data_transform: RedpandaLetterLogo,
+  redpanda_migrator: RedpandaLetterLogo,
+  redpanda_migrator_bundle: RedpandaLetterLogo,
+  redpanda_migrator_offsets: RedpandaLetterLogo,
   reject: undefined,
   reject_errored: undefined,
   resource: Package,

frontend/src/components/ai-elements/context.tsx

@@ -77,6 +77,7 @@ export const Context = ({
 
   return (
     <ContextContext.Provider value={contextValue}>
+      {/* @ts-expect-error openDelay/closeDelay are not in HoverCard's typed props after registry update */}
       <HoverCard closeDelay={0} openDelay={0} {...props} />
     </ContextContext.Provider>
   );

frontend/src/components/ai-elements/prompt-input.tsx

@@ -1240,11 +1240,9 @@ export const PromptInputModelSelectValue = ({
 
 export type PromptInputHoverCardProps = ComponentProps<typeof HoverCard>;
 
-export const PromptInputHoverCard = ({
-  openDelay = 0,
-  closeDelay = 0,
-  ...props
-}: PromptInputHoverCardProps) => (
+// @ts-expect-error openDelay/closeDelay are not in HoverCard's typed props after registry update
+export const PromptInputHoverCard = ({ openDelay = 0, closeDelay = 0, ...props }: PromptInputHoverCardProps) => (
+  // @ts-expect-error openDelay/closeDelay are not in HoverCard's typed props after registry update
   <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
 );
 

frontend/src/components/misc/kowl-time-picker.tsx

@@ -9,7 +9,8 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, DateTimeInput } from '@redpanda-data/ui';
+import { Box } from '@redpanda-data/ui';
+import { DateTimeInput } from 'components/ui/date-time-input';
 import { useState } from 'react';
 
 export function KowlTimePicker(props: { valueUtcMs: number; onChange: (utcMs: number) => void; disabled?: boolean }) {
@@ -18,6 +19,7 @@ export function KowlTimePicker(props: { valueUtcMs: number; onChange: (utcMs: nu
   return (
     <Box maxW={300}>
       <DateTimeInput
+        disabled={props.disabled}
         onChange={(value) => {
           setTimestampUtcMs(value);
           props.onChange(value);