Dependencies

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

NOTE: You won't need to install anything other than the Core Dependencies. Our CLI will handle the rest for you.

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

Base UI

@base-ui/react: ^1.4.0
Purpose: Headless UI primitives for accessibility

Shadcn/UI

shadcn: 2.10.0
class-variance-authority: ^0.7.1
cnfast: ^0.0.8 - Drop-in cn (optimized clsx + tailwind-merge)

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:

Recommended: Use only Redpanda UI components for consistent theming
If mixing required: Wrap Chakra components in separate theme contexts
Alternative: Use Base 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

Clear Tailwind cache
Restart development server
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