@radish-ui/core

Headless react-admin wrappers and Tailwind CSS utilities for radish-ui.

[!WARNING] Early development — not production-ready. The API may change rapidly without notice and is not yet stable.

Installation

pnpm add @radish-ui/core ra-core react react-dom tailwindcss
# or
npm install @radish-ui/core ra-core react react-dom tailwindcss

What's included

cn() utility

A clsx + tailwind-merge helper for conditionally joining Tailwind class names without conflicts:

import { cn } from "@radish-ui/core";

<div className={cn("px-4 py-2", isActive && "bg-primary-500", className)} />

Admin, ListBase, and ra-core wrappers

Thin wrappers around ra-core primitives so you can import everything from one package:

import { Admin, ListBase, EditBase, CreateBase, ShowBase } from "@radish-ui/core";
import { useFieldValue } from "@radish-ui/core";

Tailwind CSS preset (@radish-ui/core/preset)

A Tailwind preset that registers semantic color tokens. Registry components use these tokens so you can retheme everything by overriding one value in your config.

| Token | Default palette | Purpose | | --------- | --------------- | --------------------------------------- | | primary | indigo | Brand / interactive color | | neutral | gray | Borders, dividers, muted text | | danger | red | Destructive actions and error states | | success | green | Positive states and confirmations | | info | blue | Informational states | | warning | yellow | Warning states | | canvas | gray + white | Surface backgrounds (page, card, input) |

// tailwind.config.ts
import radishPreset from "@radish-ui/core/preset";
import colors from "tailwindcss/colors";

export default {
  presets: [radishPreset],
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  // Override the primary brand color for your project:
  theme: { extend: { colors: { primary: colors.violet } } },
};

Learn more

• radish-ui on GitHub
• Documentation
• react-admin / ra-core