Dependencies

This page lists the dependencies Redpanda UI components rely on, and the versions the registry is built and tested against.

Core

React

• Version: 19.2.x
• Note: A few items depend on @shadcn/react, whose peer range is >=19. Most components carry no React 19–only API and will run on 18, but 19 is what the registry is built and tested against.

TypeScript

• Version: 6.0.3
• Configuration: Strict mode enabled
• Note: Type checking available via bun run type:check

Tailwind CSS

• tailwindcss: 4.2.2
• @tailwindcss/postcss: 4.2.2
• postcss: ^8.5.10
• tw-animate-css: 1.4.0
• Important: Tailwind v4 syntax required. theme.css extends Tailwind (@theme, @utility, @custom-variant), so it must be imported after @import "tailwindcss" — see Install.

UI primitives & styling

Base UI

• @base-ui/react: ^1.8.0
• Purpose: Headless, accessible primitives behind most interactive components

shadcn

• CLI: run as bunx shadcn@latest — no version pinned
• @shadcn/react: 0.3.0 — pinned exactly, since its internals are part of a few components' styling contract
• class-variance-authority: ^0.7.1 — variant APIs
• clsx: ^2.1.1 — the input side of cn
• tailwind-merge: ^3.6.0 — conflict resolution in cn, configured with the theme's custom text-* utilities

Fonts

Installed by @redpanda/theme and imported by theme.css, so the font tokens always resolve:

• @fontsource/inter: ^5.3.0
• @fontsource/geist-mono: ^5.3.0
• inter-ui: ^4.1.1 — provides InterDisplay

Animation & motion

• motion: ^12.40.0 — powers the animations that aren't pure CSS

Forms

• react-hook-form: ^7.76.1
• @hookform/resolvers: ^5.2.2
• zod: ^4.4.3 — schema validation (v4; v3 schemas need migrating)

Protobuf forms

Only needed by auto-form, proto-field and the proto hooks:

• @bufbuild/protobuf: ^2.12.0
• @bufbuild/protovalidate: ^1.2.0

Table & data

• @tanstack/react-table: ^8.21.3
• recharts: ^3.8.1 — charts (v3; v2 has breaking changes in the chart API)

Icons

• lucide-react: ^1.16.0

Common issues & troubleshooting

Chakra UI compatibility

⚠️ Known issue: Chakra UI's colour-mode system does not cooperate with token-based theming.

Problem:

• Chakra drives appearance through its own ColorModeProvider and theme context
• Redpanda UI keys off data-theme on the document element and CSS variables
• Mixing the two leaves one half of the page in the wrong theme

Solutions:

1. Recommended: render Redpanda UI components in their own subtree and migrate a screen at a time
2. If the two must interleave: mirror your Chakra colour mode onto data-theme so both read one source of truth
3. Don't rely on Chakra tokens inside registry components — they read from theme.css, not from Chakra's theme

Upgrading a consumer app

React 18 → 19

bun add react@^19 react-dom@^19

React 19 ships codemods for the patterns that changed, including forwardRef → ref as a prop.

Tailwind v3 → v4

• Configuration moves from tailwind.config.js into CSS (@theme)
• Check utility renames and the new @import "tailwindcss" entry point
• Import theme.css after Tailwind, not before

zod v3 → v4 and recharts v2 → v3

Both are major bumps with breaking APIs. If you're pinned to the older major, upgrade it before pulling components that depend on them (forms, and chart).

Common error fixes

TypeScript errors

bun run type:check

Styling issues

1. Confirm the CSS import order — tailwindcss, then theme.css, then any override sheet of your own
2. Restart the dev server so Tailwind re-scans for classes
3. Check the token exists in theme.css — a removed or misspelled token compiles to nothing and simply doesn't paint

Theme switching problems

• ThemeProvider owns the whole contract — it writes data-theme, the .dark class and color-scheme. Nothing else in your app needs to set them.
• A flash of the wrong theme on load means ThemeScript (server-rendered apps) or initTheme (client-only apps) isn't wired up — see Install.
• If you keep a theme override sheet, run the checker that ships with the theme to catch overrides that have stopped applying — see Theming your app.