@anycms/a2ui-react-shadcn

A shadcn/ui + Tailwind CSS renderer preset for A2UI v1.0. It provides a drop-in ReactComponentRegistry that renders the same A2UI message stream as the default vanilla renderer, but with shadcn/ui components built on Radix UI + Tailwind CSS.

It is a pure presentation swap — the A2UI binders, reactive runtime, and React adapter are reused unchanged from @anycms/a2ui-core / @anycms/a2ui-react. Only the 18 component Views change.

Install

npm install @anycms/a2ui-react-shadcn @anycms/a2ui-react @anycms/a2ui-core

Peer deps: react, react-dom. The Radix / cva / tailwind-merge / lucide deps come along as regular dependencies.

Usage

import { A2uiSurface } from '@anycms/a2ui-react';
import { shadcnReactComponents } from '@anycms/a2ui-react-shadcn';
import '@anycms/a2ui-react-shadcn/styles.css'; // shadcn CSS variables (after your Tailwind import)

<A2uiSurface surface={surface} registry={shadcnReactComponents} />;

Tailwind setup

This package emits Tailwind utility classes (bg-primary, text-muted-foreground, rounded-md, …). Your host app must have Tailwind configured and the shadcn CSS variables in scope. Either:

copy the tokens from styles.css into your own globals.css, or
import the shipped sheet directly: import '@anycms/a2ui-react-shadcn/styles.css';

and make sure Tailwind scans the built package so those classes are generated:

/* Tailwind v4 */
@source '../node_modules/@anycms/a2ui-react-shadcn/dist';

// Tailwind v3 — tailwind.config.js content
content: [
  './src/**/*.{ts,tsx}',
  './node_modules/@anycms/a2ui-react-shadcn/dist/**/*.{js,cjs}',
],

A2UI prop → shadcn variant mapping

A2UI component	A2UI field	shadcn rendering
Button	`variant`: primary / borderless / default	`default` / `ghost` / `outline`
Text	`variant`: h1…h5 / caption / body	heading + muted typography
TextField	`variant`: shortText / longText / number / obscured	`Input` / `Textarea`, password/number types
ChoicePicker	`variant` + `displayStyle`	`RadioGroup` / `Checkbox` group / `ToggleGroup` (chips)
Tabs / Modal / Slider / Divider / CheckBox	—	Radix `Tabs` / `Dialog` / `Slider` / `Separator` / `Checkbox`

Full mapping lives in src/variants.ts.

JSPM