@a2ui-bridge/react-shadcn

ShadCN/Tailwind component implementations for A2UI Bridge.

Installation

``bash
npm install @a2ui-bridge/core @a2ui-bridge/react @a2ui-bridge/react-shadcn
`

$3

Add the package to your Tailwind content paths:

`js
// tailwind.config.js
module.exports = {
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/@a2ui-bridge/react-shadcn/dist/*/.js',
],
// ...
}
`

$3

Add ShadCN-style CSS variables to your stylesheet:

`css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
`

Usage

`tsx
import { Surface, useA2uiProcessor } from '@a2ui-bridge/react';
import { shadcnComponents } from '@a2ui-bridge/react-shadcn';

function App() {
const processor = useA2uiProcessor();

return (
processor={processor}
components={shadcnComponents}
onAction={(action) => console.log('Action:', action)}
/>
);
}
`

Components

$3


Renders text with various styles based on usageHint:

| usageHint | Style |
|-----------|-------|
| h1 | Large heading |
| h2 | Medium heading |
| h3 | Small heading |
| body | Body text |
| caption | Small, muted text |
| label | Form label |

$3

Interactive button with action support:

`json
{
"componentType": "Button",
"properties": {
"child": "button-text",
"action": { "name": "submit" }
}
}
`

$3

Elevated container with rounded corners:

`json
{
"componentType": "Card",
"properties": {
"children": ["card-content"]
}
}
`

$3

Horizontal flex layout:

`json
{
"componentType": "Row",
"properties": {
"alignment": "center",
"children": ["item1", "item2"]
}
}
`

$3

Vertical flex layout:

`json
{
"componentType": "Column",
"properties": {
"children": ["item1", "item2"]
}
}
`

$3

Text input with data binding:

`json
{
"componentType": "TextField",
"properties": {
"label": { "literalString": "Email" },
"text": { "path": "form.email" },
"type": "shortText"
}
}
`

$3

Small status indicator:

`json
{
"componentType": "Badge",
"properties": {
"text": { "literalString": "Active" }
}
}
`

$3

Visual separator line.

$3

Container for list items:

`json
{
"componentType": "List",
"properties": {
"direction": "vertical",
"children": ["item1", "item2"]
}
}
`

$3

Image display with usage hints:

`json
{
"componentType": "Image",
"properties": {
"url": { "literalString": "https://example.com/image.jpg" },
"usageHint": "avatar"
}
}
`

Theming

Components use Tailwind CSS with CSS variables for theming. Override variables in your CSS to customize:

`css
:root {
--primary: 220 90% 56%; / Custom primary color /
--radius: 0.75rem; / Larger border radius /
}
``

License

MIT