Installation

Installation Guide

Prerequisites

Before installing a2ui-shadcn, ensure you have:

• Node.js 18.0.0 or higher
• Package Manager: pnpm (recommended), npm, or yarn
• React 18.0.0 or higher
• TypeScript 5.0.0 or higher (optional but recommended)

Step 1: Install the Package

Choose your preferred package manager:

Step 2: Set Up shadcn/ui

a2ui-shadcn requires shadcn/ui as a peer dependency. If you haven't already set it up:

Follow the prompts to configure:

• Style: Choose your preferred style (Default or New York)
• Color: Pick a base color (Slate, Gray, etc.)
• CSS Variables: Recommended for theming flexibility

For RTL Support:

If you need right-to-left layout support (Arabic, Hebrew, Persian):

Or migrate an existing project:

Step 3: Configure TypeScript (Optional)

Add path aliases to your tsconfig.json:

Step 4: Verify Installation

Create a simple test component:

Run your development server and navigate to the test page. You should see "Hello, A2UI!" rendered.

Framework-Specific Setup

#### Next.js 13+ (App Router)

a2ui-shadcn works seamlessly with Next.js App Router. No additional configuration needed.

Example Page:

#### Next.js Pages Router

Works with Pages Router as well. Import and use in any page component.

#### Vite + React

Add to your main component:

Troubleshooting

Issue: "Cannot find module 'a2ui-shadcn'"

• Ensure the package is installed: pnpm list a2ui-shadcn
• Restart your dev server

Issue: "Component not rendering"

• Check browser console for errors
• Verify your A2UI JSON messages are valid
• Ensure surfaceId matches in all messages

Issue: "Styling doesn't match"

• Run npx shadcn@latest init to set up shadcn/ui
• Check Tailwind CSS is properly configured

Next Steps

Now that you've installed a2ui-shadcn, continue to:

• Usage Guide - Learn basic API usage
• Components Reference - Explore all available components
• Interactive Playground - Try live examples