React Horizon

React Horizon#

Horizon UI is a modern, open-source admin dashboard template built with React and Chakra UI. It offers a sleek, intuitive design with a focus on developer experience and customization flexibility. Horizon UI stands out with its clean aesthetics, glass-morphism effects, and carefully crafted components that blend functionality with visual appeal.

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

Horizon UI is a modern, open-source admin dashboard template built with React and Chakra UI. It offers a sleek, intuitive design with a focus on developer experience and customization flexibility.

Key Features#

  • React & Chakra UI: Built with React and Chakra UI components for rapid development

  • Modern Design Language: Clean interface with glass-morphism effects and subtle gradients

  • Responsive Layout: Fully adaptive across all device sizes

  • Dark/Light Modes: Built-in theme switching with persistent settings

  • Authentication Pages: Sign-in, sign-up, and forgot password templates

  • Dashboard Examples: Main dashboard, NFT dashboard, and RTL examples

  • Customizable Components: Highly extensible component system

  • Data Visualization: Charts, statistics cards, and progress components

  • Tables & Forms: Pre-built table layouts and form components

  • Calendar: Basic calendar functionality

Technical Stack#

  • React.js (Core framework)

  • Chakra UI (Component library)

  • React Router (Navigation)

  • ApexCharts (Data visualization)

  • React Calendar (Calendar functionality)

  • React Table (Data tables)

  • React Icons (Icon library)

  • Framer Motion (Animations)

Getting Started#

# Clone repository
git clone https://github.com/horizon-ui/horizon-ui-chakra.git

# Navigate to project directory
cd horizon-ui-chakra

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

Project Structure#

/src
    /assets        # Static files (images, fonts, etc.)
    /components    # Reusable UI components
    /layouts       # Page layout templates
    /theme         # Chakra UI theme customization
    /variables     # Global variables and constants
    /views         # Page components
        /admin       # Admin pages
        /auth        # Authentication pages
        /rtl         # RTL layout pages
    App.jsx        # Main application component
    index.js       # Application entry point
    routes.js      # Application routes

Key Advantages#

  • Chakra UI integration for rapid development

  • Minimal and clean design aesthetic

  • Highly customizable with Chakra UI theme system

  • Well-structured codebase for easy extension

  • Glass-morphism effects for modern UI appearance

  • Strong focus on developer experience

  • Active community and regular updates

  • NFT dashboard included

Customization Options#

  • Theme colors and visual styles

  • Layout configurations

  • Component styling via Chakra UI

  • Dashboard widgets and arrangements

  • Navigation structure

  • Authentication flows

Note: This document provides an overview for implementing Horizon UI React. Actual implementation details may vary based on specific project requirements.