Appearance
Essential resources for modern UI development
This project is built around Next.js (App Router) and Material UI (MUI) with Emotion for styling—not Tailwind CSS or shadcn/ui. The references below are chosen to match that stack and accelerate work on NexusOrbit-style SaaS UIs.
What this codebase uses (quick map)
| Layer | Libraries |
|---|---|
| Framework | Next.js, React 19 |
| UI & layout | @mui/material, @mui/icons-material, @mui/material-nextjs |
| Styling | @emotion/react, @emotion/styled |
| Dates | @mui/x-date-pickers with date-fns |
| Icons (inline) | lucide-react (e.g. login form affordances) |
| Forms | react-hook-form, @hookform/resolvers + Zod |
| Feedback | Sonner toasts |
Use these docs first when extending dashboards, auth screens, or marketing layouts.
Official documentation (start here)
- Next.js Documentation — App Router,
metadata, Server Actions, and deployment. - React Documentation — Components, hooks, and concurrent patterns used across the app.
- MUI Material UI — Components, theming (
ThemeProvider), and thesxprop. - MUI + Next.js — Cache provider, SSR, and App Router integration.
- MUI X Date Pickers — Calendar/time inputs aligned with
@mui/x-date-pickersinpackage.json. - Emotion — How CSS-in-JS works alongside MUI.
Components, patterns, and examples
- MUI Templates & examples — Dashboard, marketing shells, and sign-in/sign-up layouts you can adapt (replace or merge with existing layout components).
- MUI Icons — Searchable set matching
@mui/icons-material.
For Lucide, see lucide.dev — useful for crisp stroke icons alongside MUI.
Forms, validation, and UX
- React Hook Form — Controlled performance and resolver integration.
- Zod — Schema validation aligned with
@/lib/zod-schemasand RHF resolvers.
Theming & design consistency
Your global theme lives under src/theme (consume via MUI ThemeProvider in layout). For reference:
- MUI Customization — Theme overrides, palette, typography.
- Default theme viewer — Explore tokens and breakpoints.
appConfig.colors.primary in src/config.ts is used in places like auth provider branding; keep product color and MUI theme in sync when you rebrand.
Email & rich content (optional UI-adjacent)
- React Email /
@react-email/components— Matches transactional templates undersrc/components/mails.
If you also use Tailwind or shadcn elsewhere
This repository does not depend on Tailwind CSS or shadcn/ui. Mixing them with MUI is possible but adds two styling models; for this codebase, prefer MUI + Emotion unless you are intentionally standardizing on a different stack in a fork.
Staying current
Pin major versions in package.json and read each library’s migration guide when upgrading (especially Next.js, MUI v7, and React 19). That keeps UI behavior and TypeScript types aligned with this project’s setup.