[{"data":1,"prerenderedAt":779},["ShallowReactive",2],{"announcement-bar":3,"tools-category_page-icon-library":23,"popular_product_refs":53,"popular-product-2074":153,"popular-product-1766":241,"popular-product-2178":310,"popular-product-2113":358,"popular-product-2171":404,"elite_banner_hero":452,"tools-category_page-all_products-icon-library":473,"tools-static-texts":739,"elite_banner":777},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"id":8,"type":5,"title":9,"slug":10,"published_at":11,"order":12,"created_at":11,"updated_at":13,"text":14,"button_url":15,"is_enabled":6,"button_text":16,"countdown_date":17,"show_countdown":6,"_id":18,"_type":19,"_source":20,"_file":21,"_stem":22,"_extension":19},"/announcement_bar/2114","announcement_bar",false,"",2114,"Announcement Bar","announcement-bar","2025-08-29 23:18:28",1,"2026-03-10 22:43:15","✨ Tailkits UI: New Pricing ✨","https://tailkits.com/ui?ref=announcement","See Plans →","2025-11-29 23:59:31","content:announcement_bar:2114.json","json","content","announcement_bar/2114.json","announcement_bar/2114",{"_path":24,"_dir":25,"_draft":6,"_partial":6,"_locale":7,"id":26,"type":25,"title":27,"slug":28,"published_at":29,"order":12,"created_at":29,"updated_at":30,"faqs":31,"seo_title":47,"seo_content":48,"seo_description":49,"_id":50,"_type":19,"_source":20,"_file":51,"_stem":52,"_extension":19},"/tool_categories/2246","tool_categories",2246,"Icon Library","icon-library","2026-03-17 10:53:36","2026-03-17 10:55:39",[32,35,38,41,44],{"title":33,"content":34},"What is an icon library?","An icon library is a collection of ready-to-use vector icons in formats like SVG, PNG, or webfont. They help designers and developers maintain visual consistency across web and UI projects without creating icons from scratch.",{"title":36,"content":37},"What's the difference between free and premium icon libraries?","Free icon libraries offer a limited set of icons, often with attribution requirements. Premium libraries provide larger collections, multiple styles, commercial licenses, and extras like React packages, Figma plugins, or desktop apps.",{"title":39,"content":40},"Which icon format should I use for web projects?","SVG is the best format for web - it's scalable, lightweight, and easy to style with CSS. Some libraries also offer React/JSX packages for component-based workflows, which is ideal for Tailwind and modern frontend stacks.",{"title":42,"content":43},"Can I use premium icons in commercial projects?","Most premium icon libraries include a commercial license. Some offer an extended license for resale or product redistribution. Always check the license terms before using icons in client work or products.",{"title":45,"content":46},"Do icon libraries work with Tailwind CSS?","Yes. SVG-based icon libraries work seamlessly with Tailwind CSS. You can style icons directly with utility classes, or use React icon packages that accept className props for full Tailwind compatibility.","Icon Library - Best SVG Icon Sets for Web & UI Design","\u003Cp>An \u003Cstrong>icon library\u003C/strong> is a curated collection of scalable vector icons designed for use in web and UI projects. Whether you're building a SaaS dashboard, a mobile app, or a marketing site, the right icon library keeps your interface consistent and saves hours of design work.\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Browse our curated list of the best icon libraries - from one-time purchase bundles to subscription-based sets. Find options with multiple styles (outline, filled, duotone), React packages, Figma plugins, and Tailwind-friendly formats.\u003C/p>","Discover the best icon libraries for web and UI design. Browse premium and free SVG icon sets, animated icons, and React-ready packages - all curated for Tailwind projects.","content:tool_categories:2246.json","tool_categories/2246.json","tool_categories/2246",[54,69,82,94,106,118,130,142],{"_path":55,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":57,"type":56,"title":58,"slug":59,"published_at":60,"order":61,"created_at":60,"updated_at":62,"product_id":63,"is_shuffled":64,"collection_type":65,"_id":66,"_type":19,"_source":20,"_file":67,"_stem":68,"_extension":19},"/popular_products/1712","popular_products",1712,"Shadcnblocks","shadcnblocks","2025-01-31 23:08:57",6,"2026-02-25 01:41:58","1626",true,"components","content:popular_products:1712.json","popular_products/1712.json","popular_products/1712",{"_path":70,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":71,"type":56,"title":72,"slug":73,"published_at":74,"order":75,"created_at":74,"updated_at":76,"product_id":77,"is_shuffled":64,"collection_type":78,"_id":79,"_type":19,"_source":20,"_file":80,"_stem":81,"_extension":19},"/popular_products/1774",1774,"Shadcnblocks Bundle","shadcnblocks-bundle","2025-04-03 11:54:06",2,"2026-02-25 01:41:48","1766","templates","content:popular_products:1774.json","popular_products/1774.json","popular_products/1774",{"_path":83,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":84,"type":56,"title":85,"slug":86,"published_at":87,"order":88,"created_at":87,"updated_at":89,"product_id":90,"is_shuffled":6,"collection_type":78,"_id":91,"_type":19,"_source":20,"_file":92,"_stem":93,"_extension":19},"/popular_products/2125",2125,"Hive","hive","2025-09-16 09:29:02",8,"2026-03-14 11:42:25","2219","content:popular_products:2125.json","popular_products/2125.json","popular_products/2125",{"_path":95,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":96,"type":56,"title":97,"slug":98,"published_at":99,"order":100,"created_at":99,"updated_at":101,"product_id":102,"is_shuffled":6,"collection_type":78,"_id":103,"_type":19,"_source":20,"_file":104,"_stem":105,"_extension":19},"/popular_products/2172",2172,"Lumen","lumen","2025-10-30 02:12:28",5,"2026-03-14 11:42:05","2171","content:popular_products:2172.json","popular_products/2172.json","popular_products/2172",{"_path":107,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":108,"type":56,"title":109,"slug":110,"published_at":111,"order":112,"created_at":111,"updated_at":113,"product_id":114,"is_shuffled":64,"collection_type":78,"_id":115,"_type":19,"_source":20,"_file":116,"_stem":117,"_extension":19},"/popular_products/2175",2175,"Plasma","plasma","2025-11-06 18:06:37",4,"2026-03-02 18:44:19","2113","content:popular_products:2175.json","popular_products/2175.json","popular_products/2175",{"_path":119,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":120,"type":56,"title":121,"slug":122,"published_at":123,"order":124,"created_at":123,"updated_at":125,"product_id":126,"is_shuffled":6,"collection_type":78,"_id":127,"_type":19,"_source":20,"_file":128,"_stem":129,"_extension":19},"/popular_products/2225",2225,"Metafi","metafi","2026-02-27 13:18:08",3,"2026-03-14 11:41:52","2178","content:popular_products:2225.json","popular_products/2225.json","popular_products/2225",{"_path":131,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":132,"type":56,"title":133,"slug":134,"published_at":135,"order":136,"created_at":135,"updated_at":137,"product_id":138,"is_shuffled":6,"collection_type":78,"_id":139,"_type":19,"_source":20,"_file":140,"_stem":141,"_extension":19},"/popular_products/2226",2226,"Mainline","mainline","2026-02-27 13:19:41",7,"2026-03-14 11:42:16","1762","content:popular_products:2226.json","popular_products/2226.json","popular_products/2226",{"_path":143,"_dir":56,"_draft":6,"_partial":6,"_locale":7,"id":144,"type":56,"title":145,"slug":146,"published_at":147,"order":12,"created_at":147,"updated_at":148,"product_id":149,"is_shuffled":6,"collection_type":78,"_id":150,"_type":19,"_source":20,"_file":151,"_stem":152,"_extension":19},"/popular_products/2231",2231,"Aspect","aspect","2026-03-02 18:52:18","2026-03-14 11:42:37","2074","content:popular_products:2231.json","popular_products/2231.json","popular_products/2231",{"_path":154,"_dir":78,"_draft":6,"_partial":6,"_locale":7,"id":155,"type":78,"title":145,"slug":146,"published_at":156,"order":61,"created_at":156,"updated_at":157,"faqs":158,"tags":171,"color":188,"cover":191,"images":192,"is_hot":64,"content":193,"is_paid":64,"demo_url":194,"features":195,"seo_title":208,"categories":209,"target_url":232,"description":233,"is_featured":64,"is_free_listing":6,"seo_description":234,"tags_ids":235,"features_ids":236,"categories_ids":237,"_id":238,"_type":19,"_source":20,"_file":239,"_stem":240,"_extension":19},"/templates/2074",2074,"2025-08-07 13:20:45","2026-03-11 20:21:39",[159,162,165,168],{"title":160,"content":161},"How many pages come pre-built?","Aspect ships with 10 + ready-to-use pages. ",{"title":163,"content":164},"Is a design file included?","Yes—every purchase includes the matching Figma source to speed up custom edits.",{"title":166,"content":167},"Which frameworks are supported?","Out of the box you get both a Next.js 15 and an Astro 5 build, each using React 19 and Tailwind 4.",{"title":169,"content":170},"Do I get lifetime updates?","Buying Aspect (or the Premium Plan) grants lifetime updates and access to new shadcn/ui blocks.",[172,176,180,184],{"id":173,"title":174,"slug":175},1380,"shadcn/ui","shadcnui",{"id":177,"title":178,"slug":179},458,"Astro","astro",{"id":181,"title":182,"slug":183},453,"Nextjs","nextjs",{"id":185,"title":186,"slug":187},443,"HTML","html",{"id":189,"title":190,"slug":190},37,"yellow","/aspect-2.png",[],"\u003Cp>\u003Cimg src=\"/aspect.png\" alt=\"Aspect\" title=\"Aspect - dark mode company template\" width=\"1600\" height=\"1200\" loading=\"lazy\">\u003C/p>\u003Cblockquote>\u003Cp>\u003Cstrong>Get 10% off Shadcnblocks! Use code \u003C/strong>\u003Ccode>TAILKITS10\u003C/code>\u003Cstrong> at checkout 🎉\u003C/strong>\u003C/p>\u003C/blockquote>\u003Ch2>What Is the Aspect Template?\u003C/h2>\u003Cp>Aspect is a premium, corporate-style website starter built with shadcn/ui, Tailwind 4 and React 19, available for both Next.js 15 and Astro 5. It packs 100 + pre-styled components and 10 + ready-made pages so you can spin up a polished marketing site in minutes.\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>100 + reusable shadcn/ui components\u003C/p>\u003C/li>\u003Cli>\u003Cp>10 + fully designed pages out of the box\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma design file included for easy editing\u003C/p>\u003C/li>\u003Cli>\u003Cp>Block-based layout—drop in any extra Shadcn Blocks section\u003C/p>\u003C/li>\u003Cli>\u003Cp>MDX & JSON data for fast content tweaks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Mobile-first, responsive Tailwind styling\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built-in SEO / metadata helpers for Next.js\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Hero, banner & about sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Feature grids, pricing tables, testimonials\u003C/p>\u003C/li>\u003Cli>\u003Cp>CTA, stats, timeline & gallery blocks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blog, FAQ, careers and changelog sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Navbars, footers, login, signup and more (30 + categories)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Huge parts library reduces build time\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dual Next.js & Astro editions\u003C/p>\u003C/li>\u003Cli>\u003Cp>Modern tech stack (Tailwind 4, React 19, TS)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma source speeds up design tweaks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Lifetime updates included via Premium Plan\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>$79 one-off cost may deter hobby projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>Limited to React-based workflows—no Vue/Svelte\u003C/p>\u003C/li>\u003Cli>\u003Cp>Customisation still needs Tailwind know-how\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Next.js 15\u003C/p>\u003C/li>\u003Cli>\u003Cp>Astro 5\u003C/p>\u003C/li>\u003Cli>\u003Cp>React 19\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind CSS 4\u003C/p>\u003C/li>\u003Cli>\u003Cp>Typescript & MDX\u003C/p>\u003C/li>\u003Cli>\u003Cp>Works with shadcn/ui block library for extra sections\u003C/p>\u003C/li>\u003C/ul>","https://aspect-astro-template.vercel.app/",[196,200,204],{"id":197,"title":198,"slug":199},405,"Figma File","figma-file",{"id":201,"title":202,"slug":203},411,"Dark Mode","dark-mode",{"id":205,"title":206,"slug":207},1720,"Tailwind CSS v4","tailwind-css-v4","Aspect Company Template - Next.js & Astro Landing Kit",[210,214,216,220,224,228],{"id":211,"title":212,"slug":213},1457,"Startup","startup",{"id":215,"title":202,"slug":203},1458,{"id":217,"title":218,"slug":219},1460,"Company","company",{"id":221,"title":222,"slug":223},430,"SaaS","saas",{"id":225,"title":226,"slug":227},427,"Blog","blog",{"id":229,"title":230,"slug":231},425,"Landing Page","landing-page","https://www.shadcnblocks.com/template/aspect?via=tailkits","Corporate site template with 100 + shadcn/ui blocks","Aspect ships a ready-to-launch corporate site: block-based pages, SEO-optimised Next.js & Astro code, responsive Tailwind design and an included Figma source.",[173,177,181,185],[197,201,205],[211,215,217,221,225,229],"content:templates:2074.json","templates/2074.json","templates/2074",{"_path":242,"_dir":78,"_draft":6,"_partial":6,"_locale":7,"id":243,"type":78,"title":244,"slug":245,"published_at":246,"order":75,"created_at":246,"updated_at":247,"faqs":248,"tags":267,"color":275,"cover":278,"images":279,"is_hot":64,"content":286,"is_paid":64,"demo_url":287,"features":288,"seo_title":295,"categories":296,"target_url":301,"description":302,"is_featured":64,"is_free_listing":6,"seo_description":303,"tags_ids":304,"features_ids":305,"categories_ids":306,"_id":307,"_type":19,"_source":20,"_file":308,"_stem":309,"_extension":19},"/templates/1766",1766,"Shadcnblocks Template Bundle","shadcnblocks-template-bundle","2025-03-24 12:34:39","2026-03-10 22:43:05",[249,252,255,258,261,264],{"title":250,"content":251},"Is there a free tier?","A limited set of free blocks is available, but the bundle and monthly updates require the paid license. ",{"title":253,"content":254},"Does it support dark mode?","Yes. Blocks inherit any Shadcn UI theme, including light/dark variants, without extra work. ",{"title":256,"content":257},"Can I use it on unlimited projects?","Absolutely; the license permits unlimited commercial and personal projects. ",{"title":259,"content":260},"How often are new components added?","Expect roughly 50 new blocks and at least one template every month",{"title":262,"content":263},"How big is the catalog right now?","Feature blocks alone list 266+ items; other categories are growing alongside recent “50 New Blocks” updates. ",{"title":265,"content":266},"Do these blocks work with Tailwind v4?","Yes, Lumen and the other templates specify Tailwind 4; blocks follow the same stack. ",[268,269,270,271],{"id":173,"title":174,"slug":175},{"id":177,"title":178,"slug":179},{"id":181,"title":182,"slug":183},{"id":272,"title":273,"slug":274},447,"React","react",{"id":276,"title":277,"slug":277},22,"indigo","/shadcnblocks-template-bundle-4.png",[280,282,284],{"image":281},"/shadcnblocks-32.png",{"image":283},"/shadcnblocks-template-bundle-2.png",{"image":285},"/shadcnblocks-template-bundle.webp","\u003Cp>\u003C/p>\u003Cblockquote>\u003Cp>\u003Cstrong>Get 10% off Shadcnblocks! Use code \u003C/strong>\u003Ccode>TAILKITS10\u003C/code>\u003Cstrong> at checkout 🎉\u003C/strong>\u003C/p>\u003C/blockquote>\u003Cp>The Shadcnblocks Template Bundle is an all-access pass to \u003Cstrong>1189+ professionally designed blocks\u003C/strong> and \u003Cstrong>six complete marketing templates\u003C/strong> powered by Shadcn UI and Tailwind CSS v4. You pay once, use it forever, and keep getting \u003Cstrong>50+ fresh blocks every month\u003C/strong> along with template updates and Figma assets.\u003C/p>\u003Cp>\u003Cstrong>Shadcnblocks Template Bundle Showcase\u003C/strong>\u003C/p>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-18.png\" alt=\"Lumen shadcn/ui Theme\" title=\"Lumen shadcn/ui Theme\" width=\"1440\" height=\"1080\" loading=\"lazy\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-19.png\" alt=\"Plasma shadcn/ui SaaS Template\" title=\"Plasma shadcn/ui SaaS Template\" width=\"1440\" height=\"1081\" loading=\"lazy\">\u003C/p>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"https://tailkits.com/_ipx/_/metafi-3.png\" alt=\"Metafi Image 1\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"https://tailkits.com/_ipx/_/echo-2.webp\" alt=\"Echo Image 1\">\u003C/p>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"https://tailkits.com/_ipx/_/mainline.png\" alt=\"Mainline Image 2\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-21.png\" alt=\"Aspect dark-mode shadcn/ui Theme\" title=\"Aspect dark-mode shadcn/ui Theme\" width=\"1440\" height=\"1200\" loading=\"lazy\">\u003C/p>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"https://tailkits.com/_ipx/_/hive-2.webp\" alt=\"Hive Image 1\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"https://tailkits.com/_ipx/_/shadcnblocks.webp\" alt=\"Shadcnblocks Image 2\">\u003C/p>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-20.png\" alt=\"Zippay shadcn/ui Theme\" title=\"Zippay shadcn/ui Theme\" width=\"1440\" height=\"1080\" loading=\"lazy\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"https://tailkits.com/_ipx/_/streamline.png\" alt=\"Streamline Image 2\">\u003C/p>\u003C/div>\u003C/div>\u003Ch3>Features ✨\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Huge library\u003C/strong> – 1216 blocks covering hero, pricing, FAQ, testimonial, dashboards and more\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Modern stack\u003C/strong> – Next.js 15, Astro 5, React 19, TypeScript & MDX out of the box\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>One-time license\u003C/strong> – lifetime updates & unlimited projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma kit included\u003C/strong> for pixel-perfect hand-off\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Theme-ready\u003C/strong> – blocks inherit any Shadcn UI theme instantly\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Copy-paste code\u003C/strong> with full responsiveness and accessibility\u003C/p>\u003C/li>\u003C/ul>\u003Cblockquote>\u003Cp>\u003Cstrong>Get 10% off Shadcnblocks! Use code \u003C/strong>\u003Ccode>TAILKITS10\u003C/code>\u003Cstrong> at checkout 🎉\u003C/strong>\u003C/p>\u003C/blockquote>\u003Ch2>What changed recently on Shadcnblocks?\u003C/h2>\u003Cp>\u003Cstrong>A new premium template, a big block drop, and quality-of-life updates.\u003C/strong> Here are the highlights with exact dates and sources:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>50 New Blocks\u003C/strong> a sizable expansion across categories; recent changelog entries flag a “50 New Blocks” release.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Improved Block Viewer + Open Source notes\u003C/strong>: UX updates called out in the changelog stream.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>CLI 3.0 namespaced registry support\u003C/strong>: better install/registry ergonomics referenced in the changelog.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma Kit v1.1.0\u003C/strong>: component visuals updated alongside block drops.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Templates\u003C/h2>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-22.png\" alt=\"Lumen Shadcn UI Template - Hero Section\" title=\"Lumen Template - Hero Section\" width=\"900\" height=\"1080\" loading=\"lazy\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"https://tailkits.com/plasma-4.png\" alt=\"Bento Card - Plasma Theme\">\u003C/p>\u003C/div>\u003C/div>\u003Cp>The bundle doesn’t just offer individual blocks; it also comes with a variety of fully designed templates to jumpstart your projects. You’ll find:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/lumen/\" data-as-button=\"false\">\u003Cstrong>Lumen\u003C/strong>\u003C/a> – Luminescent modern landing for Next.js & Astro.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/echo/\">Echo\u003C/a> - Modern SaaS marketing template with strong visual hierarchy and bold typography.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/metafi/\">Metafi\u003C/a> - Web3 and crypto-inspired template designed for DeFi, NFT, and blockchain projects.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/hive/\">Hive\u003C/a> - Community or collaboration-focused template built for SaaS platforms, team tools, and creator ecosystems.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/zippay/\" data-as-button=\"false\">\u003Cstrong>Zippay\u003C/strong>\u003C/a> – Fintech SaaS marketing site with multi-page flow.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/plasma/\" data-as-button=\"false\">\u003Cstrong>Plasma\u003C/strong>\u003C/a> – Developer SaaS/app with landing, pricing, docs, changelog.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/aspect/\" data-as-button=\"false\">\u003Cstrong>Aspect\u003C/strong>\u003C/a> – Corporate marketing site with a polished, professional tone.\u003C/p>\u003C/li>\u003C/ul>\u003Cul>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/scalar/\" data-as-button=\"false\">\u003Cstrong>Scalar\u003C/strong>\u003C/a> – Product/SaaS landing\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/sonic/\" data-as-button=\"false\">\u003Cstrong>Sonic\u003C/strong>\u003C/a> – Single-product launch\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/relative/\" data-as-button=\"false\">\u003Cstrong>Relative\u003C/strong>\u003C/a> – Marketing starter\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/charter/\" data-as-button=\"false\">\u003Cstrong>Charter\u003C/strong>\u003C/a> – Fin-tech landing\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/streamline/\" data-as-button=\"false\">\u003Cstrong>Streamline\u003C/strong>\u003C/a> – Minimal marketing page\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/templates/mainline/\" data-as-button=\"false\">\u003Cstrong>Mainline\u003C/strong>\u003C/a>\u003Cstrong> \u003Cem>(open source as of Oct 14, 2025)\u003C/em>\u003C/strong> – All-rounder landing kit\u003C/p>\u003C/li>\u003C/ul>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Ca href=\"https://tailkits.com/templates/streamline/\" data-as-button=\"false\">\u003Cimg src=\"/shadcnblocks-bundle.png\" alt=\"Streamline Template\" width=\"500\" height=\"1080\">\u003C/a>\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Ca href=\"https://tailkits.com/templates/relative/\" data-as-button=\"false\">\u003Cimg src=\"/shadcnblocks-bundle-2.png\" alt=\"Relative Template\" title=\"Relative\" width=\"500\" height=\"1080\">\u003C/a>\u003C/p>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Ca href=\"https://tailkits.com/templates/mainline/\" data-as-button=\"false\">\u003Cimg src=\"/shadcnblocks-bundle-3.png\" alt=\"Mainline Template\" title=\"Mainline\" width=\"500\" height=\"1080\">\u003C/a>\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Ca href=\"https://tailkits.com/templates/charter/\" data-as-button=\"false\">\u003Cimg src=\"/shadcnblocks-bundle-4.png\" alt=\"Charter Template\" title=\"Charter\" width=\"500\" height=\"1080\">\u003C/a>\u003C/p>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"2\" style=\"grid-template-columns: repeat(2, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-11.png\" alt=\"Scalar Template\" title=\"Scalar\" width=\"500\" height=\"1080\" loading=\"lazy\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-12.png\" alt=\"Sonic Template\" title=\"Sonic\" width=\"500\" height=\"1080\" loading=\"lazy\">\u003C/p>\u003C/div>\u003C/div>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch4>Pros ✅\u003C/h4>\u003Cul>\u003Cli>\u003Cp>Massive block count saves weeks of UI work\u003C/p>\u003C/li>\u003Cli>\u003Cp>Regular monthly drops keep designs fresh\u003C/p>\u003C/li>\u003Cli>\u003Cp>Works with the bleeding-edge Tailwind/Shadcn stack\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma files streamline designer–dev collaboration\u003C/p>\u003C/li>\u003Cli>\u003Cp>Single payment—no recurring fees\u003C/p>\u003C/li>\u003C/ul>\u003Ch4>Cons ⚠️\u003C/h4>\u003Cul>\u003Cli>\u003Cp>Requires comfort with Tailwind classes for deep tweaks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Marketing-focused templates; no e-commerce out of the box\u003C/p>\u003C/li>\u003Cli>\u003Cp>New users may face a small learning curve when theming\u003C/p>\u003C/li>\u003Cli>\u003Cp>Price is higher than piecemeal free snippets\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Next.js 15\u003C/p>\u003C/li>\u003Cli>\u003Cp>Astro 5\u003C/p>\u003C/li>\u003Cli>\u003Cp>React 19\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind CSS v4\u003C/p>\u003C/li>\u003Cli>\u003Cp>TypeScript & MDX\u003C/p>\u003C/li>\u003Cli>\u003Cp>Radix-powered Shadcn UI components\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma design system tokens\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"https://tailkits.com/_ipx/_/charter-4.png\" alt=\"Charter Image 1\">\u003C/p>","https://www.shadcnblocks.com/templates?via=tailkits",[289,293,294],{"id":290,"title":291,"slug":292},420,"MDX Support","mdx-support",{"id":197,"title":198,"slug":199},{"id":205,"title":206,"slug":207},"Shadcn UI Templates & Page Layouts",[297],{"id":298,"title":299,"slug":300},441,"Template Library","template-library","https://www.shadcnblocks.com/templates/?via=tailkits","12+ Shadcn Templates","Ship your SaaS or landing page in minutes. Get premium, full-page Shadcn UI templates built with Tailwind CSS. Production-ready layouts for marketing, dashboards, and more.",[173,177,181,272],[290,197,205],[298],"content:templates:1766.json","templates/1766.json","templates/1766",{"_path":311,"_dir":78,"_draft":6,"_partial":6,"_locale":7,"id":312,"type":78,"title":121,"slug":122,"published_at":313,"order":12,"created_at":313,"updated_at":314,"faqs":315,"tags":328,"color":334,"cover":337,"images":338,"is_hot":64,"content":339,"is_paid":64,"demo_url":340,"features":341,"seo_title":344,"categories":345,"target_url":349,"description":350,"is_featured":64,"is_free_listing":6,"seo_description":351,"tags_ids":352,"features_ids":353,"categories_ids":354,"_id":355,"_type":19,"_source":20,"_file":356,"_stem":357,"_extension":19},"/templates/2178",2178,"2025-11-29 15:10:56","2026-03-11 20:21:58",[316,319,322,325],{"title":317,"content":318},"Does Metafi come for both Next.js and Astro?","Yes. You get a Next.js 15 version and an Astro 5 version with the same design system. ",{"title":320,"content":321},"Is a Figma design file included?","Yes, Metafi includes a Figma file so your design team can customize the system before coding. ",{"title":323,"content":324},"How many pages does Metafi include?","It ships with 10+ pages built from reusable sections, covering core marketing flows like landing and pricing. ",{"title":326,"content":327},"Who is Metafi best for?","Metafi is ideal for SaaS and product teams who want a premium marketing site and are comfortable working with shadcn/ui, Tailwind and TypeScript.",[329,330,331,332,333],{"id":173,"title":174,"slug":175},{"id":177,"title":178,"slug":179},{"id":181,"title":182,"slug":183},{"id":272,"title":273,"slug":274},{"id":185,"title":186,"slug":187},{"id":335,"title":336,"slug":336},33,"purple","/metafi-3.png",[],"\u003Cp>Metafi is a modern shadcn/ui + Tailwind template for polished SaaS and marketing sites, available for both Next.js 15 and Astro 5, with 100+ components, 10+ pages and a Figma file so you can launch a sophisticated site fast.\u003C/p>\u003Cp>\u003Cimg src=\"/metafi.png\" alt=\"Metafi; multi page marketing template built on shadcn/ui and Tailwind CSS 4\" title=\"Metafi shadcn/ui website template\" width=\"1440\" height=\"1080\" loading=\"lazy\">It’s aimed at teams who want a premium, Stripe like marketing site with strong typography, layered cards and dashboard previews, but still want full control over the codebase with TypeScript and MDX content.\u003C/p>\u003Ch2>\u003Cimg src=\"/metafi-2.png\" alt=\"Metafi shadcn/ui marketing template\" title=\"Metafi shadcn/ui template\" width=\"1440\" height=\"1080\" loading=\"lazy\">What Are the Features of Metafi? ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>100+ shadcn/ui based components, styled for Tailwind 4\u003C/p>\u003C/li>\u003Cli>\u003Cp>10+ ready made pages for core marketing flows\u003C/p>\u003C/li>\u003Cli>\u003Cp>Next.js 15 and Astro editions included in one purchase\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma file so designers can tweak layouts and tokens\u003C/p>\u003C/li>\u003Cli>\u003Cp>All pages assembled from reusable block sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>MDX + JSON content for flexible copy and data\u003C/p>\u003C/li>\u003Cli>\u003Cp>Responsive, mobile first design\u003C/p>\u003C/li>\u003Cli>\u003Cp>SEO + metadata setup for the Next.js version\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What Components Are Included With Metafi? 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Pages:\u003C/strong> multi section landing, features, pricing, blog layouts and support style pages (built from blocks so you can remix them).\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>UI elements:\u003C/strong> cards, stats, logo grids, feature rows, CTAs, navbars and footers based on shadcn/ui.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Assets:\u003C/strong> full Figma file matching the production template, plus Markdown/MDX content structure for docs or articles.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Everything is block based, so you can drag in more hero, pricing or FAQ sections from the broader Shadcnblocks library when you need them.\u003C/p>\u003Chr>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Modern, polished layout ideal for SaaS and fintech style marketing sites\u003C/p>\u003C/li>\u003Cli>\u003Cp>Both Next.js 15 and Astro 5 supported\u003C/p>\u003C/li>\u003Cli>\u003Cp>100+ components and 10+ pages out of the box\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma file included for fast brand customization\u003C/p>\u003C/li>\u003Cli>\u003Cp>Block based structure makes it easy to extend with other Shadcnblocks sections\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Best suited to teams comfortable with shadcn/ui and Tailwind 4\u003C/p>\u003C/li>\u003Cli>\u003Cp>Content is MDX/JSON by default, so you’ll wire your own CMS if you want a GUI\u003C/p>\u003C/li>\u003Cli>\u003Cp>Styling leans toward sleek SaaS/fintech; very playful brands may want heavier visual tweaks\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Next.js 15 app router build\u003C/strong> with SEO and metadata helpers preconfigured\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Astro 5 edition\u003C/strong> for content heavy or static first sites\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind 4 utilities and shadcn/ui components ready to match your existing design tokens\u003C/p>\u003C/li>\u003Cli>\u003Cp>MDX + JSON content that can be mapped to tools like Payload or Sanity via Shadcnblocks CMS addons\u003C/p>\u003C/li>\u003C/ul>","https://metafi-astro-template.vercel.app/?via=tailkits",[342,343],{"id":197,"title":198,"slug":199},{"id":205,"title":206,"slug":207},"Metafi SaaS Template for Next.js & Astro",[346,347,348],{"id":211,"title":212,"slug":213},{"id":221,"title":222,"slug":223},{"id":229,"title":230,"slug":231},"https://www.shadcnblocks.com/template/metafi?via=tailkits","shadcn/ui marketing starter kit","Build a clean, conversion focused SaaS landing with Metafi, a shadcn/ui and Tailwind template available for both Next.js and Astro projects. ",[173,177,181,272,185],[197,205],[211,221,229],"content:templates:2178.json","templates/2178.json","templates/2178",{"_path":359,"_dir":78,"_draft":6,"_partial":6,"_locale":7,"id":360,"type":78,"title":109,"slug":110,"published_at":361,"order":362,"created_at":361,"updated_at":363,"faqs":364,"tags":377,"color":382,"cover":383,"images":384,"is_hot":6,"content":385,"is_paid":64,"demo_url":386,"features":387,"seo_title":390,"categories":391,"target_url":395,"description":396,"is_featured":64,"seo_description":397,"tags_ids":398,"features_ids":399,"categories_ids":400,"_id":401,"_type":19,"_source":20,"_file":402,"_stem":403,"_extension":19},"/templates/2113",2113,"2025-08-28 20:56:38",9,"2025-09-11 12:08:34",[365,368,371,374],{"title":366,"content":367},"Does Plasma include a docs system?","Yes—docs are set up with Fumadocs, ready to write in MDX. ",{"title":369,"content":370},"Are both Next.js and Astro versions available?","Yes, it ships with Next.js 15 and Astro 5 editions. ",{"title":372,"content":373},"Is the design file included?","Yes, a Figma file is included with the template.",{"title":375,"content":376},"What pages are prebuilt?","Landing, pricing, docs, changelog, and a download page; plus MDX blog.",[378,379,380,381],{"id":173,"title":174,"slug":175},{"id":177,"title":178,"slug":179},{"id":181,"title":182,"slug":183},{"id":272,"title":273,"slug":274},{"id":335,"title":336,"slug":336},"/plasma.png",[],"\u003Ch2>What Is the Plasma Template?\u003C/h2>\u003Cp>\u003Cimg src=\"/plasma-4.png\" alt=\"Bento Card - Plasma Theme\" title=\"Bento Card - Plasma Theme\" width=\"1200\" height=\"744\" loading=\"lazy\">\u003C/p>\u003Cblockquote>\u003Cp>\u003Cstrong>Get 10% off Shadcnblocks! Use code \u003C/strong>\u003Ccode>TAILKITS10\u003C/code>\u003Cstrong> at checkout 🎉\u003C/strong>\u003C/p>\u003C/blockquote>\u003Cp>Plasma is a \u003Cstrong>developer-focused SaaS/app website template\u003C/strong> for \u003Cstrong>Next.js 15\u003C/strong> and \u003Cstrong>Astro 5\u003C/strong>, styled with \u003Cstrong>shadcn/ui\u003C/strong> and \u003Cstrong>Tailwind 4\u003C/strong>. It ships with key pages out of the box—\u003Cstrong>landing, pricing, docs, changelog, and download\u003C/strong>—plus a \u003Cstrong>Figma file\u003C/strong>, \u003Cstrong>MDX content\u003C/strong>, and a block-based layout so you can drop in more sections easily.\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cp>\u003Cimg src=\"/plasma-2.png\" alt=\"Plasma Template - Download CTA\" title=\"Plasma Template - Download CTA\" width=\"1080\" height=\"810\" loading=\"lazy\">\u003C/p>\u003Cul>\u003Cli>\u003Cp>100+ components organized into reusable sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>10+ ready pages (landing, pricing, docs, changelog, download, more)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Next.js 15 and Astro 5 editions included\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built on shadcn/ui + Tailwind CSS v4 (TypeScript, Markdown/MDX)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Docs scaffolded with \u003Cstrong>Fumadocs\u003C/strong>; blog/changelog via MDX\u003C/p>\u003C/li>\u003Cli>\u003Cp>SEO/meta setup for Next.js, mobile-first responsive design\u003C/p>\u003C/li>\u003Cli>\u003Cp>Extend quickly with Shadcnblocks’ ~780+ block library\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Pages:\u003C/strong> Landing, Pricing, Docs, Changelog, Download, Blog (MDX)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>UI elements:\u003C/strong> shadcn/ui components styled for Tailwind 4\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Assets:\u003C/strong> Figma file with the full design system\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/plasma-3.png\" alt=\"Dark Mode Changelog UI\" title=\"Plasma Theme - Dark Mode Changelog UI\" width=\"1080\" height=\"810\" loading=\"lazy\">\u003C/p>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Two builds (Next.js 15 + Astro 5) for flexible stacks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Real docs/changelog scaffolding out of the box (Fumadocs + MDX)\u003C/p>\u003C/li>\u003Cli>\u003Cp>100+ components, easy to expand with Shadcnblocks library\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma included for faster brand customization\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Content is \u003Cstrong>MDX/JSON\u003C/strong> by default—great for devs, but no CMS baked in\u003C/p>\u003C/li>\u003Cli>\u003Cp>Assumes comfort with \u003Cstrong>shadcn/ui\u003C/strong> and \u003Cstrong>Tailwind 4\u003C/strong> conventions\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Next.js 15 app\u003C/strong> with SEO/meta helpers\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Astro 5\u003C/strong> edition for content-first sites\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>MDX\u003C/strong> for blog/changelog; \u003Cstrong>Fumadocs\u003C/strong> for docs\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind 4 + shadcn/ui\u003C/strong> components, fully responsive\u003C/p>\u003C/li>\u003Cli>\u003Cp>Expand sections using \u003Cstrong>Shadcnblocks\u003C/strong> block library (~780+ blocks)\u003C/p>\u003C/li>\u003C/ul>","https://plasma-astro-template.vercel.app?via=tailkits",[388,389],{"id":197,"title":198,"slug":199},{"id":205,"title":206,"slug":207},"Plasma Template | Next.js & Astro SaaS UI (shadcn/ui)",[392,393,394],{"id":215,"title":202,"slug":203},{"id":221,"title":222,"slug":223},{"id":229,"title":230,"slug":231},"https://www.shadcnblocks.com/template/plasma?via=tailkits","Developer SaaS template for Next.js 15 & Astro 5","Developer SaaS template with landing, pricing, docs, changelog and download pages. Built on shadcn/ui + Tailwind. For Next.js 15 and Astro 5. Figma included. ",[173,177,181,272],[197,205],[215,221,229],"content:templates:2113.json","templates/2113.json","templates/2113",{"_path":405,"_dir":78,"_draft":6,"_partial":6,"_locale":7,"id":406,"type":78,"title":97,"slug":98,"published_at":407,"order":408,"created_at":407,"updated_at":409,"faqs":410,"tags":423,"color":429,"cover":432,"images":433,"is_hot":64,"content":434,"is_paid":64,"demo_url":435,"features":436,"seo_title":439,"categories":440,"target_url":435,"description":444,"is_featured":64,"seo_description":445,"tags_ids":446,"features_ids":447,"categories_ids":448,"_id":449,"_type":19,"_source":20,"_file":450,"_stem":451,"_extension":19},"/templates/2171",2171,"2025-10-30 01:27:20",19,"2025-10-30 20:43:32",[411,414,417,420],{"title":412,"content":413},"Is Lumen beginner-friendly?","Yes, sections are block-based, so you can rearrange and ship quickly without designing from scratch.",{"title":415,"content":416},"Does it include dark mode and responsive layouts?","Yes, layouts are mobile-first and styled with Tailwind; dark mode patterns are straightforward with shadcn/ui.",{"title":418,"content":419},"Can I use it with either Next.js or Astro?","Yes, there are separate editions for Next.js 15 and Astro.",{"title":421,"content":422},"What files help with customization?","A Figma file is included for design changes, plus MDX/JSON data to edit content easily.",[424,425,426,427,428],{"id":173,"title":174,"slug":175},{"id":177,"title":178,"slug":179},{"id":181,"title":182,"slug":183},{"id":272,"title":273,"slug":274},{"id":185,"title":186,"slug":187},{"id":430,"title":431,"slug":431},35,"pink","/lumen-2.png",[],"\u003Cdiv data-native-video=\"true\" class=\"responsive\">\u003Cvideo autoplay=\"true\" loop=\"true\" src=\"https://ik.imagekit.io/landingpagefyi/Tailkits/lumen-theme_a2CBbcWyZ.mp4?updatedAt=1761787975322\" width=\"1600\" height=\"900\">\u003C/video>\u003C/div>\u003Cp>\u003Cstrong>Lumen\u003C/strong> is a modern landing-page template for \u003Cstrong>Next.js 15\u003C/strong> and \u003Cstrong>Astro\u003C/strong>, built on \u003Cstrong>shadcn/ui\u003C/strong> + \u003Cstrong>Tailwind 4\u003C/strong>. It ships with \u003Cstrong>10+ pages\u003C/strong>, \u003Cstrong>100+ components\u003C/strong>, \u003Cstrong>SEO-ready metadata\u003C/strong>, and a \u003Cstrong>Figma file \u003C/strong>so you can launch a polished marketing site fast.\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Price:\u003C/strong> $79.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Version:\u003C/strong> 1.0.0.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Last updated:\u003C/strong> Oct 28, 2025\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What Is the Lumen Template?\u003C/h2>\u003Cp>\u003Cimg src=\"/lumen.png\" alt=\"Lumen Shadcn UI Template - Pricing Section\" title=\"Lumen Template - Pricing Section\" width=\"1440\" height=\"1080\" loading=\"lazy\">\u003C/p>\u003Cp>Lumen is a \u003Cstrong>landing-page template\u003C/strong> built with \u003Cstrong>shadcn/ui\u003C/strong> and \u003Cstrong>Tailwind 4\u003C/strong>, available for \u003Cstrong>Next.js 15\u003C/strong> and \u003Cstrong>Astro\u003C/strong>. It includes \u003Cstrong>10+ pages\u003C/strong>, \u003Cstrong>100+ components\u003C/strong>, SEO metadata, and a \u003Cstrong>Figma\u003C/strong> file to speed up customization. \u003Cstrong>Version 1.0.0\u003C/strong>, last updated \u003Cstrong>Oct 28, 2025\u003C/strong>. \u003Cstrong>Price:\u003C/strong> \u003Cstrong>$79\u003C/strong>.\u003C/p>\u003Cp>\u003Cstrong>Key stats:\u003C/strong> \u003Cstrong>100+ components\u003C/strong>, \u003Cstrong>10+ pages\u003C/strong>, \u003Cstrong>Next.js 15 & Astro\u003C/strong>, \u003Cstrong>Tailwind 4\u003C/strong>, \u003Cstrong>Figma included\u003C/strong>, \u003Cstrong>SEO-ready\u003C/strong>.\u003C/p>\u003Cp>\u003Cstrong>Definition:\u003C/strong> \u003Cem>MDX\u003C/em> — Markdown + JSX; lets you write content with components. \u003Cstrong>SEO metadata\u003C/strong> — head tags (title/description & Open Graph) preconfigured for search and social sharing.\u003C/p>\u003Cp>\u003Cimg src=\"/lumen-3.png\" alt=\"Lumen shadcn/ui Theme - About Us Page\" title=\"About Us Page from Lumen shadcn/ui Theme\" width=\"1440\" height=\"1080\" loading=\"lazy\">\u003C/p>\u003Ch2>What Features Does Lumen Include?\u003C/h2>\u003Cp>\u003C/p>\u003Cp>You get the essentials to launch a polished marketing site quickly. In short: \u003Cstrong>component density\u003C/strong>, \u003Cstrong>prebuilt pages\u003C/strong>, and \u003Cstrong>clean, responsive UI\u003C/strong> built on \u003Cstrong>shadcn/ui\u003C/strong> + \u003Cstrong>Tailwind 4\u003C/strong>.\u003C/p>\u003Ch3>Features ✨\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>100+ components\u003C/strong> crafted with shadcn/ui + Tailwind 4\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>10+ pages\u003C/strong> covering core marketing flows\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Next.js 15 & Astro\u003C/strong> editions for your preferred stack\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma file\u003C/strong> for rapid design edits\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>SEO & metadata\u003C/strong> preconfigured\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Responsive\u003C/strong>, mobile-first layouts\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>MDX & JSON data\u003C/strong> support for content workflows\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What’s Included Out of the Box?\u003C/h2>\u003Cp>You get a complete landing experience: hero, features, pricing, testimonials, and more—structured as \u003Cstrong>block sections\u003C/strong> so you can swap or add sections from the Shadcnblocks library.\u003C/p>\u003Ch3>Included Components 📒\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Pages:\u003C/strong> Home/landing, Features, Pricing, Testimonials, About, Blog/Posts, Contact, Auth, Changelog, Careers (and more)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Sections:\u003C/strong> Hero, Feature grids, Logos, FAQs, CTA, Stats, Gallery, Navbar/Footer, etc.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Design assets:\u003C/strong> \u003Cstrong>Figma\u003C/strong> source for brand fit & quick tweaks\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Content:\u003C/strong> \u003Cstrong>MDX + JSON\u003C/strong> data wiring for posts/sections\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What Are the Pros and Cons?\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Fast launch\u003C/strong>: 10+ ready pages + 100+ components\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Two stacks\u003C/strong>: \u003Cstrong>Next.js 15\u003C/strong> or \u003Cstrong>Astro\u003C/strong>—choose your build model\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Design handoff\u003C/strong>: \u003Cstrong>Figma\u003C/strong> included\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>SEO-ready\u003C/strong>: sensible metadata defaults\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Extendable\u003C/strong>: block-based sections; drop in more from the library\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Not a site builder\u003C/strong>: you still work in code (by design)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Marketing focus\u003C/strong>: if you need complex app UI/dashboards, you’ll add more blocks later (common in this niche).\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How Does Lumen Integrate With Your Stack?\u003C/h2>\u003Cp>Lumen targets modern, component-driven workflows and plays nicely with popular toolchains.\u003C/p>\u003Ch3>Integration (in bullet points)\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Next.js 15\u003C/strong> project setup (Routing, Metadata, etc.)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Astro\u003C/strong> islands for fast marketing pages\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind 4\u003C/strong> utility-first styling\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>shadcn/ui\u003C/strong> primitives + accessible patterns\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>MDX\u003C/strong> for docs/blog content flows\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma\u003C/strong> → dev handoff for brand customization\u003C/p>\u003C/li>\u003C/ul>","https://www.shadcnblocks.com/template/lumen?via=tailkits",[437,438],{"id":197,"title":198,"slug":199},{"id":205,"title":206,"slug":207},"Lumen - shadcn/ui + Tailwind 4 Landing Page Template",[441,442,443],{"id":211,"title":212,"slug":213},{"id":221,"title":222,"slug":223},{"id":229,"title":230,"slug":231},"10+ pages, 100+ comps, SEO-ready, Figma included","Launch a modern marketing site fast with Lumen—10+ pages, 100+ components, shadcn/ui + Tailwind 4, SEO-ready, Figma included. For Next.js and Astro. ",[173,177,181,272,185],[197,205],[211,221,229],"content:templates:2171.json","templates/2171.json","templates/2171",{"_path":453,"_dir":454,"_draft":6,"_partial":6,"_locale":7,"id":455,"type":454,"title":456,"slug":457,"published_at":458,"order":12,"created_at":458,"updated_at":459,"color":460,"cover":463,"is_hot":64,"is_enabled":64,"target_url":464,"button_text":465,"large_badge_text":466,"small_badge_text":467,"large_description":468,"small_description":469,"_id":470,"_type":19,"_source":20,"_file":471,"_stem":472,"_extension":19},"/elite_banner/2121","elite_banner",2121,"Tailkits UI","tailkits-ui","2025-08-31 20:31:36","2026-03-06 19:28:43",{"id":461,"title":462,"slug":462},39,"fuchsia","/tailkits-ui-hero-alt-4.png","https://tailkits.com/ui?ref=elite","Add to Cursor / Claude →","Built for MCP","NEW","Force your AI to use a professional design system. Build brand-matched, consistent UIs with 200+ vetted components.","Consistent UI, zero hallucinations","content:elite_banner:2121.json","elite_banner/2121.json","elite_banner/2121",[474,514,549,574,600,628,654,681,706],{"_path":475,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":477,"type":476,"title":478,"slug":479,"published_at":480,"order":112,"created_at":480,"updated_at":480,"faqs":481,"tags":482,"color":483,"cover":486,"images":487,"is_hot":6,"content":488,"is_paid":64,"features":489,"seo_title":502,"categories":503,"target_url":505,"description":506,"is_featured":6,"is_free_listing":64,"seo_description":507,"tags_ids":508,"features_ids":509,"categories_ids":510,"_id":511,"_type":19,"_source":20,"_file":512,"_stem":513,"_extension":19},"/tools/2260","tools",2260,"Lineicons","lineicons","2026-03-17 11:34:15",[],[],{"id":484,"title":485,"slug":485},49,"gray","/lineicons.jpg",[],null,[490,494,498],{"id":491,"title":492,"slug":493},2251,"Figma plugin","figma-plugin",{"id":495,"title":496,"slug":497},2248,"React Package","react-package",{"id":499,"title":500,"slug":501},2250,"One-time payment","one-time-payment","Lineicons - Icon Library with 28K+ Icons, 14 Styles",[504],{"id":26,"title":27,"slug":28},"https://lineicons.com/","28K+ SVG icons, 14 styles, free CDN included","Lineicons is an icon library offering 28,000+ pixel-perfect SVG icons in 14 styles, 60+ categories, free CDN, Figma plugin, and lifetime plans from $59.",[],[491,495,499],[26],"content:tools:2260.json","tools/2260.json","tools/2260",{"_path":515,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":516,"type":476,"title":517,"slug":518,"published_at":519,"order":61,"created_at":519,"updated_at":520,"faqs":521,"tags":522,"color":523,"cover":524,"images":525,"is_hot":6,"content":488,"is_paid":64,"features":526,"seo_title":537,"categories":538,"target_url":540,"description":541,"is_featured":6,"is_free_listing":64,"seo_description":542,"tags_ids":543,"features_ids":544,"categories_ids":545,"_id":546,"_type":19,"_source":20,"_file":547,"_stem":548,"_extension":19},"/tools/2259",2259,"Icons8","icons8","2026-03-17 11:30:35","2026-03-17 11:31:15",[],[],{"id":484,"title":485,"slug":485},"/icons8.png",[],[527,528,529,533],{"id":491,"title":492,"slug":493},{"id":495,"title":496,"slug":497},{"id":530,"title":531,"slug":532},2247,"Web App","web-app",{"id":534,"title":535,"slug":536},2256,"MCP","mcp","Icons8 - Icons, Illustrations, Photos, AI Tools",[539],{"id":26,"title":27,"slug":28},"https://icons8.com/","Icons, illustrations, and AI tools for designers","Icons8 is a design asset platform with 1.4M+ icons, illustrations, photos, and AI tools like Smart Upscaler and Background Remover for designers and developers.",[],[491,495,530,534],[26],"content:tools:2259.json","tools/2259.json","tools/2259",{"_path":550,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":551,"type":476,"title":552,"slug":553,"published_at":554,"order":88,"created_at":554,"updated_at":554,"faqs":555,"tags":556,"color":488,"cover":557,"images":558,"is_hot":6,"content":488,"is_paid":64,"features":559,"seo_title":562,"categories":563,"target_url":565,"description":566,"is_featured":6,"is_free_listing":64,"seo_description":567,"tags_ids":568,"features_ids":569,"categories_ids":570,"_id":571,"_type":19,"_source":20,"_file":572,"_stem":573,"_extension":19},"/tools/2258",2258,"Font Awesome","font-awesome","2026-03-17 11:27:30",[],[],"/font-awesome.png",[],[560,561],{"id":491,"title":492,"slug":493},{"id":495,"title":496,"slug":497},"Font Awesome - 63K Icons, Free SVG Toolkit",[564],{"id":26,"title":27,"slug":28},"https://fontawesome.com/","63K+ icons, 30 styles, free SVG toolkit.","Font Awesome is the web's most popular icon library with 63,000+ SVG icons in 30 styles. Free tier available, easy to add via CDN or npm to any project.",[],[491,495],[26],"content:tools:2258.json","tools/2258.json","tools/2258",{"_path":575,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":576,"type":476,"title":577,"slug":578,"published_at":579,"order":362,"created_at":579,"updated_at":579,"faqs":580,"tags":581,"color":582,"cover":583,"images":584,"is_hot":6,"content":488,"is_paid":6,"features":585,"seo_title":588,"categories":589,"target_url":591,"description":592,"is_featured":6,"is_free_listing":64,"seo_description":593,"tags_ids":594,"features_ids":595,"categories_ids":596,"_id":597,"_type":19,"_source":20,"_file":598,"_stem":599,"_extension":19},"/tools/2257",2257,"Iconic","iconic","2026-03-17 11:24:28",[],[],{"id":484,"title":485,"slug":485},"/iconic.jpeg",[],[586,587],{"id":491,"title":492,"slug":493},{"id":495,"title":496,"slug":497},"Iconic - Free SVG Icons with React, Vue, Figma",[590],{"id":26,"title":27,"slug":28},"https://iconic.app/","1,500+ SVG icons with React, Vue, and Figma support","Iconic is a pixel-perfect SVG icon library with 1,500+ icons across 40+ categories. Free tier available. Includes React, Vue libraries and a Figma file with Pro.",[],[491,495],[26],"content:tools:2257.json","tools/2257.json","tools/2257",{"_path":601,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":602,"type":476,"title":603,"slug":604,"published_at":605,"order":606,"created_at":605,"updated_at":607,"faqs":608,"tags":609,"color":488,"cover":610,"images":611,"is_hot":6,"content":488,"is_paid":6,"features":612,"seo_title":616,"categories":617,"target_url":619,"description":620,"is_featured":6,"is_free_listing":64,"seo_description":621,"tags_ids":622,"features_ids":623,"categories_ids":624,"_id":625,"_type":19,"_source":20,"_file":626,"_stem":627,"_extension":19},"/tools/2255",2255,"Hugeicons","hugeicons","2026-03-17 11:19:09",10,"2026-03-17 11:19:47",[],[],"/hugeicons.png",[],[613,614,615],{"id":491,"title":492,"slug":493},{"id":495,"title":496,"slug":497},{"id":534,"title":535,"slug":536},"Hugeicons - 51,000+ Icons for Designers, Developers",[618],{"id":26,"title":27,"slug":28},"https://hugeicons.com/","51,000+ icons in 10 styles for designers and devs","Hugeicons gives you 51,000+ handcrafted SVG icons in 10 styles. Works with React, Figma, Vue, Flutter and more. Free tier included, Pro from $99/year.",[],[491,495,534],[26],"content:tools:2255.json","tools/2255.json","tools/2255",{"_path":629,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":630,"type":476,"title":631,"slug":632,"published_at":633,"order":634,"created_at":633,"updated_at":633,"faqs":635,"tags":636,"color":637,"cover":638,"images":639,"is_hot":6,"content":488,"is_paid":6,"features":640,"seo_title":642,"categories":643,"target_url":645,"description":646,"is_featured":6,"is_free_listing":64,"seo_description":647,"tags_ids":648,"features_ids":649,"categories_ids":650,"_id":651,"_type":19,"_source":20,"_file":652,"_stem":653,"_extension":19},"/tools/2254",2254,"Lordicon","lordicon","2026-03-17 11:15:56",11,[],[],{"id":484,"title":485,"slug":485},"/lordicon.gif",[],[641],{"id":491,"title":492,"slug":493},"Lordicon - Animated Icon Library With Hover, Loop, Morph",[644],{"id":26,"title":27,"slug":28},"https://lordicon.com/","42,000+ animated icons, free and PRO plans","Browse 42,000+ animated icons in Wired, System, and Doodle families. Customize, trigger animations, and export in 10+ formats. Free to start.",[],[491],[26],"content:tools:2254.json","tools/2254.json","tools/2254",{"_path":655,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":656,"type":476,"title":657,"slug":658,"published_at":659,"order":660,"created_at":659,"updated_at":659,"faqs":661,"tags":662,"color":663,"cover":664,"images":665,"is_hot":6,"content":488,"is_paid":64,"features":666,"seo_title":669,"categories":670,"target_url":672,"description":673,"is_featured":6,"is_free_listing":64,"seo_description":674,"tags_ids":675,"features_ids":676,"categories_ids":677,"_id":678,"_type":19,"_source":20,"_file":679,"_stem":680,"_extension":19},"/tools/2253",2253,"Streamline HQ","streamline-hq","2026-03-17 11:13:27",12,[],[],{"id":484,"title":485,"slug":485},"/streamline-hq.png",[],[667,668],{"id":491,"title":492,"slug":493},{"id":530,"title":531,"slug":532},"Streamline HQ - 438K Icons, Illustrations and Emoji",[671],{"id":26,"title":27,"slug":28},"https://home.streamlinehq.com/","438K+ icons, illustrations, and emoji for designers","Streamline HQ is the world's largest icon and illustration library with 438K+ assets across 34 families. Free and pro plans, Figma plugin included.",[],[491,530],[26],"content:tools:2253.json","tools/2253.json","tools/2253",{"_path":682,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":683,"type":476,"title":684,"slug":685,"published_at":686,"order":687,"created_at":686,"updated_at":686,"faqs":688,"tags":689,"color":488,"cover":690,"images":691,"is_hot":6,"content":488,"is_paid":6,"features":692,"seo_title":694,"categories":695,"target_url":697,"description":698,"is_featured":6,"is_free_listing":64,"seo_description":699,"tags_ids":700,"features_ids":701,"categories_ids":702,"_id":703,"_type":19,"_source":20,"_file":704,"_stem":705,"_extension":19},"/tools/2252",2252,"Phosphor Icons","phosphor-icons","2026-03-17 11:04:37",13,[],[],"/phosphor-icons.png",[],[693],{"id":491,"title":492,"slug":493},"Phosphor Icons - Free SVG Icon Library in 6 Weights",[696],{"id":26,"title":27,"slug":28},"https://phosphoricons.com/","Free icon library, 1,500+ SVGs in 6 weights","A flexible, open source icon family with 1,500+ icons in 6 weights including duotone. Use Phosphor in React, Vue, web fonts, or Figma - completely free.",[],[491],[26],"content:tools:2252.json","tools/2252.json","tools/2252",{"_path":707,"_dir":476,"_draft":6,"_partial":6,"_locale":7,"id":708,"type":476,"title":709,"slug":710,"published_at":711,"order":712,"created_at":711,"updated_at":713,"faqs":714,"tags":715,"color":716,"cover":717,"images":718,"is_hot":6,"content":488,"is_paid":64,"features":719,"seo_title":727,"categories":728,"target_url":730,"description":731,"is_featured":6,"is_free_listing":64,"seo_description":732,"tags_ids":733,"features_ids":734,"categories_ids":735,"_id":736,"_type":19,"_source":20,"_file":737,"_stem":738,"_extension":19},"/tools/2245",2245,"Nucleo Icons","nucleo-icons","2026-03-17 10:48:37",15,"2026-03-17 10:58:41",[],[],{"id":484,"title":485,"slug":485},"/nucleo-icons.png",[],[720,721,725,726],{"id":495,"title":496,"slug":497},{"id":722,"title":723,"slug":724},2249,"Lifetime updates","lifetime-updates",{"id":530,"title":531,"slug":532},{"id":499,"title":500,"slug":501},"Nucleo Icons - The Ultimate SVG Icon Bundle",[729],{"id":26,"title":27,"slug":28},"https://nucleoapp.com/","35,000+ premium SVG icons with app & React packages","Nucleo gives you 35,000+ premium SVG icons, a powerful icon management app, and React packages — the go-to icon bundle for designers and developers since 2014.",[],[495,722,530,499],[26],"content:tools:2245.json","tools/2245.json","tools/2245",{"_path":740,"_dir":741,"_draft":6,"_partial":6,"_locale":7,"id":742,"type":741,"title":743,"slug":741,"published_at":744,"order":12,"created_at":744,"updated_at":745,"faqs":746,"seo_content":768,"featured_title":769,"page_seo_title":770,"page_hero_title":771,"featured_description":772,"page_seo_description":773,"_id":774,"_type":19,"_source":20,"_file":775,"_stem":776,"_extension":19},"/tools-static-texts/1510","tools-static-texts",1510,"Tools Static Texts","2024-05-29 01:39:20","2026-03-07 21:00:18",[747,750,753,756,759,762,765],{"title":748,"content":749},"Are Tailwind CSS tools free?","Many Tailwind CSS tools are free, but some premium tools offer advanced features and pre-built components that can be worth the investment.",{"title":751,"content":752},"How do Tailwind CSS tools improve workflow?","Tailwind CSS tools automate repetitive tasks, ensure design consistency, and provide pre-built components, which can save time and boost productivity.",{"title":754,"content":755},"Can beginners use Tailwind CSS tools?","Yes! Many Tailwind CSS tools are user-friendly and come with detailed guides and tutorials, making them perfect for beginners.",{"title":757,"content":758},"What are some must-have Tailwind CSS tools for a new project?","Some essential tools include Tailwind UI for pre-built components, Heroicons for SVG icons, Tailwind Play for real-time experimentation, and PurgeCSS for optimizing your CSS.",{"title":760,"content":761},"How do I integrate Tailwind CSS tools into my project?","Integration methods vary by tool, but most provide clear instructions on their websites. Common methods include npm packages, CDNs, and plugin setups.",{"title":763,"content":764},"What's a good Tailwind CSS tool for beginners?","Start with a playground tool. You can try out Tailwind CSS without setting anything up on your computer.",{"title":766,"content":767},"Can these tools make my website faster?","Yes, some tools can make your CSS smaller, which can speed up your site.","\u003Ch2>Boost Your Web Development with Tailwind CSS Tools\u003C/h2>\u003Cp>Want to level up your web design skills? Tailwind CSS tools are here to help! These handy tools can make your coding faster and more fun. Let's explore how they can change the way you work.\u003C/p>\u003Cblockquote>\u003Cp>\u003Cstrong>Tired of wrestling with bloated style‑sheets or rigid UI kits?\u003C/strong>\u003Cbr>Tailwind CSS tools give you a \u003Cem>utility‑first\u003C/em> workflow that’s both lightning fast and incredibly flexible, one reason the framework is on track to overtake Bootstrap in 2025 as the de facto front‑end standard. From \u003Cstrong>IDE plug‑ins that autocomplete classes\u003C/strong> to \u003Cstrong>AI‑powered page builders\u003C/strong>, today’s ecosystem lets you ship polished, performant sites in a fraction of the time.\u003C/p>\u003C/blockquote>\u003Ch3>1. Developer productivity boosters\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Ca href=\"https://tailkits.com/tools/tailwind-css-intellisense/\" data-as-button=\"false\">\u003Cstrong>Tailwind CSS IntelliSense\u003C/strong>\u003C/a>\u003Cstrong> for VS Code\u003C/strong>—real‑time autocompletion, linting and JSDoc hints so you write error‑free markup quicker.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Official Playground (\u003Ca href=\"https://tailkits.com/tools/tailwind-play/\" data-as-button=\"false\">Tailwind Play\u003C/a>)\u003C/strong>—experiment with JIT features in‑browser and share live demos without a build step.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>2. Visual editors & drag‑and‑drop generators\u003C/h3>\u003Cp>Whether you prefer \u003Ca href=\"https://tailkits.com/tools/shuffle-tailwind-editor/\" data-as-button=\"false\">\u003Cem>Shuffle\u003C/em>\u003C/a>, \u003Ca href=\"https://tailkits.com/tools/windframe-landing-page-builder/\" data-as-button=\"false\">\u003Cem>Windframe\u003C/em>\u003C/a> or the new \u003Ca href=\"https://tailkits.com/tools/categories/landing-page-builders/\" data-as-button=\"false\">\u003Cstrong>AI landing page builders\u003C/strong>\u003C/a> listed in our catalogue, these tools let designers create production‑ready code that developers can slot straight into React, Vue or Astro projects—no hand‑offs, no refactors.\u003C/p>\u003Ch3>3. Performance & build optimisation\u003C/h3>\u003Cp>Enable \u003Cstrong>PurgeCSS/Tailwind’s built‑in \u003C/strong>\u003Ccode>content\u003C/code> purge to keep your final bundle under 10 KB compressed.\u003C/p>\u003Cp>Pair it with modern hosting and you’ll pass Core Web Vitals without extra tweaking.\u003C/p>\u003Ch3>4. Boilerplates & starters\u003C/h3>\u003Cp>Kick‑start SaaS dashboards, blogs or portfolios with \u003Cstrong>Next.js, \u003Ca href=\"https://tailkits.com/tools/sveltekit-boilerplate/\" data-as-button=\"false\">SvelteKit\u003C/a> and Astro \u003Ca href=\"https://tailkits.com/tools/tags/boilerplates/\" data-as-button=\"false\">boilerplates\u003C/a>\u003C/strong>. They bundle Tailwind, TypeScript, authentication and SEO defaults so you can launch in days, not weeks.\u003C/p>\u003Ch3>5. Design utilities\u003C/h3>\u003Cp>\u003Cem>Gradient, colour‑shade and animation generators\u003C/em> take the guesswork out of branding. Tools like \u003Ca href=\"https://tailkits.com/tools/hypercolor-gradient-generator/\" data-as-button=\"false\">\u003Cstrong>Hypercolor\u003C/strong>\u003C/a> and \u003Ca href=\"https://tailkits.com/tools/tailwind-animation-configurator/\" data-as-button=\"false\">\u003Cstrong>Tailwind Animation Configurator\u003C/strong>\u003C/a> output class‑ready snippets you can paste straight into your components.\u003C/p>\u003Ch2>What Exactly Are Tailwind CSS Tools?\u003C/h2>\u003Cp>Think of them as turbo‑chargers for a utility‑first workflow. Instead of hand‑rolling styles, you plug in helpers that autocomplete classes in VS Code., purge unused CSS for a <10 KB bundle, or spin up live prototypes in Tailwind Play without a build step. With Tailwind now a top‑three CSS framework in 2025, a vibrant ecosystem—AI page builders, visual editors, boilerplate generators—has emerged to help teams ship production‑ready UIs faster than ever.\u003C/p>\u003Ch3>🔍 Why Use Them?\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Slash dev time\u003C/strong> using IntelliSense autocomplete and class‑name linting.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Guarantee consistency\u003C/strong> with design‑system components from Tailwind UI (500‑plus copy‑ready blocks).\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Eliminate bloat\u003C/strong> via PurgeCSS tree‑shaking for perfect Core Web Vitals.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Explore visually\u003C/strong> in AI builders like \u003Ca href=\"https://tailkits.com/tools/windframe-landing-page-builder/\" data-as-button=\"false\">Windframe\u003C/a>—design, tweak, then export React, Vue, or HTML code.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Stay current\u003C/strong> thanks to community‑maintained presets and plugins that encode 2025 best practices.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>🛠️ Tool Categories to Know\u003C/h3>\u003Ctable class=\"min-w-full\">\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Category\u003C/p>\u003C/th>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Cstrong>Example\u003C/strong>\u003C/p>\u003C/th>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Primary Benefit\u003C/p>\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>IDE Extensions\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ca href=\"https://tailkits.com/tools/tailwind-css-intellisense/\" data-as-button=\"false\">Tailwind CSS IntelliSense\u003C/a>\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Autocomplete, error linting\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Visual Builders\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ca href=\" https://tailkits.com/tools/windframe-landing-page-builder/\" data-as-button=\"false\">Windframe Editor\u003C/a>\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Drag‑and‑drop → code export\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Online Playgrounds\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ca href=\"https://tailkits.com/tools/tailwind-play/\" data-as-button=\"false\">Tailwind Play\u003C/a>\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Safe sandbox for rapid prototyping\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Performance Boosters\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>PurgeCSS / JIT compiler\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Remove unused styles\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Boilerplates & Starters\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Next.js / Astro Tailwind Kits\u003C/p>\u003C/td>\u003Ctd class=\"max-w-[calc(var(--thread-content-max-width)*2/3)]\" rowspan=\"1\" colspan=\"1\">\u003Cp>Launch SaaS or blogs in days\u003C/p>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ch2>Explore Tailkits by Category\u003C/h2>\u003Ch3>Landing Page Builders\u003C/h3>\u003Cp>Spin up full marketing sites in minutes with visual builders like \u003Ca href=\"https://tailkits.com/tools/versoly-tailwind-builder/\" data-as-button=\"false\">Versoly\u003C/a>—built on Tailwind CSS for clean, utility‑first markup.\u003Cbr>➡️ \u003Cstrong>Browse our \u003Ca href=\"https://tailkits.com/tools/categories/landing-page-builders/\" data-as-button=\"false\">Landing Page Builders\u003C/a>\u003C/strong> and grab finished hero blocks from the Component Generators toolbox.\u003C/p>\u003Ch3>Design Tools\u003C/h3>\u003Cp>From live \u003Cstrong>Gradient Color Generators\u003C/strong> to typography scales, Tailwind‑savvy design helpers keep your palette on‑brand.\u003Cbr>➡️ \u003Cstrong>See all Design Tools\u003C/strong> or jump straight to the \u003Ca href=\"https://tailkits.com/tools/tags/gradient-color-generators/\" data-as-button=\"false\">Gradient Color Generators\u003C/a> listing.\u003C/p>\u003Ch3>Plugins\u003C/h3>\u003Cp>Extend core Tailwind with official and third‑party plugins for forms, typography, or animation; ThemeSelection curates “must‑have” picks each quarter.\u003Cbr>➡️ \u003Cstrong>Discover the \u003Ca href=\"https://tailkits.com/tools/categories/plugins/\" data-as-button=\"false\">Plugins\u003C/a> \u003C/strong>and read deep‑dives on our Blog.\u003C/p>\u003Ch3>Developer Tools\u003C/h3>\u003Cp>Level‑up your workflow with JIT compilers, PurgeCSS, and browser DevTools that expose applied classes inline.\u003Cbr>➡️ Explore our \u003Ca href=\"https://tailkits.com/tools/categories/developer-tools/\" data-as-button=\"false\">Developer Tools\u003C/a> and related \u003Ca href=\"https://tailkits.com/tools/tags/debug-tools/\" data-as-button=\"false\">Debug Tools\u003C/a> tag.\u003C/p>\u003Ch3>Chrome Extensions\u003C/h3>\u003Cp>Inspect, toggle, and live‑edit utility classes without leaving the Elements panel—\u003Ca href=\"https://tailkits.com/tools/tailwind-css-devtools/\" data-as-button=\"false\">Tailwind CSS DevTools\u003C/a> is a prime example. (Heads‑up: keep extensions updated; a recent Chrome release briefly broke Tailwind selection styling).\u003Cbr>➡️ \u003Cstrong>Install from the \u003Ca href=\"https://tailkits.com/tools/categories/chrome-extensions/\" data-as-button=\"false\">Chrome Extensions\u003C/a> shelf\u003C/strong>.\u003C/p>\u003Ch3>Color Pickers\u003C/h3>\u003Cp>Need an accessible palette fast? Our \u003Ca href=\"https://tailkits.com/tools/categories/color-pickers/\" data-as-button=\"false\">Color Pickers\u003C/a> showcase tools that convert brand values straight into Tailwind classes—no hex wrangling required.\u003Cbr>➡️ Pair with Generators for instant gradient backgrounds.\u003C/p>\u003Ch3>VS Code Extensions\u003C/h3>\u003Cp>Cut keystrokes with Tailwind CSS IntelliSense: autocomplete, linting, and syntax highlighting in one lightweight add‑on.\u003Cbr>➡️ \u003Cstrong>Install from \u003Ca href=\"https://tailkits.com/tools/categories/vs-code-extensions/\" data-as-button=\"false\">VS Code Extensions\u003C/a>\u003C/strong> and tag projects as Code Editors for future reference.\u003C/p>\u003Ch2>Tag Spotlight\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Code Editors\u003C/strong> – tools that enhance authoring speed (think IntelliSense\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Boilerplates\u003C/strong> – curated Next.js, Astro & SvelteKit starters (view \u003Ca href=\"https://tailkits.com/tools/tags/boilerplates/\" data-as-button=\"false\">Boilerplates\u003C/a>)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Debug Tools\u003C/strong> – class inspectors and runtime profilers.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Converters\u003C/strong> – utilities that swap Tailwind classes for plain CSS‑in‑JS if your stack requires it.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Gradient Color Generators\u003C/strong> – pick‑and‑mix gradient presets ready for copy‑paste.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Next Steps\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Generate a layout now\u003C/strong> in Tailkits Generators\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Clone a starter repo\u003C/strong> from our \u003Ca href=\"https://tailkits.com/tools/tags/boilerplates/\" data-as-button=\"false\">Boilerplates gallery\u003C/a>\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Stay ahead of the curve\u003C/strong>—weekly rundowns of new plugins land on the \u003Ca href=\"https://tailkits.com/blog\" data-as-button=\"false\">Tailkits Blog\u003C/a> (subscribe at the bottom of any post)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Benefits of Tailwind CSS Tools\u003C/h2>\u003Cp>Using Tailwind CSS tools can help you in many ways:\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Work Faster\u003C/p>\u003C/li>\u003C/ul>\u003Cp>These tools can do some tasks for you. This leaves you more time to focus on the fun parts of design.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Write Better Code\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Many tools check your code for mistakes. This helps you keep your code clean and error-free.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Make Your Site Unique\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Tools like setup helpers let you customize Tailwind CSS. You can make your site look exactly how you want.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Team Up Better\u003C/p>\u003C/li>\u003C/ul>\u003Cp>When everyone uses the same tools, it's easier to work together. Designers and developers can understand each other better.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Try Ideas Quickly\u003C/p>\u003C/li>\u003C/ul>\u003Cp>With playground tools, you can test new designs fast. This can lead to more creative and user-friendly websites.\u003C/p>\u003Ch2>Getting Started with Tailwind CSS Tools\u003C/h2>\u003Cp>Ready to try Tailwind CSS tools? Here's how to begin:\u003C/p>\u003Col start=\"1\">\u003Cli>\u003Cp>Think about what you need help with in your work.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Look for tools that can help with those tasks.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Start with one or two tools. Don't try to use them all at once.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Play around with the tools to learn how they work.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Keep an eye out for new tools and updates.\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Advanced Tips\u003C/h2>\u003Cp>Once you're comfortable with the basics, try these tips:\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Customize Your Workflow\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Use tools to set up your own work process. This can make your coding even faster.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Make Your Own Tools\u003C/p>\u003C/li>\u003C/ul>\u003Cp>If you can't find a tool you need, try making one! You can create your own Tailwind CSS plugins.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Mix with Other Tech\u003C/p>\u003C/li>\u003C/ul>\u003Cp>If you use JavaScript frameworks, look for tools that work with them too.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>Speed Up Your Site\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Use tools to make your CSS smaller and your website faster.\u003C/p>\u003Cul class=\"checked-list\">\u003Cli>\u003Cp>The Future of Tailwind CSS Tools\u003C/p>\u003C/li>\u003C/ul>\u003Cp>As more people use Tailwind CSS, we'll see more cool tools. We might get AI helpers or tools that make sites load super fast. The future looks exciting!\u003C/p>\u003Ch2>Wrap-Up\u003C/h2>\u003Cp>Tailwind CSS tools are great helpers for web developers. They can make your work faster, better, and more fun. Try out different tools to see what works best for you.\u003C/p>","Featured Developer Tools","100+ Developer Tools Directory","Best Developer \u003Cmark>Tools\u003C/mark>","Browse 100+ Tailwind CSS developer tools—generators, color pickers, gradient makers, VS Code snippets and more.","Browse 100+ Tailwind CSS developer tools—generators, color pickers, gradient makers, VS Code snippets and more. Speed up your workflow with Tailkits.","content:tools-static-texts:1510.json","tools-static-texts/1510.json","tools-static-texts/1510",{"_path":453,"_dir":454,"_draft":6,"_partial":6,"_locale":7,"id":455,"type":454,"title":456,"slug":457,"published_at":458,"order":12,"created_at":458,"updated_at":459,"color":778,"cover":463,"is_hot":64,"is_enabled":64,"target_url":464,"button_text":465,"large_badge_text":466,"small_badge_text":467,"large_description":468,"small_description":469,"_id":470,"_type":19,"_source":20,"_file":471,"_stem":472,"_extension":19},{"id":461,"title":462,"slug":462},1773750072830]