More Premium Hugo Themes Premium React Themes

Aether Design System

Aether serves as the building block for some of my team projects.

Aether Design System

Aether serves as the building block for some of my team projects.

Github Stars Github Stars: 138
Last Commit Last Commit: Jan 3, 2024 -
First Commit Created: Apr 29, 2023 -
default image

Overview:

The Aether Design System is a comprehensive design system that serves as the foundation for projects. It is built using the ts-nextjs-tailwind-starter with an expansion pack, and has been customized to meet the specific needs of the project. This design system is open-source and can be used for any project.

Features:

  • React Hook Form: Aether uses the React Hook Form library for form validation and handling.
  • Toast with React Query: This design system includes the Toast component integration with React Query for easy display of toast notifications.
  • Dialog Manager with Zustand: Aether incorporates the Zustand library for managing dialog component state, allowing for smooth and efficient dialog interactions.
  • NProgress: The NProgress library is integrated into Aether, providing a sleek and minimalistic loading progress indicator.

Installation:

To install the Aether Design System for your project, follow these steps:

  1. Clone the Aether repository:

    git clone https://github.com/{repository_url}
    
  2. Install the dependencies:

    cd aether
    npm install
    
  3. Start the development server:

    npm run dev
    
  4. You can now use the Aether Design System in your project by importing the necessary components.

Summary:

The Aether Design System is a versatile and customizable design system that can be used as a foundation for various projects. It incorporates several libraries and components to enhance the development process and improve user experience. With its open-source nature, it provides developers with a powerful tool to streamline their design and development workflow.