Aether Design System

Aether Design System

Aether Design System is an open-source Next.js and Tailwind CSS starter kit that functions as a foundational design system for React projects, bundling pre-configured integrations for forms, data fetching, dialogs, and route progress.

What is Aether Design System?

Aether Design System is a GitHub repository that serves as the building block for team projects, built on the ts-nextjs-tailwind-starter with the expansion pack. It takes a fresh Next.js TypeScript project and adds pre-wired modules: React Hook Form for form validation, React Query with react-hot-toast for data fetching and notifications, Zustand for dialog management, and NProgress for a route transition progress bar. The repository is maintained by Theodorus Clarence, Rizqi Tsani, and Wina Tungmiharja, and the design is mostly inspired by moon.io, adjusted to their needs.

Key Features

• Next.js + TypeScript — The base is ts-nextjs-tailwind-starter, giving a TypeScript Next.js project structure with Tailwind CSS.
• React Hook Form — Form handling and validation are pre-configured through the expansion pack.
• Toast with React Query — Data fetching with React Query and toast notifications via react-hot-toast.
• Dialog Manager with Zustand — Centralized modal/dialog state management using Zustand.
• NProgress — A top progress bar for page transitions, included as an expansion.
• Additional libraries — Repository topics list react-select, react-table, and TanStack Query/Table, indicating these are also part of the stack.
• Open source — The actual design system used for the creators' private projects, released publicly. It has 137 stars on GitHub.

Who is it for?

Aether is for Next.js developers who want a design system starter with common tooling already integrated. Teams that maintain multiple projects can use it as a consistent starting point. Developers already familiar with the expansion pack ecosystem will find it easy to extend. It's also suitable for anyone who wants to study how a real production design system is structured.

What can you do with it?

• Next.js developers: Scaffold a new application with TypeScript, Tailwind, forms, data fetching, dialogs, and progress bar without wiring them up manually.
• Team leads: Use it as the shared foundation for all projects, ensuring consistent design and architecture across repositories.
• Open source contributors: Fork the repository and customize it for your own needs, or contribute back to the project.

How does it work?

Aether is distributed as a GitHub template repository. You clone or fork it and run it as a standard Next.js project. The expansion pack layers add the pre-configured modules, so you can start building pages and components immediately.

Pricing

The repository is open-source and free to use. There are no paid tiers mentioned.

FAQ

Is Aether Design System free?

Yes, Aether Design System is open source and free to use. It is published on GitHub without a license mention, but the repository explicitly states that you can feel free to use it for your projects.

What is Aether Design System built with?

It is built on the ts-nextjs-tailwind-starter, which provides Next.js with TypeScript and Tailwind CSS. It also integrates React Hook Form, React Query, react-hot-toast, Zustand, NProgress, and other libraries from the expansion pack.

Who created Aether Design System?

The repository lists Theodorus Clarence, Rizqi Tsani, and Wina Tungmiharja as creators. The design is mostly inspired by moon.io, adjusted to their project needs.

Does Aether include form handling?

Yes, React Hook Form is one of the explicit expansions included in the design system.