<titledata-rh="true">Special Components | SketchyBar</title><metadata-rh="true"name="twitter:card"content="summary_large_image"><metadata-rh="true"property="og:url"content="https://felixkratz.github.io//SketchyBar/config/components"><metadata-rh="true"name="docusaurus_locale"content="en"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docusaurus_version"content="current"><metadata-rh="true"name="docusaurus_tag"content="docs-default-current"><metadata-rh="true"name="docsearch:version"content="current"><metadata-rh="true"name="docsearch:docusaurus_tag"content="docs-default-current"><metadata-rh="true"property="og:title"content="Special Components | SketchyBar"><metadata-rh="true"name="description"content="Components -- Special Items with special properties"><metadata-rh="true"property="og:description"content="Components -- Special Items with special properties"><linkdata-rh="true"rel="icon"href="/SketchyBar/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://felixkratz.github.io//SketchyBar/config/components"><linkdata-rh="true"rel="alternate"href="https://felixkratz.github.io//SketchyBar/config/components"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://felixkratz.github.io//SketchyBar/config/components"hreflang="x-default"><linkrel="stylesheet"href="/SketchyBar/assets/css/styles.d31a9c85.css">
Currently there are the components (more details in the corresponding sections below):</p><ul><li><em>graph</em>: showing a graph,</li><li><em>space</em>: representing a mission control space</li><li><em>bracket</em>: brackets together other items</li><li><em>alias</em>: a default menu bar item</li></ul><h3class="anchor anchorWithStickyNavbar_mojV"id="data-graph----draws-an-arbitrary-graph-into-the-bar">Data Graph -- Draws an arbitrary graph into the bar<aclass="hash-link"href="#data-graph----draws-an-arbitrary-graph-into-the-bar"title="Direct link to heading"></a></h3><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add graph </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">position</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">width </span><spanclass="token keyword"style="font-style:italic">in</span><spanclass="token plain"> points</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>Additional graph properties:</p><table><thead><tr><thalign="center"><property<!---->></th><thalign="center"><value<!---->></th><thalign="center">default</th><th>description</th></tr></thead><tbody><tr><tdalign="center"><code>graph.color</code></td><tdalign="center"><code><argb_hex></code></td><tdalign="center"><code>0xcccccc</code></td><td>Color of the graph line</td></tr><tr><tdalign="center"><code>graph.fill_color</code></td><tdalign="center"><code><argb_hex></code></td><tdalign="center"><code>0xcccccc</code></td><td>Fill color of the graph</td></tr><tr><tdalign="center"><code>graph.line_width</code></td><tdalign="center"><code><float></code></td><tdalign="center"><code>0.5</code></td><td>Width of the line in points</td></tr></tbody></table><p>Push data points into the graph via:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --push </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">data point</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H
The space component has additional variables available in <em>scripts</em>:</li></ul><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token variable"style="color:rgb(191, 199, 213)">$SELECTED</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"></span><spanclass="token variable"style="color:rgb(191, 199, 213)">$SID</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"></span><spanclass="token variable"style="color:rgb(191, 199, 213)">$DID</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>where <em>$SELECTED</em> has the value <em>true</em> if the associated space is selected and <em>false</em> if the selected space is not selected, while
<code>$SID</code> holds the space id and <code>$DID</code> the display id.</p><p>By default the space component invokes the following script:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --set </span><spanclass="token variable"style="color:rgb(191, 199, 213)">$NAME</span><spanclass="token plain"> icon.highlight</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token variable"style="color:rgb(191, 199, 213)">$SELECTED</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>which you can freely configure to your liking by supplying a different script to the space component:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --set </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token assign-left variable"style="color:rgb(191, 199, 213)">script</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">script/path</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>For performance reasons the space script is only run on change.</p><h3class="anchor anchorWithStickyNavbar_mojV"id="item-bracket----group-items-in-eg-colored-sections">Item Bracket -- Group Items in e.g. colored sections<aclass="hash-link"href="#item-bracket----group-items-in-eg-colored-sections"title="Direct link to heading"></a></h3><p>It is possible to bracket together items via the command (see <ahref="https://github.com/FelixKratz/SketchyBar/discussions/12#discussioncomment-1455842"target="_blank"rel="noopener noreferrer">this</a> discussion for an example):</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add bracket </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass=
set properties for the bracket, just as for any item or component. Brackets currently only support all background features.
E.g., if I wanted a colored background around <em>all</em> my space components (which are named <em>code</em>, <em>writing</em>, <em>reading</em> and <em>entertainment</em>) I would set it up like this:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add bracket primary_spaces code </span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">\</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"> writing </span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">\</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"> reading </span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">\</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"> entertainment </span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">\</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"></span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">\</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"> --set primary_spaces background.color</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token plain">0xffffffff </span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">\</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"> background.corner_radius</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token number"style="color:rgb(247, 140, 108)">4</span><spanclass="token plain"></span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">\</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"> background.height</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token number"style="color:rgb(247, 140, 108)">20</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>this draws a white background below all my space components. I plan to expand the capability of item brackets significantly in the future.</p><h3class="anchor anchorWithStickyNavbar_mojV"id="item-alias----mirror-items-of-the-original-macos-status-bar-into-sketchybar">Item Alias -- Mirror items of the original macOS status bar into sketchybar<aclass="hash-link"href="#item-alias----mirror-items-of-the-original-macos-status-bar-into-sketchybar"title="Direct link to heading"></a></h3><p>It is possible to create an alias for default menu bar items (such as MeetingBar, etc.) in sketchybar. The default menu bar can be set to autohide and this should still work.
Aliases currently are not clickable but can be modified with all the options available for simple items.</p><p>The command can be overloaded by providing a <em>window_owner</em> and a <em>window_name</em></p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add </span><spanclass="token builtin class-name"style="color:rgb(255, 203, 107)">alias</span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">window_owner</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain">,</span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">window_name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">position</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>this way the default system items can also be slurped into sketchybar, e.g.:</p><ul><li>"Control Center,Bluetooth"</li><li>"Control Center,WiFi"</li></ul><p>Or the individual widgets of <ahref="https://github.com/exelban/stats"target="_blank"rel="noopener noreferrer">Stats</a>:</p><ul><li>"Stats,CPU_Mini"</li><li>etc...</li></ul><p>All further default menu items currently available on your system can be found via the command:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --query default_menu_items</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>You can override the color of an alias via the property (HEAD only):</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --set </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"> alias.color</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="t
