{"id":1853,"date":"2024-08-28T13:41:33","date_gmt":"2024-08-28T13:41:33","guid":{"rendered":"https:\/\/shuffle.dev\/blog\/?p=1853"},"modified":"2024-08-28T13:44:58","modified_gmt":"2024-08-28T13:44:58","slug":"upload-ui-libraries-to-shuffle","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/","title":{"rendered":"Upload UI libraries to Shuffle"},"content":{"rendered":"\n<p class=\"mb-6 leading-loose\">Uploading UI libraries to Shuffle is available, and the first users have already used it!<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">This feature allows you to <strong>upload a library you created or purchased<\/strong> (e.g., Tailwind UI, Flowbite, Ayro UI). The uploaded library will work with Shuffle features such as visual editing, live preview, and collaboration.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Uploading flow<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">UI library upload consists of just a few steps:<\/p>\n\n\n\n<ol class=\"list-decimal mb-4\">\n<li class=\"mb-2 ml-8\">Package preparation &#8211; according to this documentation.<\/li>\n\n\n\n<li class=\"mb-2 ml-8\">Upload the ZIP file with a package &#8211; using the uploader in the&nbsp;<a href=\"https:\/\/shuffle.dev\/dashboard#\/libraries\/uploaded\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"text-brand-blue underline hover:no-underline\">dashboard<\/a>.<\/li>\n\n\n\n<li class=\"mb-2 ml-8\">Wait for Shuffle to process the uploaded library.<\/li>\n\n\n\n<li class=\"mb-2 ml-8\">Start using the library in projects.<\/li>\n<\/ol>\n\n\n\n<p class=\"mb-6 leading-loose\"> <a href=\"https:\/\/shuffle.dev\/docs\/library-upload\/\" class=\"text-brand-blue underline hover:no-underline\">The docs<\/a> provide more information about preparing packages to upload to Shuffle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large rounded-lg overflow-hidden\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"1024\" src=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/shuffle-upload-1-1024x1024.jpeg\" alt=\"\" class=\"wp-image-1869\" srcset=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/shuffle-upload-1-1024x1024.jpeg 1024w, https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/shuffle-upload-1-300x300.jpeg 300w, https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/shuffle-upload-1-150x150.jpeg 150w, https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/shuffle-upload-1-768x768.jpeg 768w, https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/shuffle-upload-1-1536x1536.jpeg 1536w, https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/shuffle-upload-1.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">What&#8217;s Next &amp; Feedback<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">We are now gathering first feedback from our users (we would appreciate your feedback too:\u00a0<a href=\"mailto:support@shuffle.dev\" class=\"text-brand-blue underline hover:no-underline\">support@shuffle.dev<\/a>) and will updating the tool, if needed!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uploading UI libraries to Shuffle is available, and the first users have already used it! This feature allows you to upload a library you created or purchased (e.g., Tailwind UI, Flowbite, Ayro UI). The uploaded library will work with Shuffle features such as visual editing, live preview, and collaboration. Uploading flow UI library upload consists [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1879,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,20,21],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Upload UI libraries to Shuffle | Shuffle<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload UI libraries to Shuffle | Shuffle\" \/>\n<meta property=\"og:description\" content=\"Uploading UI libraries to Shuffle is available, and the first users have already used it! This feature allows you to upload a library you created or purchased (e.g., Tailwind UI, Flowbite, Ayro UI). The uploaded library will work with Shuffle features such as visual editing, live preview, and collaboration. Uploading flow UI library upload consists [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-28T13:41:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-28T13:44:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/upload-featured.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dawid Andrzejewski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dawid Andrzejewski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/\"},\"author\":{\"name\":\"Dawid Andrzejewski\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\"},\"headline\":\"Upload UI libraries to Shuffle\",\"datePublished\":\"2024-08-28T13:41:33+00:00\",\"dateModified\":\"2024-08-28T13:44:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/\"},\"wordCount\":144,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"Development\",\"Shuffle\",\"UI Library\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/\",\"name\":\"Upload UI libraries to Shuffle | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2024-08-28T13:41:33+00:00\",\"dateModified\":\"2024-08-28T13:44:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload UI libraries to Shuffle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\",\"name\":\"Dawid Andrzejewski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"caption\":\"Dawid Andrzejewski\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Upload UI libraries to Shuffle | Shuffle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/","og_locale":"en_US","og_type":"article","og_title":"Upload UI libraries to Shuffle | Shuffle","og_description":"Uploading UI libraries to Shuffle is available, and the first users have already used it! This feature allows you to upload a library you created or purchased (e.g., Tailwind UI, Flowbite, Ayro UI). The uploaded library will work with Shuffle features such as visual editing, live preview, and collaboration. Uploading flow UI library upload consists [&hellip;]","og_url":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2024-08-28T13:41:33+00:00","article_modified_time":"2024-08-28T13:44:58+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2024\/08\/upload-featured.png","type":"image\/png"}],"author":"Dawid Andrzejewski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dawid Andrzejewski","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/"},"author":{"name":"Dawid Andrzejewski","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d"},"headline":"Upload UI libraries to Shuffle","datePublished":"2024-08-28T13:41:33+00:00","dateModified":"2024-08-28T13:44:58+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/"},"wordCount":144,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["Development","Shuffle","UI Library"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/","url":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/","name":"Upload UI libraries to Shuffle | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2024-08-28T13:41:33+00:00","dateModified":"2024-08-28T13:44:58+00:00","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2024\/08\/upload-ui-libraries-to-shuffle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Upload UI libraries to Shuffle"}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d","name":"Dawid Andrzejewski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","caption":"Dawid Andrzejewski"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1853"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=1853"}],"version-history":[{"count":10,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1853\/revisions"}],"predecessor-version":[{"id":1877,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1853\/revisions\/1877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media\/1879"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=1853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=1853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=1853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}