Installation

This guide will walk you through installing Echo Components in your project using the Shadcn CLI.

Prerequisites

Before installing Echo Components, make sure you have:

A React or Next.js project
Shadcn CLI installed
Echo SDK already set up in your project

Installing Components

Using Shadcn CLI

Echo Components are distributed through our custom registry at echo-components.com. You can install them using the Shadcn CLI:

# Install Echo Account component for React
pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-react.json

# Install Echo Account component for Next.js
pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-next.json

Manual Installation

If you prefer to install components manually, you can:

Visit echo-components.com
Browse the available components
Copy the component code directly into your project
Install any required dependencies

Dependencies

Echo Components require several dependencies that will be automatically installed:

Required Dependencies

@radix-ui/react-popover - For popover functionality
@radix-ui/react-skeleton - For loading states
@radix-ui/react-avatar - For user avatars
@radix-ui/react-tooltip - For tooltips
autonumeric - For money input formatting

Echo SDK Dependencies

Make sure you have the appropriate Echo SDK installed:

# For React projects
npm install @merit-systems/echo-react-sdk

# For Next.js projects
npm install @merit-systems/echo-next-sdk

Project Setup

1. Configure Shadcn

If you haven't already, initialize Shadcn in your project:

npx shadcn@latest init

2. Install Base Dependencies

Echo Components build on top of Shadcn's base components. Make sure you have the required base components:

# Install required base components
npx shadcn@latest add popover
npx shadcn@latest add skeleton
npx shadcn@latest add avatar
npx shadcn@latest add input
npx shadcn@latest add tooltip

3. Set Up Echo Provider

Make sure your Echo provider is properly configured in your app:

// For React apps
import { EchoProvider } from '@merit-systems/echo-react-sdk';

function App() {
  return (
    <EchoProvider>
      {/* Your app content */}
    </EchoProvider>
  );
}

// For Next.js apps
import { EchoProvider } from '@merit-systems/echo-next-sdk';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <EchoProvider>
          {children}
        </EchoProvider>
      </body>
    </html>
  );
}

Verification

After installation, you can verify that Echo Components are working by adding a simple Echo Account component to your app:

import { EchoAccount } from '@/components/echo-account-react';

export default function MyApp() {
  return (
    <div>
      <h1>My Echo App</h1>
      <EchoAccount />
    </div>
  );
}

If the component renders without errors and shows the Echo account interface, your installation is successful!

Troubleshooting

Common Issues

Component not found errors:

Make sure you've installed the Echo SDK
Verify that the Echo provider is wrapping your app
Check that all required base components are installed

Styling issues:

Ensure Tailwind CSS is properly configured
Check that your tailwind.config.js includes the component paths
Verify that CSS variables for theming are set up

TypeScript errors:

Make sure TypeScript is configured to resolve the component paths
Check that all type definitions are properly imported

Getting Help

If you encounter issues:

Check the Echo Components Registry for the latest component versions
Review the Shadcn documentation for base component setup
Join our Discord community for support

Installation

On this page