---
title: "Mac Note Card — Free Framer component · Best of Framer"
description: "Free Framer component · by Shuvo Ahmed · Cards. Best Note Card Component"
canonical: "https://framer.elliotli.dev/component/mac-note-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Mac Note Card

# Mac Note Card

Best Note Card Component

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

![Mac Note Card preview image 1](https://framer.elliotli.dev/og/component/mac-note-card/bcc14e5af1b661f6/1600x1940.jpg)

## Summary

Best Note Card Component

## Description

## **Ticker – macOS Style Note Widget**

This is a realistic macOS "Notes" app-inspired UI component, designed to be used as a polished, interactive note widget in portfolios, product mockups, landing pages, or presentations. It closely mirrors the look and feel of the native macOS Notes app — complete with a dark background, traffic-light window control buttons (red, yellow, green), a top toolbar with icons, and a timestamp.

**Editable Properties:**

-   **Title** – Customize the note's header/title text (default: "New Note")
    
-   **Content** – Fully customizable body text for the note
    
-   **Timestamp** – Set a custom date/time string, or leave blank to auto-generate it
    
-   **Show/Hide Timestamp** – Toggle whether the timestamp is visible or hidden
    
-   **Background Color** – Change the note's background color (default: `#1C1C1E`)
    
-   **Border Color** – Customize the border color (default: `#2C2C2E`)
    
-   **Title Color** – Change the color of the title text (default: white/`#FFFFFF`)
    
-   **Timestamp Color** – Set a separate color for the timestamp text
    
-   **Toolbar Icon Color** – Customize the color of the top toolbar icons
    
-   **Window Controls (Show/Hide)** – Toggle the visibility of the red/yellow/green dot buttons in the top-left
    
-   **Toolbar Icons (Show/Hide)** – Toggle the visibility of the text, list, table, and attachment icons in the toolbar
    
-   **Border Radius** – Adjust the roundness of the note's corners via a slider (default: 6px)
    
-   **Shadow** – Turn the drop shadow effect on or off
    
-   **Title Font** – Select a custom font for the title (default: Inter)
    

**Interactive Features:**

1.  **Free Text Editing** – Users can type anything they want directly inside the note, just like the real macOS Notes app — no restrictions, fully editable content area.
    
2.  **Remove/Close on Click** – Clicking the red circle button in the top-left (the traffic-light close button) removes the note entirely, replicating the feel of closing a window on macOS.
    

## Try it for freeeeeeeee!!

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

-   All · #2270

## Details

- **Author**: Shuvo Ahmed
- **Published**: 2026-08-07
- **Updated**: 2026-08-07
- **Added**: 2026-08-07
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator