[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs":671,"blog-author-\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs":1039,"i-material-symbols:arrow-back-rounded":1051},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1025,"date":1026,"description":1027,"draft":1028,"editorsPick":1028,"extension":1029,"featured":1028,"image":1030,"imageAlt":1031,"meta":1032,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1033,"seo":1034,"stem":1035,"tags":1036,"__hash__":1038},"blog\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs.md","Create an Easy Slider for an E-commerce Dashboard With Swiper.js","Anda Mary","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-apply-css-replacing-complex-classes\u002Fauthor.jpeg",null,"anda-mary",{"type":679,"value":680,"toc":1016},"minimark",[681,685,688,694,707,712,715,718,722,725,747,752,758,769,778,781,787,793,821,841,847,853,873,879,885,895,906,916,921,928,934,963,968,971,977,983,989,994,998],[682,683,684],"p",{},"Easy access to a product often leads to an increase in demand for it. In an e-commerce website, visibility means a lot. Products that are easily seen usually have higher sales rates. Several React components make it simple for goods and products to be easily seen on an e-commerce site. These components include FullPage.js, Swiper.js, ReactSwipable, and more.",[682,686,687],{},"In this article, we’ll learn what Swiper.js is, highlight its functionalities, and explore a potential use case in an e-commerce website. This information is important because it makes developers aware of useful tools like Swiper.js that easily implement amazing UI features.",[682,689,690],{},[691,692,693],"strong",{},"Prerequisites:",[682,695,696,697,700,701,703,704,706],{},"To follow this tutorial, you’ll need the following:",[698,699],"br",{},"\n• A clear understanding of frontend technologies, i.e. HTML, CSS, and JavaScript.",[698,702],{},"\n• Node.js installed on your computer.",[698,705],{},"\n• Basic knowledge of React.js.",[708,709,711],"h2",{"id":710},"what-is-swiperjs","What is Swiper.js?",[682,713,714],{},"The best on the market, Swiper is a cutting-edge free mobile carousel component with impressive native behavior and hardware-accelerated transitions. It’s intended to be used in mobile websites, mobile web apps, and mobile native\u002Fhybrid apps. Swiper is a modern touch slider focused only on modern apps\u002Fplatforms to provide the best experience, as well as simplicity. It’s available for most popular frameworks like React, Vue, Angular, and so on. In addition, Swiper is a part of Framework 7, a comprehensive framework for building iOS and Android apps, and it’s also a default slider component in the Ionic Framework. To use Swiper.js, you must install it with its npm package:",[682,716,717],{},"npm I swiper",[708,719,721],{"id":720},"use-cases-for-swiperjs","Use Cases for Swiper.js",[682,723,724],{},"Swiper.js is mostly used for sliders or carousels. The following are some of the use cases of Swiper.js:",[726,727,728,735,741],"ul",{},[729,730,731,734],"li",{},[691,732,733],{},"Image gallery organization:"," With Swiper.js, images and contents are easily managed. Developers only need to install Swiper.js to use any of its properties.",[729,736,737,740],{},[691,738,739],{},"Multiple-display navigation:"," Swiper.js' exceptional multiple-display navigation implementation allows users to view more content without clicking or scrolling.",[729,742,743,746],{},[691,744,745],{},"Dashboard animation:"," A dashboard should be interactive and have a good display. With Swiper.js, dashboard animation is very easy, from display to interaction.",[748,749,751],"h3",{"id":750},"styling-the-dashboard","Styling the Dashboard",[682,753,754,755,757],{},"By default, Swiper React uses the core version of Swiper without any additional modules. Therefore, to use any other Swiper.js modules, they need to be installed.",[698,756],{},"\nSwiper.js must be installed in the application before we start working on the dashboard UI. To do this, let’s run the accompanying command in the working directory of the application:",[759,760,765],"pre",{"className":761,"code":763,"language":764},[762],"language-text","npm install swiper\n","text",[766,767,763],"code",{"__ignoreMap":768},"",[682,770,771],{},[772,773,777],"a",{"href":774,"rel":775},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=858c4e881d",[776],"nofollow","Save this code",[682,779,780],{},"After Swiper.js has been successfully installed in the application environment, we need to import the required methods and files into the \"App.js\" component. In this instance, we’re importing the following:",[759,782,785],{"className":783,"code":784,"language":764},[762],"import React from \"react\";\n\u002F\u002F Import Swiper React components\nimport { Swiper, SwiperSlide } from \"swiper\u002Freact\";\nimport { Navigation, Autoplay } from \"swiper\";\n\n\u002F\u002F Import Swiper styles\nimport \"swiper\u002Fcss\";\nimport \"swiper\u002Fcss\u002Fpagination\";\nimport \".\u002Fstyles.css\";\n\n\u002F\u002F Import required modules\nimport { Pagination } from \"swiper\";\n",[766,786,784],{"__ignoreMap":768},[682,788,789],{},[772,790,777],{"href":791,"rel":792},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=c0104eb42f",[776],[682,794,795,796,799,800,803,804,807,808,811,812,814,815,820],{},"In the above code snippet, we imported React, Swiper, and SwiperSlide from ",[766,797,798],{},"swiper\u002Freact",", Navigation and Autoplay from “Swiper,” ",[766,801,802],{},"swiper\u002Fcss, swiper\u002Fcss\u002Fpagination",", ",[766,805,806],{},"styles.css"," (our custom CSS stylesheet), and Pagination from ",[766,809,810],{},"swiper",".",[698,813],{},"\nOur stylesheet is located in the 'styles.css' file that we imported. The styles in this article are contained in the stylesheet. (",[772,816,819],{"href":817,"rel":818},"https:\u002F\u002Fgist.github.com\u002Fprince-joel\u002Fede986dba221767999f27352b886bb51",[776],"Gist",")",[682,822,823,824,827,828,831,832,834,835,837,838,840],{},"Now, we’ll create a new variable called ",[766,825,826],{},"pagination"," inside the ",[766,829,830],{},"App.js"," component, which will be used as the Swiper component's pagination option.",[698,833],{},"\nThe ",[766,836,826],{}," component shows an active slide and a button that can be clicked to move between slides. The ",[766,839,826],{}," is made using the following code:",[759,842,845],{"className":843,"code":844,"language":764},[762],"const pagination = {\n  clickable: true,\n  renderBullet: function (index: number, className: string) {\n    return '\u003Cspan class=\"' + className + '\">' + (index + 1) + \"\u003C\u002Fspan>\";\n  },\n};\n",[766,846,844],{"__ignoreMap":768},[682,848,849],{},[772,850,777],{"href":851,"rel":852},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=2ecb488f82",[776],[682,854,855,856,858,859,861,862,811,866,868,869,872],{},"Next, we need to create the returned content of the ",[766,857,830],{}," component. A hero section with a full-width slider, a 3-column grid slider, and a 3-column grid product gallery make up this content.",[698,860],{},"\nThe complete code is available here: ",[772,863,819],{"href":864,"rel":865},"https:\u002F\u002Fgist.github.com\u002Fprince-joel\u002F91458840e0586f7661e559919373b89a",[776],[698,867],{},"\nIn the gist, you can see that the ",[766,870,871],{},"Swiper"," component was used various times, as shown in this example:",[759,874,877],{"className":875,"code":876,"language":764},[762],"\u003CSwiper\n  pagination={pagination}\n  autoplay={{\n    delay: 4000,\n    disableOnInteraction: true,\n  }}\n  modules={[Navigation, Autoplay, Pagination]}\n>\n  \u003CSwiperSlide>\n    \u003Cimg src={img1} loading=\"lazy\" alt=\"Slide 1\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img2} loading=\"lazy\" alt=\"Slide 2\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img3} loading=\"lazy\" alt=\"Slide 3\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img4} loading=\"lazy\" alt=\"Slide 4\" \u002F>\n  \u003C\u002FSwiperSlide>\n\u003C\u002FSwiper>\n",[766,878,876],{"__ignoreMap":768},[682,880,881],{},[772,882,777],{"href":883,"rel":884},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=def04f9998",[776],[682,886,887,888,890,891,894],{},"The code snippet above shows the component for the hero section full-width slider. The ",[766,889,871],{}," component wraps a group of ",[766,892,893],{},"SwiperSlide"," components and accepts options, including the following:",[726,896,897,900,903],{},[729,898,899],{},"Pagination: an object that returns a component for pagination.",[729,901,902],{},"Autoplay: an object used to set the amount of time it takes for the slide to change to the next slide automatically. We can also set the slide to stop changing if a user interacts with it.",[729,904,905],{},"Modules: an array of methods used in a particular Swiper slide.",[682,907,908,909,911,912,915],{},"The ",[766,910,893],{}," components then wrap the main content that each slide show displays. In this case, we only wanted to display images, so we passed the ",[766,913,914],{},"img"," tag as a child to this component. This can be seen in the image below:",[682,917,918],{},[914,919],{"alt":768,"src":920},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs\u002Fimg-001.png",[682,922,923,924,927],{},"Another example is the effect-card slider. This slider arranges the ",[766,925,926],{},"SwiperSlider"," as a stack of cards, and users can use the mouse to shuffle between the stack. We can implement the effect-card slider with this format:",[759,929,932],{"className":930,"code":931,"language":764},[762],"\u003CSwiper\n  effect={\"cards\"}\n  grabCursor={true}\n  modules={[EffectCards]}\n  className=\"mySwiper center-main\"\n>\n  \u003CSwiperSlide>\n    \u003Cimg src={img5} loading=\"lazy\" alt=\"Product 1\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img6} loading=\"lazy\" alt=\"Product 2\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img7} loading=\"lazy\" alt=\"Product 3\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img8} loading=\"lazy\" alt=\"Product 4\" \u002F>\n  \u003C\u002FSwiperSlide>\n\u003C\u002FSwiper>\n",[766,933,931],{"__ignoreMap":768},[682,935,936,940,941,944,945,948,949,952,953,956,957,811,960,962],{},[772,937,777],{"href":938,"rel":939},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=422c4fbe13",[776],"In the code snippet above, we used the ",[766,942,943],{},"cards"," options for the ",[766,946,947],{},"effect"," props, and we also set the ",[766,950,951],{},"grabCursor"," props to true, which enables users to drag each slide into view. We must also set the ",[766,954,955],{},"modules"," props to ",[766,958,959],{},"EffectCards",[698,961],{},"\nThe image below illustrates the outcome:",[682,964,965],{},[914,966],{"alt":768,"src":967},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs\u002Fimg-002.png",[682,969,970],{},"Another example is the 3-column slider. We have a div containing 3 similar sliders with this format:",[759,972,975],{"className":973,"code":974,"language":764},[762],"\u003CSwiper\n  navigation={true}\n  autoplay={{ delay: 2500, disableOnInteraction: false }}\n  modules={[Navigation, Autoplay]}\n  className=\"mySwiper\"\n>\n  \u003CSwiperSlide>\n    \u003Cimg src={img9} loading=\"lazy\" alt=\"Product 1\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img5} loading=\"lazy\" alt=\"Product 2\" \u002F>\n  \u003C\u002FSwiperSlide>\n  \u003CSwiperSlide>\n    \u003Cimg src={img6} loading=\"lazy\" alt=\"Product 3\" \u002F>\n  \u003C\u002FSwiperSlide>\n\u003C\u002FSwiper>\n",[766,976,974],{"__ignoreMap":768},[682,978,979],{},[772,980,777],{"href":981,"rel":982},"https:\u002F\u002Fmaryanda.pieces.cloud\u002F?p=bc6346bbee",[776],[682,984,985,986,988],{},"In this case, we are passing more content than just images into the ",[766,987,893],{}," component. Here is what the result looks like:",[682,990,991],{},[914,992],{"alt":768,"src":993},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs\u002Fimg-003.png",[708,995,997],{"id":996},"conclusion","Conclusion",[682,999,1000,1001,1003,1004,1009,1010,1015],{},"In this article, we learned about Swiper.js and discussed different use cases for Swiper.js.",[698,1002],{},"\nWe also demonstrated how to use Swiper.js to create an e-commerce React application. Are you interested in using Swiper.js to build your application, make improvements, or look over the sample code? Check out the ",[772,1005,1008],{"href":1006,"rel":1007},"https:\u002F\u002Fgithub.com\u002Fprince-joel\u002FChrisSwiper",[776],"Repo",". You can access the app ",[772,1011,1014],{"href":1012,"rel":1013},"https:\u002F\u002Fchris-swiper.vercel.app\u002F",[776],"here",". Happy coding!",{"title":768,"searchDepth":1017,"depth":1017,"links":1018},2,[1019,1020,1024],{"id":710,"depth":1017,"text":711},{"id":720,"depth":1017,"text":721,"children":1021},[1022],{"id":750,"depth":1023,"text":751},3,{"id":996,"depth":1017,"text":997},"Software Development","2023-01-04T00:00:00.000Z","In this article, we’ll learn what Swiper.js is, highlight its functionalities, and explore a potential use case in an e-commerce website. Let's jump in!",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs\u002Fhero.jpeg","decorative cover image showing swiper.js",{},"\u002Fblog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs",{"title":673,"description":1027},"blog\u002Fcreate-an-easy-slider-for-an-e-commerce-dashboard-with-swiperjs",[1037],"javascript-8","w5TH0AYXx4PeDWktlJ4l4U3nP0uxYsDLAY6eJ8m9JjM",{"id":1040,"title":674,"body":1041,"description":768,"draft":1028,"extension":1029,"meta":1045,"navigation":32,"path":1046,"photo":1047,"photoAlt":676,"seo":1048,"stem":1049,"__hash__":1050},"authors\u002Fauthors\u002Fanda-mary.md",{"type":679,"value":1042,"toc":1043},[],{"title":768,"searchDepth":1017,"depth":1017,"links":1044},[],{},"\u002Fauthors\u002Fanda-mary","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fplaceholder.svg",{"title":674,"description":768},"authors\u002Fanda-mary","cBNhIpse3oRuDZPUOA78gprxI9PTqVznSj2fvYhkcEU",{"left":1052,"top":1052,"width":1053,"height":1053,"rotate":1052,"vFlip":1028,"hFlip":1028,"body":1054},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]