Dependencies

This page lists the required dependencies and version compatibility information for Redpanda UI components to help troubleshoot common issues.

Core Dependencies

React

• Required Version: ^18.3.1
• React DOM: ^18.3.1
• Compatibility: Components are built for React 18.3.1, with backwards compatibility (without using any refs from React 19 or newer hooks)

TypeScript

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

Tailwind CSS

• Required Version: ^4.1.11
• postcss: ^8.5.6
• @tailwindcss/postcss: "^4.1.11"
• tw-animate-css: "^1.3.6"
• Configuration: Uses CSS variables for theming
• Important: Tailwind v4+ syntax required

Animation & Motion

Motion (Framer Motion)

• Version: ^12.23.12
• Usage: Powers component animations and transitions

UI Framework Dependencies

Radix UI

• radix-ui: ^1.4.2
• Purpose: Headless UI primitives for accessibility

Shadcn/UI

• shadcn: 2.10.0
• class-variance-authority: ^0.7.1
• clsx: ^2.1.1
• tailwind-merge: ^3.3.1

Form Libraries

• react-hook-form: ^7.62.0
• @hookform/resolvers: ^5.1.1
• zod: ^3.24.1 - Schema validation

Table & Data

• @tanstack/react-table: ^8.21.3
• recharts: ^2.15.4 - Chart components

Icons & Assets

• lucide-react: ^0.536.0

Common Issues & Troubleshooting

Chakra UI Compatibility

⚠️ Known Issue: Chakra UI's light/dark mode system does not work well with Redpanda UI's Shadcn-based theming.

Problem:

• Chakra UI uses its own ColorModeProvider and theme context
• Conflicts with next-themes and CSS variable-based theming
• Styling inconsistencies between light/dark modes

Solutions:

1. Recommended: Use only Redpanda UI components for consistent theming
2. If mixing required: Wrap Chakra components in separate theme contexts
3. Alternative: Use Radix UI primitives directly instead of Chakra UI

Version Compatibility

React 19 Migration (+ codemods for forwardRef -> ref as a component prop)

If upgrading from React 18:

bun install react@^19.1.0 react-dom@^19.1.0

Tailwind CSS v4

When upgrading from Tailwind v3:

• Update configuration syntax
• Check for breaking changes in utility classes
• Verify CSS variable usage

Motion Library

For animation issues:

• Ensure motion version ^12.23.12
• Check for conflicting animation libraries
• Verify React 19 compatibility

Common Error Fixes

TypeScript Errors

bun run type:check

Styling Issues

1. Clear Tailwind cache
2. Restart development server
3. Check CSS variable definitions in theme.css

Theme Switching Problems

• Verify next-themes configuration (or use local storage for non-server-side rendered apps)
• Check ThemeProvider setup
• Ensure CSS variables are properly defined