React Horizon PRO

React Horizon PRO#

Horizon UI React PRO is a premium admin dashboard template built with React and Chakra UI. It expands upon the free version with additional components, advanced features, premium applications, and professional support. The PRO version offers a comprehensive solution for creating sophisticated, visually stunning admin interfaces with maximum flexibility and minimal development time.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Horizon UI React PRO is a premium admin dashboard template built with React and Chakra UI

Key Features#

  • Extensive Component Library: 150+ Chakra UI-based components, all fully customizable

  • Multiple Dashboard Variations: Main, NFT, RTL, and additional specialized dashboards

  • Premium Applications: Advanced Calendar, Kanban board, Data Tables, and File Manager

  • Advanced Authentication: Complete authentication system with role-based access

  • E-commerce Components: Product listings, checkout flows, pricing tables, and order tracking

  • Premium Data Visualization: Complex chart types, maps, and interactive data displays

  • Advanced Forms: Multi-step forms, form wizards, validation, and specialized inputs

  • Enhanced Tables: Complex sorting, filtering, pagination, and export capabilities

  • Premium UI Elements: Glass-morphism, advanced cards, and premium visual effects

  • Multi-language Support: Built-in internationalization framework

  • RTL Support: Complete right-to-left layout compatibility

  • Design Files: Figma design files included

Technical Stack#

  • React.js (Latest version)

  • Chakra UI (Premium components)

  • React Router (Comprehensive routing)

  • ApexCharts/Recharts (Advanced visualizations)

  • React Table (Complex data handling)

  • React DnD (Drag-and-drop functionality)

  • Full Calendar (Advanced event management)

  • React Hook Form (Advanced form handling)

  • Yup (Form validation)

  • Framer Motion (Advanced animations)

  • i18next (Internationalization)

Getting Started#

# Obtain license and unzip the sources
unzip react-horizon-pro.zip

# Navigate to project directory
cd react-horizon-pro

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

Project Structure#

/src
    /assets           # Static assets (images, icons, fonts)
    /components       # Reusable UI components
        /card           # Card components
        /charts         # Chart components
        /dataDisplay    # Data display components
        /form           # Form components
        /icons          # Custom icons
        /layout         # Layout components
        /menu           # Menu components
        /modal          # Modal components
        /navbar         # Navigation components
        /rtl            # RTL components
        /sidebar        # Sidebar components
        /tables         # Table components
    /contexts         # React context providers
    /layouts          # Page layout variations
    /theme            # Chakra UI theme customization
    /utils            # Utility functions
    /variables        # Global variables and constants
    /views            # Page components
        /admin          # Admin pages
        /auth           # Authentication pages
        /applications   # Premium applications
        /ecommerce      # E-commerce pages
        /rtl            # RTL pages
    /services         # API services and integrations
    /hooks            # Custom React hooks
    /locales          # Internationalization files
    App.jsx           # Main application component
    index.js          # Application entry point
    routes.js         # Application routes

Premium Features#

  • Advanced theme configurator with live preview

  • User management system

  • Role-based access control

  • Advanced notification system

  • Interactive documentation

  • Advanced state management

  • Dark mode with persistent settings

  • Data export functionality

  • Print-optimized layouts

  • Advanced responsive behaviors

  • Accessibility compliance features

Note: This document provides a comprehensive kickoff reference for implementing Horizon UI React PRO. Actual implementation details may vary based on specific project requirements and license terms.