Skip to content

A reverse-engineered version of macOS dark-themed home screen with interactive UI components, a draggable/resizable system window, and simplified native-like features.

Notifications You must be signed in to change notification settings

kr4chinin/macos-system-window

Repository files navigation

macOS System Window 💻

A simplified recreation of macOS's dark-themed home screen, featuring functional UI components and a special emphasis on the system window. This window is fully interactive, allowing users to effortlessly drag, resize, and utilize various other features typically found in native macOS window components. Vercel Deployment.

🚨 The background image has a really high resolution, which might result in a slight delay while the page fully loads. Please allow a few seconds for optimal display.

Home screen

Introduction

Run the application

npm install
npm start

The main objective of this project was to meticulously reverse-engineer one of macOS's most renowned interfaces, all without relying on any pre-existing templates. My aim was to preserve the core functionality of the user interface as faithfully as possible but simplify it where necessary.

Highlighted features of this project include:

  • A draggable and resizable system window, which offers a pseudo full-screen mode, the ability to resize and hide the sidebar (automatically hidden when the modal reaches a certain minimal size, and restored upon returning to the normal size);
  • Fold/unfold directories, choose different directories;

Hide navbar on resize, fold/unfold dirs functionality

  • Functional navbar with dynamic dropdown content options;

Navbar dropdowns

  • Interactive controls for navigating back and forward within directories;
  • Dock with informative tooltips. Clicking on the Finder icon will reopen the modal if it was previously closed.

Tech stack

  • React + Typescript, Vite;
  • Mantine;
  • styled-components;
  • react-rnd;
  • react-resizable-panels;
  • faker.js.
Another home screen view with different modal size

About

A reverse-engineered version of macOS dark-themed home screen with interactive UI components, a draggable/resizable system window, and simplified native-like features.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published