---
title: Dependencies
description: Required dependencies and version compatibility for Redpanda UI components
icon: package
---

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

:::info
**Each registry item declares its own dependencies.** `shadcn add` reads them from the item's JSON and adds
them to your `package.json`, so you don't have to install this list by hand — the exact ranges for a given
component are always in its own item, and the versions below are the ones the registry is developed
against. The one exception is `@base-ui/react`, which needs to be present _before_ you run
`shadcn add` — see [Install](/docs/install).
:::

## 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](/docs/install).

## UI primitives & styling

### Base UI

- **@base-ui/react**: `^1.9.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

```bash
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

```bash
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`](/docs/theme) — 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](/docs/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](/docs/theming).