[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fintroduction-to-uikit":671,"blog-author-\u002Fblog\u002Fintroduction-to-uikit":1439,"i-material-symbols:arrow-back-rounded":1451},{"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":1426,"buttonUrl":1426,"category":1427,"date":1428,"description":1429,"draft":1430,"editorsPick":1430,"extension":1431,"featured":1430,"image":1432,"imageAlt":1433,"meta":1434,"navigation":32,"ogImage":1426,"ogImageAlt":1426,"path":1435,"seo":1436,"stem":1437,"tags":1426,"__hash__":1438},"blog\u002Fblog\u002Fintroduction-to-uikit.md","Introduction to UIkit","Gabriel Delight","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fauthor.jpeg","Gabriel Delight.","gabriel-delight",{"type":679,"value":680,"toc":1402},"minimark",[681,686,698,703,722,726,731,735,738,741,745,748,768,772,787,790,793,816,823,827,830,836,845,850,861,867,872,878,882,885,888,893,896,899,905,908,914,918,921,923,929,931,937,940,944,947,949,955,957,963,967,970,973,976,979,981,987,989,995,1004,1008,1011,1014,1020,1026,1032,1038,1044,1050,1056,1074,1076,1082,1084,1090,1094,1097,1100,1103,1124,1126,1132,1134,1140,1150,1154,1157,1163,1169,1175,1181,1188,1190,1196,1207,1209,1215,1219,1226,1228,1234,1236,1242,1246,1253,1259,1266,1270,1273,1280,1283,1287,1298,1300,1306,1308,1314,1322,1326,1329,1332,1335,1346,1357,1360,1363,1369,1372,1378,1380,1386,1395,1399],[682,683,685],"h2",{"id":684},"what-is-uikit","What is UIKit?",[687,688,689,690,697],"p",{},"A User Interface Kit, often known as a UI kit, is a group of materials that includes a variety of design elements, including UI components and styles. These kits are lightweight and adaptable front-end frameworks that are ideal for creating quick, effective web interfaces. User interface elements show items’ meaning and functionality. Widgets, navigation menus, and input forms are a few examples of UI components. In this article, we’ll discuss using ",[691,692,696],"a",{"href":693,"rel":694},"https:\u002F\u002Fgetuikit.com\u002F",[695],"nofollow","UIkit"," specifically.",[699,700,702],"h3",{"id":701},"benefits-of-uikit","Benefits of UIkit",[704,705,706,710,713,716,719],"ul",{},[707,708,709],"li",{},"Develops fast and responsive user interfaces",[707,711,712],{},"Controls how your app interacts with the system and offers classes that let you control the data and resources",[707,714,715],{},"Assists in following up more effectively and learns more quickly with documentation and content accessibility",[707,717,718],{},"Supports autocomplete when the UIkit extension is installed in your UIkit text editor.",[707,720,721],{},"Blends with other CSS styling frameworks",[699,723,725],{"id":724},"drawbacks-of-uikit","Drawbacks of UIKit",[704,727,728],{},[707,729,730],{},"Styling conflicts may occur",[699,732,734],{"id":733},"why-use-uikit","Why Use UIKit?",[687,736,737],{},"No one has ever complained that learning UIkit requires advanced programming language knowledge, because UIKit is simple to understand and use. Currently, developers are drawn to UIkit for creating quick and responsive websites for their clients.",[687,739,740],{},"In the tutorial that follows, we'll use UIkit and plain HTML.",[699,742,744],{"id":743},"browser-support-for-uikit","Browser Support for UIkit",[687,746,747],{},"The following browsers support UIkit:",[704,749,750,753,756,759,762,765],{},[707,751,752],{},"Internet Explorer by Microsoft (beginning with version 3.0)",[707,754,755],{},"Firefox",[707,757,758],{},"Safari",[707,760,761],{},"Opera",[707,763,764],{},"Chrome",[707,766,767],{},"Any other browser whose maker has JavaScript installed or licensed",[699,769,771],{"id":770},"uikit-extensions-for-auto-complete","UIkit Extensions for Auto-complete",[687,773,774,775,780,781,786],{},"Using UIkit will work best if you have a reliable code editor like ",[691,776,779],{"href":777,"rel":778},"https:\u002F\u002Fwww.sublimetext.com\u002F",[695],"Sublime Text"," or ",[691,782,785],{"href":783,"rel":784},"https:\u002F\u002Fatom.io\u002F",[695],"Atom",". Installing one of the auto-complete plugins for your preferred IDE or code editor can help you to work even more efficiently. You won't have to search for and manually type all of the UIkit classes and markup, which will save a lot of time.",[687,788,789],{},"Go to the extension tab on VS Code to install the UIkit extension. It requires no additional code and is easy to install and use.",[687,791,792],{},"GitHub auto-complete plugins offered:",[704,794,795,802,809],{},[707,796,797],{},[691,798,801],{"href":799,"rel":800},"https:\u002F\u002Fgithub.com\u002Fuikit\u002Fuikit-sublime",[695],"Autocomplete plugin for Sublime Text 3",[707,803,804],{},[691,805,808],{"href":806,"rel":807},"https:\u002F\u002Fatom.io\u002Fpackages\u002Fuikit-atom",[695],"Autocomplete plugin for Atom",[707,810,811],{},[691,812,815],{"href":813,"rel":814},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Keno.uikit-3-snippets",[695],"Snippets for Visual Studio Code",[687,817,818],{},[819,820],"img",{"alt":821,"src":822},"VS Code auto-complete example.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-001.png",[682,824,826],{"id":825},"getting-started","Getting Started",[687,828,829],{},"The three ways I recommend installing UIkit in your projects are:",[687,831,832],{},[833,834,835],"strong",{},"1. Via Download",[687,837,838,839,844],{},"Download the ",[691,840,843],{"href":841,"rel":842},"https:\u002F\u002Fgithub.com\u002Fuikit\u002Fuikit\u002Freleases\u002Ftag\u002Fv3.15.10",[695],"latest release"," with pre-built JavaScript and CSS.",[687,846,847],{},[833,848,849],{},"2. Via npm or yarn",[851,852,857],"pre",{"className":853,"code":855,"language":856},[854],"language-text","yarn add uikit\n","text",[858,859,855],"code",{"__ignoreMap":860},"",[851,862,865],{"className":863,"code":864,"language":856},[854],"npm i uikit\n",[858,866,864],{"__ignoreMap":860},[687,868,869],{},[833,870,871],{},"3. Via CDN",[851,873,876],{"className":874,"code":875,"language":856},[854],"\u003C!-- UIkit CSS -->\n\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fuikit@3.15.10\u002Fdist\u002Fcss\u002Fuikit.min.css\" \u002F>\n\n\u003C!-- UIkit JS -->\n\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fuikit@3.15.10\u002Fdist\u002Fjs\u002Fuikit.min.js\">\u003C\u002Fscript>\n\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fuikit@3.15.10\u002Fdist\u002Fjs\u002Fuikit-icons.min.js\">\u003C\u002Fscript>\n",[858,877,875],{"__ignoreMap":860},[699,879,881],{"id":880},"uikit-component-examples","UIkit Component Examples:",[687,883,884],{},"By utilizing HTML classes, we’ll be able to add a stylistic component to our HTML.",[687,886,887],{},"You can use the CDN provided above to continue; I extracted the zipped folder I downloaded for this tutorial.",[889,890,892],"h4",{"id":891},"_1-color-examples","1. Color Examples",[687,894,895],{},"It's simple to apply UIkit's styles, and one feature I like about them is that you can customize them by utilizing the standard CSS style attribute. To make a long story short, styles are added in the same way that simple HTML styles are added. So, let's get started!",[687,897,898],{},"Code:",[851,900,903],{"className":901,"code":902,"language":856},[854],"\u003Ch1 class=\"uk-text-primary\">Hello primary color\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-success\">Hello success color\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-warning\">Hello warning color\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-danger\">Hello danger color\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-muted\">Hello muted color\u003C\u002Fh1>\n",[858,904,902],{"__ignoreMap":860},[687,906,907],{},"Output:",[687,909,910],{},[819,911],{"alt":912,"src":913},"Text illustrating the selected colors for each text function.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-002.png",[699,915,917],{"id":916},"_2-text-alignment","2. Text Alignment",[687,919,920],{},"By applying the formats supplied below, you can quickly add alignment to an element.",[687,922,898],{},[851,924,927],{"className":925,"code":926,"language":856},[854],"\u003C!-- Alignment -->\n\u003Ch1 class=\"uk-text-left\">Align left\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-center\">Align center\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-right\">Align right\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-left uk-text-success\">Align left with color\u003C\u002Fh1>\n",[858,928,926],{"__ignoreMap":860},[687,930,907],{},[687,932,933],{},[819,934],{"alt":935,"src":936},"Text illustrating various alignments on the page.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-003.png",[687,938,939],{},"You can see that we added combined styles for \"align left with color\". This is fantastic since it allows you to add different styles by experimenting with the styles already provided.",[699,941,943],{"id":942},"_3-font-weight","3. Font Weight",[687,945,946],{},"Next, we'll be working with font weight, which is simple to use and implement. You just need to be aware of how it is represented in standard CSS font-weight-adding values (e.g., 300, 900). I'll explain everything below and use code examples so you can get a clear understanding of font weight in UIkit.",[687,948,898],{},[851,950,953],{"className":951,"code":952,"language":856},[854],"\u003C!-- Font Weight -->\n\u003Ch1 class=\"uk-text-light\">Light text which is 300 in font Weight\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-normal\">Normal text which is 400 in font Weight\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-bold\">Bold text which is 900 in font Weight\u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-lighter uk-text-success\">Lighter text with no default value \u003C\u002Fh1>\n\u003Ch1 class=\"uk-text-bolder uk-text-danger\">Bolder text with no default value\u003C\u002Fh1>\n",[858,954,952],{"__ignoreMap":860},[687,956,907],{},[687,958,959],{},[819,960],{"alt":961,"src":962},"Text illustrating different text weights. ","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-004.png",[699,964,966],{"id":965},"_4-buttons","4. Buttons",[687,968,969],{},"You can create attractive buttons with ease, and they’re available in several styles.",[687,971,972],{},"You can use button styles much more simply by adding class names to a class such as uk-button (to initialize the button to utilize UIKit styles) and then:",[687,974,975],{},"the uk-button-default, etc.",[687,977,978],{},"Applying styles to the button will allow us to use it.",[687,980,898],{},[851,982,985],{"className":983,"code":984,"language":856},[854],"\u003Cbr>\n\u003Cbutton class=\"uk-button uk-button-default\"> Default button\u003C\u002Fbutton>\n\u003Cbutton class=\"uk-button uk-button-default\" disabled>Disabled Default button\u003C\u002Fbutton>\n\u003Cbr>\n\u003Cbr>\n\u003Cbutton class=\"uk-button uk-button-danger\"> Danger Button\u003C\u002Fbutton>\n\u003Cbutton class=\"uk-button uk-button-primary\">Primary Button\u003C\u002Fbutton>\n",[858,986,984],{"__ignoreMap":860},[687,988,907],{},[687,990,991],{},[819,992],{"alt":993,"src":994},"The four created buttons.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-005.png",[687,996,997,998,1003],{},"Learn more about styling buttons ",[691,999,1002],{"href":1000,"rel":1001},"https:\u002F\u002Fgetuikit.com\u002Fdocs\u002Fbutton",[695],"here",".",[699,1005,1007],{"id":1006},"_5-alerts","5. Alerts",[687,1009,1010],{},"This section teaches you how to show alert messages with styles applied. Let's jump in.",[687,1012,1013],{},"Common classes applied to alert styles:",[687,1015,1016,1019],{},[858,1017,1018],{},"uk-alert:"," Installs the alert for getting started",[687,1021,1022,1025],{},[858,1023,1024],{},".uk-alert-primary:"," Gives the message a prominent styling.",[687,1027,1028,1031],{},[858,1029,1030],{},".uk-alert-success:"," Indicates success or a positive message.",[687,1033,1034,1037],{},[858,1035,1036],{},".uk-alert-warning:"," Indicates a message containing a warning.",[687,1039,1040,1043],{},[858,1041,1042],{},".uk-alert-danger:"," Indicates an important or error message.",[687,1045,1003,1046,1049],{},[858,1047,1048],{},"uk-alert-close:"," Implements styles and closes the alert messages.",[687,1051,1052,1055],{},[858,1053,1054],{},".uk-close:"," Installer-specific attribute that sets up the JavaScript on click event, which will be used to hide the error message.",[687,1057,1058,1059,1062,1063,1065,1066,1071,1072,1003],{},"We all know that these error messages don’t display long on the screen. An event must occur, and either you close it manually, or it closes itself automatically, which could be implemented with JavaScript ",[858,1060,1061],{},"SetTimeout",". However, ",[858,1064,1061],{}," is not covered in this tutorial, so use this ",[691,1067,1070],{"href":1068,"rel":1069},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FsetTimeout",[695],"link"," to learn about ",[858,1073,1061],{},[687,1075,898],{},[851,1077,1080],{"className":1078,"code":1079,"language":856},[854],"\u003C!-- Alert  -->\n\u003Cdiv class=\"uk-alert-primary\" uk-alert>\n  \u003Ca class=\"uk-alert-close\" uk-close>\u003C\u002Fa>\n  \u003Cp>This is a primary success message.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"uk-alert-success\" uk-alert>\n  \u003Ca class=\"uk-alert-close\" uk-close>\u003C\u002Fa>\n  \u003Cp>This is a secondary success message.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"uk-alert-warning\" uk-alert>\n  \u003Ca class=\"uk-alert-close\" uk-close>\u003C\u002Fa>\n  \u003Cp>This is a danger warning message.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"uk-alert-danger\" uk-alert>\n  \u003Ca class=\"uk-alert-close\" uk-close>\u003C\u002Fa>\n  \u003Cp>This is a danger alert message.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[858,1081,1079],{"__ignoreMap":860},[687,1083,907],{},[687,1085,1086],{},[819,1087],{"alt":1088,"src":1089},"Four differently-colored highlighted strings of text.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-006.png",[699,1091,1093],{"id":1092},"_6-dropdown","6. Dropdown",[687,1095,1096],{},"A dropdown is a list that is activated by an event, such as a hover or click. With this action, content that is not visible by default is displayed in the dropdown menu.",[687,1098,1099],{},"In this section, we'll make use of the straightforward UIkit dropdown feature.",[687,1101,1102],{},"Let's get started.",[687,1104,1105,1106,1111,1112,1115,1116,1119,1120,1123],{},"A dropdown can contain a nav from the ",[691,1107,1110],{"href":1108,"rel":1109},"https:\u002F\u002Fgetuikit.com\u002Fdocs\u002Fnav",[695],"Nav component",". Simply add the ",[858,1113,1114],{},".uk-nav"," class and the ",[858,1117,1118],{},".uk-dropdown-nav"," modifier to a ",[858,1121,1122],{},"\u003Cul>"," element.",[687,1125,898],{},[851,1127,1130],{"className":1128,"code":1129,"language":856},[854],"\u003Cbutton class=\"uk-button uk-button-default\" type=\"button\">Hover\u003C\u002Fbutton>\n\u003Cdiv uk-dropdown>\n  \u003Cul class=\"uk-nav uk-dropdown-nav\">\n    \u003Cli class=\"uk-active\">\u003Ca href=\"#\">Active\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Item\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli class=\"uk-nav-header\">Header\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Item\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Item\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli class=\"uk-nav-divider\">\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Item\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\n",[858,1131,1129],{"__ignoreMap":860},[687,1133,907],{},[687,1135,1136],{},[819,1137],{"alt":1138,"src":1139},"A dropdown menu.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-007.png",[687,1141,1142,1143,1148],{},"You can learn more about dropdowns from the UIkit ",[691,1144,1147],{"href":1145,"rel":1146},"https:\u002F\u002Fgetuikit.com\u002Fdocs\u002Fdropdown",[695],"official doc",[833,1149,1003],{},[699,1151,1153],{"id":1152},"_7-background","7. Background",[687,1155,1156],{},"To give an element a background color, you can include one of the following classes. Your chosen or modified UIkit style determines the actual color for each modification.",[687,1158,1159,1162],{},[858,1160,1161],{},".uk-background-default:"," Applies the default background color.",[687,1164,1165,1168],{},[858,1166,1167],{},".uk-background-muted:"," Applies a muted background color.",[687,1170,1171,1174],{},[858,1172,1173],{},".uk-background-primary:"," Applies the primary background color.",[687,1176,1177,1180],{},[858,1178,1179],{},".uk-background-secondary:"," Applies a secondary background color.",[687,1182,1183,1184,1187],{},"Note: I will use ",[858,1185,1186],{},"uk-flex"," to implement the common CSS display flex.",[687,1189,898],{},[851,1191,1194],{"className":1192,"code":1193,"language":856},[854],"\u003Cdiv class=\"uk-child-width uk-text-center uk-flex\">\n  \u003Cdiv>\n    \u003Cdiv class=\"uk-background-primary uk-light uk-padding uk-panel\">\n      \u003Cp class=\"uk-h4\">Primary\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Cdiv class=\"uk-background-secondary uk-light uk-padding uk-panel\">\n      \u003Cp class=\"uk-h4\">Secondary\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[858,1195,1193],{"__ignoreMap":860},[687,1197,1198,1199,1202,1203,1206],{},"Note: ",[858,1200,1201],{},"uk-child-width"," stretches the width of the direct child of the parent ",[858,1204,1205],{},"div"," where flex was applied.",[687,1208,907],{},[687,1210,1211],{},[819,1212],{"alt":1213,"src":1214},"The Primary and Secondary backgrounds.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-008.png",[699,1216,1218],{"id":1217},"_8-background-images","8. Background Images",[687,1220,1221,1222,1225],{},"To add a background image to your app if you’re implementing an inline approach, use ",[858,1223,1224],{},"style=\"background-image: url(images\u002Fdark.jpg)",". In order to apply styles and alignment to the background, apply the UIkit classes.",[687,1227,898],{},[851,1229,1232],{"className":1230,"code":1231,"language":856},[854],"\u003Cdiv class=\"uk-child-width-1-2@s uk-light\" uk-grid>\n  \u003Cdiv>\n    \u003Cdiv class=\".uk-background-center-right uk-background-cover uk-height-medium uk-panel uk-flex uk-flex-middle uk-flex-center\"\nstyle=\"background-image: url(img.png);\">\n      \u003Ch1 class=\"uk-h1 uk-text-bolder\">Hello World\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[858,1233,1231],{"__ignoreMap":860},[687,1235,907],{},[687,1237,1238],{},[819,1239],{"alt":1240,"src":1241},"Hello World text over an image of a woman in a store.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-009.png",[889,1243,1245],{"id":1244},"background-no-repeat","Background No-Repeat:",[687,1247,1248,1249,1252],{},"Add the ",[858,1250,1251],{},"uk-background-norepeat"," class to stop smaller images from repeating to fill the background space.",[851,1254,1257],{"className":1255,"code":1256,"language":856},[854],"\u003Cdiv class=\"uk-background-norepeat\">\u003C\u002Fdiv>\n",[858,1258,1256],{"__ignoreMap":860},[687,1260,1261,1262,1003],{},"You can learn more about background images at this ",[691,1263,1070],{"href":1264,"rel":1265},"https:\u002F\u002Fgetuikit.com\u002Fdocs\u002Fbackground",[695],[699,1267,1269],{"id":1268},"_9-toggle","9. Toggle",[687,1271,1272],{},"Use a toggle to reveal, change, or alter the look of certain content elements.",[687,1274,1275,1276,1279],{},"Simply add the ",[858,1277,1278],{},"uk-toggle=\"target: #ID\""," property to a button or anchor element to use this component. The toggle attribute supports the use of any selector.",[687,1281,1282],{},"The item's class or attribute can be added or removed using the toggle. It automatically inserts the hidden attribute to make the element invisible.",[889,1284,1286],{"id":1285},"multiple-items","Multiple Items",[687,1288,1289,1290,1293,1294,1297],{},"Additionally, you can toggle several elements at once. Simply use a selector that applies to all items and add the ",[858,1291,1292],{},"target: SELECTOR"," option to the ",[858,1295,1296],{},"uk-toggle"," attribute.",[687,1299,898],{},[851,1301,1304],{"className":1302,"code":1303,"language":856},[854],"\u003Cbutton class=\"uk-button uk-button-default\" type=\"button\" uk-toggle=\"target: .toggle\">Toggle\u003C\u002Fbutton>\n\u003Cp class=\"toggle\">UIKit is Easy!\u003C\u002Fp>\n\u003Cp class=\"toggle\" hidden>Start using it!\u003C\u002Fp>\n",[858,1305,1303],{"__ignoreMap":860},[687,1307,907],{},[687,1309,1310],{},[819,1311],{"alt":1312,"src":1313},"A toggle button.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-010.png",[687,1315,1316,1317,1003],{},"Learn more about ",[691,1318,1321],{"href":1319,"rel":1320},"https:\u002F\u002Fgetuikit.com\u002Fdocs\u002Ftoggle#toggle",[695],"toggles here",[699,1323,1325],{"id":1324},"_10-sliders","10. Sliders",[687,1327,1328],{},"Have you ever fantasized about employing sliders to add professionalism to a client's website or your portfolio? Since creating a slider from scratch would take a lot of time, it can be relatively inefficient. Also, to implement a slider, you must have prior JavaScript experience.",[687,1330,1331],{},"Many thanks to UIkit for offering a fantastic slider carousel that is fully responsive and customizable.",[687,1333,1334],{},"Let’s get started utilizing a slider from UIkit.",[687,1336,1337,1338,1341,1342,1345],{},"To use this component, create a list of slides using the ",[858,1339,1340],{},".uk-slider-items"," class and add the ",[858,1343,1344],{},"uk-slider"," property to a container element. Each item should have an image or other material added.",[687,1347,1348,1349,1352,1353,1356],{},"Use the width component to specify the slider items' widths. Use the ",[858,1350,1351],{},".uk-child-width-*"," classes to specify the width of all slider items, or the ",[858,1354,1355],{},".uk-width-*"," classes to specify exact widths for each list item. If no fixed width is assigned, each item's width is determined by the size of the content itself.",[687,1358,1359],{},"Please remember that everything still functions if you use conventional CSS.",[687,1361,1362],{},"The basic CSS that we'll be using without the slider is seen below:",[851,1364,1367],{"className":1365,"code":1366,"language":856},[854],"\u003Cstyle>\n  img {\n    width: 340px;\n    height: 400px;\n    object-fit: cover;\n  }\n\u003C\u002Fstyle>\n",[858,1368,1366],{"__ignoreMap":860},[687,1370,1371],{},"Slide Code:",[851,1373,1376],{"className":1374,"code":1375,"language":856},[854],"\u003Cdiv class=\"uk-position-relative uk-visible-toggle uk-light\" tabindex=\"-1\" uk-slider>\n  \u003Cul class=\"uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m\">\n  \u003Cli>\n    \u003Cimg src=\"slides\u002Fslide3.png\" alt=\"\">\n    \u003Cdiv class=\"uk-position-center uk-panel\">\n      \u003Ch1>1\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cimg src=\"slides\u002Fslide1.jpg\" alt=\"\">\n    \u003Cdiv class=\"uk-position-center uk-panel\">\n      \u003Ch1>2\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cimg src=\"slides\u002Fslide2.jpg\" alt=\"\">\n    \u003Cdiv class=\"uk-position-center uk-panel\">\n      \u003Ch1>3\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cimg src=\"slides\u002Fslide6.jpg\" alt=\"\">\n    \u003Cdiv class=\"uk-position-center uk-panel\">\n      \u003Ch1>4\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cimg src=\"slides\u002Fslide5.jpg\" alt=\"\">\n    \u003Cdiv class=\"uk-position-center uk-panel\">\n     \u003Ch1>5\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cimg src=\"slides\u002Fslide6.jpg\" alt=\"\">\n      \u003Cdiv class=\"uk-position-center uk-panel\">\n        \u003Ch1>6\u003C\u002Fh1>\n      \u003C\u002Fdiv>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ca class=\"uk-position-center-left uk-position-small uk-hidden-hover\" href=\"#\" uk-slidenav-previous\nuk-slider-item=\"previous\">\u003C\u002Fa>\n\u003Ca class=\"uk-position-center-right uk-position-small uk-hidden-hover\" href=\"#\" uk-slidenav-next\nuk-slider-item=\"next\">\u003C\u002Fa>\n\u003C\u002Fdiv>\n",[858,1377,1375],{"__ignoreMap":860},[687,1379,907],{},[687,1381,1382],{},[819,1383],{"alt":1384,"src":1385},"Four images in a slider.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fimg-011.png",[687,1387,1388,1389,1394],{},"The slider appears and is responsive to the outside appearance of things. ",[691,1390,1393],{"href":1391,"rel":1392},"https:\u002F\u002Fgetuikit.com\u002Fdocs\u002Fslider",[695],"Click here"," to find out more about sliders.",[682,1396,1398],{"id":1397},"conclusion","Conclusion",[687,1400,1401],{},"I hope you had fun completing this tutorial. In this lesson, we built an example project to study UIkit's basic concepts, and we learned how to set it up. If you want to develop a portfolio website for yourself, you can upgrade this demo to suit your tastes or try putting what you've learned into practice by building other pages.",{"title":860,"searchDepth":1403,"depth":1403,"links":1404},2,[1405,1413,1425],{"id":684,"depth":1403,"text":685,"children":1406},[1407,1409,1410,1411,1412],{"id":701,"depth":1408,"text":702},3,{"id":724,"depth":1408,"text":725},{"id":733,"depth":1408,"text":734},{"id":743,"depth":1408,"text":744},{"id":770,"depth":1408,"text":771},{"id":825,"depth":1403,"text":826,"children":1414},[1415,1416,1417,1418,1419,1420,1421,1422,1423,1424],{"id":880,"depth":1408,"text":881},{"id":916,"depth":1408,"text":917},{"id":942,"depth":1408,"text":943},{"id":965,"depth":1408,"text":966},{"id":1006,"depth":1408,"text":1007},{"id":1092,"depth":1408,"text":1093},{"id":1152,"depth":1408,"text":1153},{"id":1217,"depth":1408,"text":1218},{"id":1268,"depth":1408,"text":1269},{"id":1324,"depth":1408,"text":1325},{"id":1397,"depth":1403,"text":1398},null,"Software Development","2022-10-28T00:00:00.000Z","A User Interface Kit, often known as a UI kit, is a group of materials that includes a variety of design elements, including UI components and styles.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-uikit\u002Fhero.jpeg","A laptop with Figma open.",{},"\u002Fblog\u002Fintroduction-to-uikit",{"title":673,"description":1429},"blog\u002Fintroduction-to-uikit","WDIlsuYvRFGnZ1DZXOVFXuYdhAPRHaY5cbkW6Gw5WpU",{"id":1440,"title":674,"body":1441,"description":860,"draft":1430,"extension":1431,"meta":1445,"navigation":32,"path":1446,"photo":1447,"photoAlt":1426,"seo":1448,"stem":1449,"__hash__":1450},"authors\u002Fauthors\u002Fgabriel-delight.md",{"type":679,"value":1442,"toc":1443},[],{"title":860,"searchDepth":1403,"depth":1403,"links":1444},[],{},"\u002Fauthors\u002Fgabriel-delight","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fgabriel-delight.png",{"title":674,"description":860},"authors\u002Fgabriel-delight","bDQuqNPtY1-G2t8KB3WQhXwWUqNta5ut10nAWh6AivA",{"left":1452,"top":1452,"width":1453,"height":1453,"rotate":1452,"vFlip":1430,"hFlip":1430,"body":1454},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>"]