---
title: "MacDockPro — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Dulaj Design · Navigation. About MacDockPro brings the iconic, ultra smooth macOS dock experience straight to your Framer projects."
canonical: "https://framer.elliotli.dev/component/macdockpro"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/MacDockPro

# MacDockPro

Smooth macOS dock experience

[View on Framer](https://framer.com/marketplace/components/macdockpro/?via=elliot-li)

![MacDockPro preview image 1](https://framer.elliotli.dev/og/component/macdockpro/e5f40baa884ede3d/1600x1200.jpg)

## Summary

About MacDockPro brings the iconic, ultra smooth macOS dock experience straight to your Framer projects.

## Description

## About

MacDockPro brings the iconic, ultra smooth macOS dock experience straight to your Framer projects. Drop it into your homepage, a navigation menu, or a portfolio showcase to give your visitors a premium, familiar desktop feel right inside their browser. It features a fully responsive scale system that dynamically shrinks or grows to fit beautifully onto any screen layout.

## What it does

It renders an interactive, customizable app dock that reacts fluidly as users interact with it. The component handles smooth hover states, features a realistic icon magnification effect that responds to cursor distance, and includes classic macOS style bouncing animations on entry. With built-in light, dark, and system auto themes, it seamlessly adapts to your site design out of the box.

## What you can customize

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-xszahw1c-kuxQhY33a76kSyZYBj73fTEVYOJ94q)

-   **Dock Items & Layout:** Manage your links and adjust the overall padding, icon size, and icon gap spacing.
    
-   **Magnification Physics:** Fine tune the magnification scale intensity and the cursor range that triggers the zoom effect.
    
-   **Theming & Colors:** Toggle between Light, Dark, or Auto themes. Customize backgrounds, borders, label backgrounds, and label text colors for both modes.
    
-   **Animations & Style:** Turn on or off the entry bounce effect, adjust the bounce delay, tweak the corner border radius, control the background blur amount, and change the label typography font.
    

## Great for

-   Portfolio and presentation sites
    
-   Modern SaaS and product landing pages
    
-   Creative agency websites
    
-   Interactive dashboards and portals
    
-   Minimalist navigation alternatives
    

## Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create.

## Need help?

Questions or feedback? Reach me anytime: [dulajdilshan766@gmail.com](mailto:dulajdilshan766@gmail.com) or on X @Dulajweb

## Rank history [How rankings work →](/terms#rankings)

-   All · #10605

## Details

- **Author**: Dulaj Design
- **Price**: $8.00
- **Published**: 2026-06-05
- **Updated**: 2026-08-24
- **Added**: 2026-06-05
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation