---
title: "Ui: snippets"
description: "smabar plugin reference: Ui: snippets"
canonical: "https://smabar.com/docs/plugin-ref-ui-snippets/"
lang: en
---

# Ui: snippets

> smabar plugin reference: Ui: snippets

Canonical HTML version: https://smabar.com/docs/plugin-ref-ui-snippets/ · Language: en · Publisher: smabar (https://smabar.com)

---

[Build my plugin](https://smabar.com/build-my-plugin.md) · [All references](https://smabar.com/docs/plugin-ref-index.md) · [Install the ZIP](https://smabar.com/docs/install-plugin-zip.md)

Source: smabar 1.5.0, revision `a019f2563965edc37a5e8d84742ea1ff2fa6f824`. [Export metadata and checksums](https://smabar.com/plugin-reference/export.json).

This is an offline reference. MCP calls quoted below describe the connected workflow; use the linked documents and create local files instead. Live state, installed plugins, available providers and the user's active theme are unknown. Never claim a live check.

Read with [styling](https://smabar.com/docs/plugin-ref-styling.md) and [examples](https://smabar.com/docs/plugin-ref-examples.md).

## wideFlyout

```json
"<section data-sb-flyout-width=\"wide\"><div class=\"sb-header\"><h3>Match report</h3></div><p>One continuous panel: the shell scrolls all content together when it exceeds the available height.</p><div class=\"sb-stack\"><article><h4>First half</h4><p>North opened the scoring.</p></article><article><h4>Second half</h4><p>South equalized in the final minute.</p></article></div></section>"
```

## screenFlyout

```json
"<section data-sb-flyout-width=\"16384\"><div class=\"sb-header\"><h3>Screen-width report</h3></div><p>One continuous panel: the shell scrolls all content together when it exceeds the available height.</p><div class=\"sb-stack\"><article><h4>First half</h4><p>North opened the scoring.</p></article><article><h4>Second half</h4><p>South equalized in the final minute.</p></article></div></section>"
```

## temporal

```json
"<form class=\"sb-stack\"><div class=\"sb-field-stack\"><label class=\"sb-label\" for=\"day\">Date</label><input class=\"sb-input\" id=\"day\" type=\"date\" data-sb-temporal data-field=\"day\" required></div><div class=\"sb-field-stack\"><label class=\"sb-label\" for=\"time\">Time</label><input class=\"sb-input\" id=\"time\" type=\"time\" data-sb-temporal data-field=\"time\" required></div><div class=\"sb-field-stack\"><label class=\"sb-label\" for=\"start\">Starts at</label><input class=\"sb-input\" id=\"start\" type=\"datetime-local\" data-sb-temporal data-field=\"start\" aria-describedby=\"start-hint\"><p class=\"sb-field__hint\" id=\"start-hint\">Your local date and time; leave unset if optional.</p></div><button type=\"submit\" class=\"sb-btn sb-btn-primary\" data-action=\"save\">Save schedule</button></form>"
```

## accordion

```json
"<div class=\"sb-accordion\"><details class=\"sb-accordion-item\" open><summary>Today</summary><div class=\"sb-accordion-item__body\"><div class=\"sb-inline\"><span>Partly cloudy</span><span class=\"sb-push sb-mono\">21°</span></div></div></details><details class=\"sb-accordion-item\"><summary>Tomorrow</summary><div class=\"sb-accordion-item__body\"><div class=\"sb-inline\"><span>Rain</span><span class=\"sb-push sb-mono\">17°</span></div></div></details></div>"
```

## cardFlyout

```json
"<div class=\"sb-header\"><span class=\"sb-icon-badge\"><span data-lucide=\"cloud-sun\"></span></span><span class=\"sb-title\">Weather</span><div class=\"sb-header-actions\"><button class=\"sb-btn sb-btn-icon\" data-action=\"refresh\" aria-label=\"Refresh\"><span data-lucide=\"refresh-cw\"></span></button></div></div><div class=\"sb-card\"><p class=\"sb-dim\">Partly cloudy, 21°</p></div>"
```

## contextMenu

```json
"<div class=\"sb-header\"><span class=\"sb-title\">Gallery</span></div><img class=\"sb-media\" src=\"https://example.com/photo.jpg\" alt=\"Beach\" title=\"Beach, July 2026\" data-context-items='[{\"action\":\"download\",\"value\":\"https://example.com/photo.jpg\",\"label\":\"Download image\",\"icon\":\"download\"},{\"separator\":true},{\"label\":\"Sort by\",\"icon\":\"list\",\"items\":[{\"action\":\"sort\",\"value\":\"name\",\"label\":\"Name\",\"checked\":true},{\"action\":\"sort\",\"value\":\"date\",\"label\":\"Date\",\"checked\":false}]},{\"action\":\"remove\",\"label\":\"Remove from album\",\"icon\":\"trash-2\",\"danger\":true}]'><p class=\"sb-muted\">Right-click a photo for its menu.</p>"
```

## dataTable

```json
"<div class=\"sb-table-wrap\"><table class=\"sb-table sb-table--hover\"><thead><tr><th scope=\"col\">Coin</th><th scope=\"col\" class=\"sb-table__num\">Price</th><th scope=\"col\" class=\"sb-table__num\">24h</th></tr></thead><tbody><tr><td>BTC</td><td class=\"sb-table__num\">$64,120</td><td class=\"sb-table__num sb-ok\">+2.4%</td></tr><tr><td>ETH</td><td class=\"sb-table__num\">$3,180</td><td class=\"sb-table__num sb-crit\">-1.1%</td></tr></tbody></table></div>"
```

## form

```json
"<div class=\"sb-header\"><h2 class=\"sb-title\">Location</h2></div><form class=\"sb-stack\"><div class=\"sb-field-stack\"><label class=\"sb-field__label\" for=\"city\">City</label><input id=\"city\" class=\"sb-input\" data-field=\"city\" placeholder=\"e.g. Berlin\" required aria-describedby=\"city-hint city-error\"><p class=\"sb-field__hint\" id=\"city-hint\">Used for local forecasts.</p><p class=\"sb-field__error\" id=\"city-error\">Enter a city.</p></div><div class=\"sb-field-stack\"><label class=\"sb-field__label\" for=\"note\">Note <span class=\"sb-meta\">· optional</span></label><textarea id=\"note\" class=\"sb-textarea\" data-field=\"note\" placeholder=\"Add context for this location…\" rows=\"3\"></textarea></div><div class=\"sb-cluster\"><button type=\"submit\" class=\"sb-btn sb-btn-primary\" data-action=\"save\">Save location</button><button type=\"button\" class=\"sb-btn sb-btn-ghost\" data-action=\"cancel\">Cancel</button></div></form>"
```

## heroTabs

```json
"<div class=\"sb-header\"><span class=\"sb-title\">Crypto</span><div class=\"sb-header-actions\"><button class=\"sb-btn sb-btn-icon\" data-action=\"refresh\" aria-label=\"Refresh\"><span data-lucide=\"refresh-cw\"></span></button></div></div><div class=\"sb-hero\"><small>Bitcoin</small><h1>$64,120</h1><span class=\"sb-badge sb-badge-success\">+2.4%</span></div><div class=\"sb-tabs\"><button class=\"sb-tab sb-active\" data-action=\"range:1d\">1D</button><button class=\"sb-tab\" data-action=\"range:7d\">7D</button></div>"
```

## heroTint

```json
"<div class=\"sb-hero\" style=\"--sb-accent-gradient:linear-gradient(135deg,#0ea5e9,#22c1a7);--sb-on-accent:#04141a\"><small>Frankfurt</small><h1>18°</h1><span class=\"sb-badge sb-badge-info\">rain</span></div>"
```

## kpiGrid

```json
"<div class=\"sb-header\"><span class=\"sb-title\">System</span><div class=\"sb-header-actions\"><button class=\"sb-btn sb-btn-icon\" data-action=\"details\" aria-label=\"Details\"><span data-lucide=\"settings\"></span></button></div></div><div class=\"sb-kpi-grid\"><div class=\"sb-kpi\"><span class=\"sb-kpi-value\">38%</span><span class=\"sb-kpi-label\">CPU</span></div><div class=\"sb-kpi\"><div class=\"sb-gauge\" data-chart=\"donut\" data-value=\"62\"><span>62%</span></div><span class=\"sb-kpi-label\">RAM</span></div></div><div class=\"sb-progress\"><span style=\"width: 38%\"></span></div>"
```

## listWithActions

```json
"<div class=\"sb-header\"><span class=\"sb-title\">Tracked</span></div><div class=\"sb-list\"><div class=\"sb-row\"><span data-lucide=\"bitcoin\"></span><span>Bitcoin</span><span class=\"sb-mono sb-push\">$64,120</span><button class=\"sb-btn sb-btn-icon sb-btn-danger\" data-action=\"remove\" data-value=\"bitcoin\" aria-label=\"Remove\"><span data-lucide=\"trash-2\"></span></button></div></div><p class=\"sb-meta\">Updated 2 minutes ago</p>"
```

## marqueeBadgeTile

```json
"<div class=\"sb-tile\" data-badge=\"2\"><span data-marquee style=\"max-width: 10rem\">Two new notifications with a long title</span></div>"
```

## mediaCarousel

```json
"<div class=\"sb-header\"><span class=\"sb-title\">Gallery</span></div><div class=\"sb-media\" data-carousel data-carousel-interval=\"6000\" aria-label=\"Gallery\"><img src=\"sb-asset:media/1.jpg\" alt=\"Gallery slide 1\"><img src=\"sb-asset:media/2.jpg\" alt=\"Gallery slide 2\"><img src=\"sb-asset:media/3.jpg\" alt=\"Gallery slide 3\"></div><p class=\"sb-muted\"><a href=\"https://example.com/gallery\">Open the full gallery</a></p>"
```

## modal

```json
"<button class=\"sb-btn sb-btn-danger\" commandfor=\"confirm-clear\" command=\"show-modal\">Clear history</button><dialog class=\"sb-modal sb-modal--sm\" id=\"confirm-clear\" aria-labelledby=\"confirm-clear-title\"><div class=\"sb-modal__header\"><h3 class=\"sb-modal__title\" id=\"confirm-clear-title\">Clear history?</h3></div><div class=\"sb-modal__body\"><p>All 128 entries are removed. This cannot be undone.</p></div><div class=\"sb-modal__footer\"><button class=\"sb-btn\" commandfor=\"confirm-clear\" command=\"close\">Cancel</button><button class=\"sb-btn sb-btn-danger\" commandfor=\"confirm-clear\" command=\"close\" data-action=\"clear-history\">Clear</button></div></dialog>"
```

## popoverMenu

```json
"<div class=\"sb-popover\"><button class=\"sb-btn sb-btn-ghost sb-btn-icon\" popovertarget=\"feed-menu\" aria-label=\"Menu\"><span data-lucide=\"ellipsis\"></span></button><div class=\"sb-popover__card sb-popover__card--right\" popover id=\"feed-menu\" role=\"menu\"><button class=\"sb-btn sb-btn-ghost\" data-action=\"refresh\" popovertarget=\"feed-menu\" popovertargetaction=\"hide\">Refresh now</button><button class=\"sb-btn sb-btn-ghost\" data-action=\"mark-read\" popovertarget=\"feed-menu\" popovertargetaction=\"hide\">Mark all read</button></div></div>"
```

## searchWithResults

```json
"<div class=\"sb-section\">Add a world clock</div><div class=\"sb-field\"><input class=\"sb-input\" data-field=\"query\" placeholder=\"City or country\"><button class=\"sb-btn\" data-action=\"search\">Search</button></div><div class=\"sb-reveal sb-active\"><div class=\"sb-list\"><div class=\"sb-row\"><span>Tokyo</span><button class=\"sb-btn sb-btn-icon sb-push\" data-action=\"add\" data-value=\"Asia/Tokyo\" aria-label=\"Add\"><span data-lucide=\"plus\"></span></button></div></div></div>"
```

## tabbedFlyout

```json
"<div class=\"sb-header\"><span class=\"sb-icon-badge\"><span data-lucide=\"cloud-sun\"></span></span><span class=\"sb-title\">Weather</span></div><div data-tabs><div class=\"sb-tabs\"><button class=\"sb-tab sb-active\" data-tab=\"today\">Today</button><button class=\"sb-tab\" data-tab=\"week\">Week</button></div><div data-tab-panel=\"today\"><div class=\"sb-hero\"><small>Berlin</small><h1>21°</h1></div></div><div data-tab-panel=\"week\"><div class=\"sb-list\"><div class=\"sb-row\"><span>Monday</span><span class=\"sb-muted\">19°</span></div></div></div></div>"
```

## twoLineTile

```json
"<div class=\"sb-tile\"><span class=\"sb-tile-stack\"><span class=\"sb-mono\">09:41</span><span>Mon, 23 Aug</span></span></div>"
```

## videoCard

```json
"<div class=\"sb-card\"><video class=\"sb-media sb-media-cover\" src=\"sb-asset:media/clip.mp4\" controls muted preload=\"metadata\"></video><p class=\"sb-muted\">Latest clip</p></div>"
```

## splitFlyout

```json
"<section data-sb-flyout-width=\"wide\"><div class=\"sb-header\"><h3>Sports</h3></div><div data-tabs><div class=\"sb-tabs\"><button class=\"sb-tab\" data-tab=\"games\">Games</button><button class=\"sb-tab\" data-tab=\"results\">Results</button><button class=\"sb-tab sb-active\" data-tab=\"table\">Table</button><button class=\"sb-tab\" data-tab=\"teams\">Teams</button></div><section data-tab-panel=\"games\" hidden><p>No games today.</p></section><section data-tab-panel=\"results\" hidden><p>North 2–1 South</p></section><section data-tab-panel=\"table\"><div class=\"sb-split\"><section><h4>League</h4><p>Round 12</p><p>The summary stays in place while the standings scroll.</p></section><section class=\"sb-scroll\" tabindex=\"0\" role=\"region\" aria-label=\"Standings\"><div class=\"sb-table-wrap\" tabindex=\"0\" role=\"region\" aria-label=\"Standings columns\"><table class=\"sb-table\"><thead><tr><th scope=\"col\">Team</th><th scope=\"col\">Played</th><th scope=\"col\">Points</th></tr></thead><tbody><tr><td>North</td><td>12</td><td>24</td></tr><tr><td>South</td><td>12</td><td>21</td></tr></tbody></table></div></section></div></section><section data-tab-panel=\"teams\" hidden><p>North · South</p></section></div></section>"
```