Echo Components

Echo provides a comprehensive set of pre-built UI components through our Shadcn Components Registry. These components are specifically designed for Echo applications and include everything you need to build beautiful, functional user interfaces.

What are Echo Components?

Echo Components are pre-built React components that integrate seamlessly with the Echo ecosystem. They provide:

• Ready-to-use UI elements - Drop-in components for common Echo app patterns
• Echo integration - Built-in support for Echo authentication, billing, and user management
• Consistent design - Unified design system across all Echo applications
• Accessibility - WCAG compliant components out of the box
• Customization - Easy theming and styling options

Available Components

Echo Account Components

• Echo Account Button - Complete user account management with balance display, top-up functionality, and user profile
• Echo Account (React) - React-specific implementation with hooks integration
• Echo Account (Next.js) - Next.js optimized version with server-side rendering support

UI Components

• Echo Button - Enhanced button component with Echo-specific variants
• Money Input - Specialized input for handling monetary values with proper formatting
• Echo Logo - Branded logo component with light/dark mode support

Quick Start

To get started with Echo Components, 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

When to Use Echo Components

Use Echo Components when you want to:

• Speed up development - Skip building common UI patterns from scratch
• Ensure consistency - Maintain design consistency across Echo applications
• Focus on business logic - Spend time on your app's unique features instead of UI
• Leverage Echo integration - Get built-in support for Echo's authentication and billing systems

Next Steps

• Installation Guide - Learn how to set up Echo Components in your project
• Echo Account Component - Complete guide to the Echo Account component
• UI Components - Overview of available UI components
• Customization - How to customize and theme Echo Components