[{"data":1,"prerenderedAt":582},["ShallowReactive",2],{"announcement-bar":3,"components-product-shadcnblocks-component-library":23,"detail_popular_product_refs":137,"popular-product-1766":234,"popular-product-2113":311,"popular-product-2074":368,"popular-product-2171":432,"popular-product-2178":480,"elite_banner_detail":526,"components-static-texts":547},{"_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":30,"created_at":29,"updated_at":31,"faqs":32,"tags":65,"color":86,"cover":89,"images":90,"is_hot":98,"content":99,"is_paid":98,"demo_url":100,"features":101,"seo_title":118,"categories":119,"target_url":128,"description":129,"is_featured":98,"is_free_listing":6,"seo_description":130,"tags_ids":131,"features_ids":132,"categories_ids":133,"_id":134,"_type":19,"_source":20,"_file":135,"_stem":136,"_extension":19},"/components/1626","components",1626,"Shadcnblocks Component Library","shadcnblocks-component-library","2024-09-19 13:01:57",3,"2026-03-11 20:22:53",[33,37,41,45,49,53,57,61],{"title":34,"content":35,"id":36},"What is Shadcnblocks?","Shadcnblocks is a collection of pre-designed blocks and components tailored for developers using Shadcn UI, Tailwind CSS, and React. It offers over 350 unique blocks to streamline the creation of responsive web interfaces.","what-is-shadcnblocks",{"title":38,"content":39,"id":40},"How can I integrate Shadcnblocks into my project?","Shadcnblocks is designed for seamless integration with Shadcn UI and Tailwind CSS in React projects. Developers can incorporate these components into their codebase to enhance development efficiency.","how-can-i-integrate-shadcnblocks-into-my-project",{"title":42,"content":43,"id":44},"How often are new blocks released?","The team ships roughly 50 fresh blocks every month, visible in the public changelog.","how-often-are-new-blocks-released",{"title":46,"content":47,"id":48},"Is Shadcnblocks free to use?","Shadcnblocks offers a selection of free blocks. Access to the full library requires a one-time payment, with individual licenses priced at $79 and team licenses at $149.","is-shadcnblocks-free-to-use",{"title":50,"content":51,"id":52},"Is Shadcnblocks officially part of shadcn/ui?","No, Shadcnblocks is an independent premium extension; the site even displays a disclaimer about non-affiliation.","is-shadcnblocks-officially-part-of-shadcn-ui",{"title":54,"content":55,"id":56},"Can I install blocks through a CLI instead of copy-paste?","Yes, Pro subscribers get a one-liner npx shadcn add command that fetches any block via the Private Shadcn Registry.","can-i-install-blocks-through-a-cli-instead-of-copy-paste",{"title":58,"content":59,"id":60},"Does it include design files?","Premium plans bundle a 300-block Figma kit covering every Shadcn UI component and layout.","does-it-include-design-files",{"title":62,"content":63,"id":64},"What does it cost and is there a free tier?","Pro one-time $149 for lifetime access, 1216 + Pro blocks, and 50+ new blocks each month. A limited free set exists.","what-does-it-cost-and-is-there-a-free-tier",[66,70,74,78,82],{"id":67,"title":68,"slug":69},1374,"Radix UI","radix-ui",{"id":71,"title":72,"slug":73},195,"Next.js","nextjs",{"id":75,"title":76,"slug":77},192,"React","react",{"id":79,"title":80,"slug":81},1740,"shadcn/ui","shadcnui",{"id":83,"title":84,"slug":85},2217,"Animated","animated",{"id":87,"title":88,"slug":88},26,"orange","/shadcnblocks.webp",[91,93,95,97],{"image":92},"/shadcnblocks-5.png",{"image":94},"/shadcnblocks-component-library.png",{"image":96},"/shadcnblocks-component-library-2.png",{"image":89},true,"\u003Ch3>\u003Cimg src=\"/shadcnblocks-17.png\" alt=\"Collage of 12–18 component tiles from Shadcnblocks in light/dark.\" title=\"August 25 Blocks | 50 new blocks \" width=\"1440\" height=\"1270\" loading=\"lazy\">\u003C/h3>\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 Shadcnblocks?\u003C/h2>\u003Cblockquote>\u003Cp>Shadcnblocks is a premium add-on library that layers \u003Cstrong>958 handcrafted marketing and app-ready blocks\u003C/strong> on top of the open-source shadcn/ui design system, with new drops arriving at roughly \u003Cstrong>50 blocks a month\u003C/strong>.\u003C/p>\u003C/blockquote>\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-28.png\" alt=\"shadcn ui hero with stats Block\" title=\"Stats, Hero section from Shadcnblocks\" width=\"1400\" height=\"914\" 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-23.png\" alt=\"shadcn ui Integration Block\" title=\"Integration13 from Shadcnblocks\" width=\"1288\" height=\"701\" loading=\"lazy\">\u003C/p>\u003C/div>\u003C/div>\u003Cp>It extends far beyond raw components by bundling polished templates (e.g., Scalar and Sonic), a full Figma kit, an admin dashboard starter, CMS boilerplates, and even a private registry so you can pull blocks straight into your codebase with \u003Ccode>npx shadcn add\u003C/code>.\u003C/p>\u003Ch2>What changed recently on Shadcnblocks?\u003C/h2>\u003Cp>October updates brought \u003Cstrong>100 new portfolio blocks\u003C/strong>, a new \u003Cstrong>Lumen\u003C/strong> template, and an \u003Cstrong>improved Blocks viewer\u003C/strong> with sticky filters and better category UX.\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Oct 28, 2025:\u003C/strong> “New Blocks – Oct 2025” adds \u003Cstrong>100 portfolio-oriented blocks\u003C/strong>\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Oct 28, 2025:\u003C/strong> \u003Cstrong>Lumen\u003C/strong> template released - lives under the \u003Cstrong>template bundle\u003C/strong> scope but shows the system’s pace.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Oct 27, 2025:\u003C/strong> \u003Cstrong>Improved Block Viewer\u003C/strong> - sticky filters, archetype filters, clearer category grouping for faster discovery.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Sep–Aug 2025:\u003C/strong> 50-block drops, \u003Cstrong>Figma v1.1.0\u003C/strong>, and \u003Cstrong>namespaced registry support\u003C/strong> landed.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Features ✨\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-9.png\" alt=\"Shadcnblocks - Animated Hero Component\" title=\"Shadcnblocks - Animated Hero Component\" width=\"900\" height=\"594\" loading=\"lazy\">\u003C/p>\u003Cp>\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/shadcnblocks-3.png\" alt=\"Shadcnblocks - UI Components\" title=\"Shadcnblocks - UI Components\" width=\"900\" height=\"491\" loading=\"lazy\">\u003C/p>\u003C/div>\u003C/div>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>959+ fully responsive blocks\u003C/strong> across 40+ categories (Hero, Feature, Pricing, Gallery, etc.)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Monthly block drops\u003C/strong> (~50) keep the library feeling fresh.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Private Shadcn Registry\u003C/strong> lets Pro customers install any block via CLI in seconds.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>10 production-ready templates\u003C/strong> (Scalar, Sonic, Relative …) for Next.js 15 & Astro 5\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma Kit\u003C/strong> with 300+ block layouts for seamless design-to-code hand-off.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Admin Kit\u003C/strong> dashboard starter (Next.js 15, React 19, Tailwind 4) saves weeks of boilerplate work.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Theme switching \u003C/strong>swap color schemes instantly thanks to Shadcn Themes.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind 4 upgrade\u003C/strong> already rolled out across every block\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How is this different from the free shadcn/ui Blocks?\u003C/h2>\u003Cp>\u003Cimg src=\"/shadcnblocks-7.png\" alt=\"Shadcnblocks - CTA Component\" title=\"Shadcnblocks - CTA Component\" width=\"1100\" height=\"375\" loading=\"lazy\">\u003Ca href=\"https://tailkits.com/templates/shadcnui-blocks/\" data-as-button=\"false\">\u003Cstrong>shadcn/ui Blocks\u003C/strong>\u003C/a> are open, free building blocks. \u003Cstrong>Shadcnblocks\u003C/strong> adds a large, curated, continuously-expanded \u003Cstrong>premium\u003C/strong> catalog, CLI install, and Figma parity.\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Free baseline:\u003C/strong> Official \u003Cstrong>shadcn/ui Blocks -\u003C/strong> open source, copy-paste, works across React frameworks.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Premium layer:\u003C/strong> Shadcnblocks adds \u003Cstrong>hundreds of extra blocks\u003C/strong>, \u003Cstrong>private registry\u003C/strong> installs, \u003Cstrong>lifetime updates\u003C/strong>, and design assets.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>If you only need a handful of sections, the free route might be fine. If you want \u003Cstrong>speed, breadth, and long-term updates\u003C/strong>, the premium catalog pays for itself.\u003C/p>\u003Ch2>How to install and theme components?\u003C/h2>\u003Cp>Copy-paste or run \u003Ccode>npx shadcn add <block>\u003C/code> using the \u003Cstrong>private registry\u003C/strong> with your key. Blocks inherit your \u003Cstrong>shadcn/ui theme tokens\u003C/strong>.\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Install:\u003C/strong> The changelog confirms \u003Cstrong>Private Shadcn Registry\u003C/strong> support - one-liner CLI pulls blocks with auth. \u003Ca href=\"http://shadcnblocks.com\">shadcnblocks.com\u003C/a>\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Theme:\u003C/strong> \u003Cstrong>Shadcn Themes\u003C/strong> integrate, so blocks adopt your tokens for fast light/dark and brand palettes.\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>\u003Cimg src=\"/shadcnblocks-8.png\" alt=\"Shadcnblocks - Case Study Component\" title=\"Shadcnblocks - Case Study Component\" width=\"900\" height=\"486\" 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-6.png\" alt=\"Shadcnblocks - Stats Component\" title=\"Shadcnblocks - Stats Component\" width=\"1100\" height=\"709\" loading=\"lazy\">\u003C/p>\u003C/div>\u003C/div>\u003Cp>\u003C/p>\u003Cp>\u003C/p>\u003Ch2>Who is it for?\u003C/h2>\u003Cp>Great for \u003Cstrong>SaaS and marketing sites\u003C/strong> that want speed and consistency. Skip it if you’re not on \u003Cstrong>React + Tailwind + shadcn/ui\u003C/strong> or if free blocks already cover your needs.\u003C/p>\u003Ch2>Pros and Cons\u003C/h2>\u003Cp>\u003Cstrong>Pros ✅\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Enormous block count\u003C/strong> (682 and climbing) covers most marketing use-cases out of the box.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>One-click CLI install\u003C/strong> through the private registry; no manual copy-paste needed.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Frequent releases\u003C/strong> (monthly block drops + new templates) mean it rarely feels stale.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Design assets included \u003C/strong>300-block Figma kit for designers who need parity with code.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Production extras\u003C/strong>: Admin Kit, Sanity and Payload CMS starters, and Tailwind 4 support out of the gate.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Growing community & open-source off-shoots\u003C/strong> (e.g., shadcn-admin-kit)\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Cons ⚠️\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Paid tiers only\u003C/strong> unlock the full library ($149 Pro / $299 Premium)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tight coupling to Tailwind CSS + React \u003C/strong>not plug-and-play for Vue, Angular, etc.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Version churn\u003C/strong> (e.g., the Tailwind 4 migration) requires periodic project refactors.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Not officially affiliated\u003C/strong> with the core Shadcn UI project.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cp>Shadcnblocks add new blocks every month, so counts are rolling. The live catalog shows current totals and categories across hero, features, pricing, navbars, footers, FAQs, dashboards, and more.\u003C/p>\u003Cblockquote>\u003Cp>Browse the latest blocks at \u003Ca href=\"https://www.shadcnblocks.com/blocks?via=tailkits\" target=\"_blank\" data-as-button=\"false\">/blocks\u003C/a> page.\u003C/p>\u003C/blockquote>","https://www.shadcnblocks.com/group/hero?via=tailkits",[102,106,110,114],{"id":103,"title":104,"slug":105},203,"Figma design file","figma-design-file",{"id":107,"title":108,"slug":109},204,"Copy & Paste","copy-paste",{"id":111,"title":112,"slug":113},1704,"Theming","theming",{"id":115,"title":116,"slug":117},1719,"Tailwind CSS v4","tailwind-css-v4","Shadcn UI Components & Block Library",[120,124],{"id":121,"title":122,"slug":123},153,"Admin & Dashboard","admin-dashboard",{"id":125,"title":126,"slug":127},1654,"UI Element","ui-element","https://www.shadcnblocks.com/block/chart-group15/?via=tailkits","1216 shadcn/ui blocks for Tailwind","The ultimate Shadcn UI block library. Browse 1216+ modular components including hero sections, pricing tables, and navbars. Copy-paste high-quality components into your existing project.",[67,71,75,79,83],[103,107,111,115],[121,125],"content:components:1626.json","components/1626.json","components/1626",[138,151,164,176,188,200,211,223],{"_path":139,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":141,"type":140,"title":142,"slug":143,"published_at":144,"order":145,"created_at":144,"updated_at":146,"product_id":147,"is_shuffled":98,"collection_type":25,"_id":148,"_type":19,"_source":20,"_file":149,"_stem":150,"_extension":19},"/popular_products/1712","popular_products",1712,"Shadcnblocks","shadcnblocks","2025-01-31 23:08:57",6,"2026-02-25 01:41:58","1626","content:popular_products:1712.json","popular_products/1712.json","popular_products/1712",{"_path":152,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":153,"type":140,"title":154,"slug":155,"published_at":156,"order":157,"created_at":156,"updated_at":158,"product_id":159,"is_shuffled":98,"collection_type":160,"_id":161,"_type":19,"_source":20,"_file":162,"_stem":163,"_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":165,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":166,"type":140,"title":167,"slug":168,"published_at":169,"order":170,"created_at":169,"updated_at":171,"product_id":172,"is_shuffled":6,"collection_type":160,"_id":173,"_type":19,"_source":20,"_file":174,"_stem":175,"_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":177,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":178,"type":140,"title":179,"slug":180,"published_at":181,"order":182,"created_at":181,"updated_at":183,"product_id":184,"is_shuffled":6,"collection_type":160,"_id":185,"_type":19,"_source":20,"_file":186,"_stem":187,"_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":189,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":190,"type":140,"title":191,"slug":192,"published_at":193,"order":194,"created_at":193,"updated_at":195,"product_id":196,"is_shuffled":98,"collection_type":160,"_id":197,"_type":19,"_source":20,"_file":198,"_stem":199,"_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":201,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":202,"type":140,"title":203,"slug":204,"published_at":205,"order":30,"created_at":205,"updated_at":206,"product_id":207,"is_shuffled":6,"collection_type":160,"_id":208,"_type":19,"_source":20,"_file":209,"_stem":210,"_extension":19},"/popular_products/2225",2225,"Metafi","metafi","2026-02-27 13:18:08","2026-03-14 11:41:52","2178","content:popular_products:2225.json","popular_products/2225.json","popular_products/2225",{"_path":212,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":213,"type":140,"title":214,"slug":215,"published_at":216,"order":217,"created_at":216,"updated_at":218,"product_id":219,"is_shuffled":6,"collection_type":160,"_id":220,"_type":19,"_source":20,"_file":221,"_stem":222,"_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":224,"_dir":140,"_draft":6,"_partial":6,"_locale":7,"id":225,"type":140,"title":226,"slug":227,"published_at":228,"order":12,"created_at":228,"updated_at":229,"product_id":230,"is_shuffled":6,"collection_type":160,"_id":231,"_type":19,"_source":20,"_file":232,"_stem":233,"_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":235,"_dir":160,"_draft":6,"_partial":6,"_locale":7,"id":236,"type":160,"title":237,"slug":238,"published_at":239,"order":157,"created_at":239,"updated_at":240,"faqs":241,"tags":260,"color":272,"cover":275,"images":276,"is_hot":98,"content":283,"is_paid":98,"demo_url":284,"features":285,"seo_title":296,"categories":297,"target_url":302,"description":303,"is_featured":98,"is_free_listing":6,"seo_description":304,"tags_ids":305,"features_ids":306,"categories_ids":307,"_id":308,"_type":19,"_source":20,"_file":309,"_stem":310,"_extension":19},"/templates/1766",1766,"Shadcnblocks Template Bundle","shadcnblocks-template-bundle","2025-03-24 12:34:39","2026-03-10 22:43:05",[242,245,248,251,254,257],{"title":243,"content":244},"Is there a free tier?","A limited set of free blocks is available, but the bundle and monthly updates require the paid license. ",{"title":246,"content":247},"Does it support dark mode?","Yes. Blocks inherit any Shadcn UI theme, including light/dark variants, without extra work. ",{"title":249,"content":250},"Can I use it on unlimited projects?","Absolutely; the license permits unlimited commercial and personal projects. ",{"title":252,"content":253},"How often are new components added?","Expect roughly 50 new blocks and at least one template every month",{"title":255,"content":256},"How big is the catalog right now?","Feature blocks alone list 266+ items; other categories are growing alongside recent “50 New Blocks” updates. ",{"title":258,"content":259},"Do these blocks work with Tailwind v4?","Yes, Lumen and the other templates specify Tailwind 4; blocks follow the same stack. ",[261,263,267,270],{"id":262,"title":80,"slug":81},1380,{"id":264,"title":265,"slug":266},458,"Astro","astro",{"id":268,"title":269,"slug":73},453,"Nextjs",{"id":271,"title":76,"slug":77},447,{"id":273,"title":274,"slug":274},22,"indigo","/shadcnblocks-template-bundle-4.png",[277,279,281],{"image":278},"/shadcnblocks-32.png",{"image":280},"/shadcnblocks-template-bundle-2.png",{"image":282},"/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",[286,290,294],{"id":287,"title":288,"slug":289},420,"MDX Support","mdx-support",{"id":291,"title":292,"slug":293},405,"Figma File","figma-file",{"id":295,"title":116,"slug":117},1720,"Shadcn UI Templates & Page Layouts",[298],{"id":299,"title":300,"slug":301},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.",[262,264,268,271],[287,291,295],[299],"content:templates:1766.json","templates/1766.json","templates/1766",{"_path":312,"_dir":160,"_draft":6,"_partial":6,"_locale":7,"id":313,"type":160,"title":191,"slug":192,"published_at":314,"order":315,"created_at":314,"updated_at":316,"faqs":317,"tags":330,"color":335,"cover":338,"images":339,"is_hot":6,"content":340,"is_paid":98,"demo_url":341,"features":342,"seo_title":345,"categories":346,"target_url":359,"description":360,"is_featured":98,"seo_description":361,"tags_ids":362,"features_ids":363,"categories_ids":364,"_id":365,"_type":19,"_source":20,"_file":366,"_stem":367,"_extension":19},"/templates/2113",2113,"2025-08-28 20:56:38",9,"2025-09-11 12:08:34",[318,321,324,327],{"title":319,"content":320},"Does Plasma include a docs system?","Yes—docs are set up with Fumadocs, ready to write in MDX. ",{"title":322,"content":323},"Are both Next.js and Astro versions available?","Yes, it ships with Next.js 15 and Astro 5 editions. ",{"title":325,"content":326},"Is the design file included?","Yes, a Figma file is included with the template.",{"title":328,"content":329},"What pages are prebuilt?","Landing, pricing, docs, changelog, and a download page; plus MDX blog.",[331,332,333,334],{"id":262,"title":80,"slug":81},{"id":264,"title":265,"slug":266},{"id":268,"title":269,"slug":73},{"id":271,"title":76,"slug":77},{"id":336,"title":337,"slug":337},33,"purple","/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",[343,344],{"id":291,"title":292,"slug":293},{"id":295,"title":116,"slug":117},"Plasma Template | Next.js & Astro SaaS UI (shadcn/ui)",[347,351,355],{"id":348,"title":349,"slug":350},1458,"Dark Mode","dark-mode",{"id":352,"title":353,"slug":354},430,"SaaS","saas",{"id":356,"title":357,"slug":358},425,"Landing Page","landing-page","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. ",[262,264,268,271],[291,295],[348,352,356],"content:templates:2113.json","templates/2113.json","templates/2113",{"_path":369,"_dir":160,"_draft":6,"_partial":6,"_locale":7,"id":370,"type":160,"title":226,"slug":227,"published_at":371,"order":145,"created_at":371,"updated_at":372,"faqs":373,"tags":386,"color":394,"cover":397,"images":398,"is_hot":98,"content":399,"is_paid":98,"demo_url":400,"features":401,"seo_title":406,"categories":407,"target_url":423,"description":424,"is_featured":98,"is_free_listing":6,"seo_description":425,"tags_ids":426,"features_ids":427,"categories_ids":428,"_id":429,"_type":19,"_source":20,"_file":430,"_stem":431,"_extension":19},"/templates/2074",2074,"2025-08-07 13:20:45","2026-03-11 20:21:39",[374,377,380,383],{"title":375,"content":376},"How many pages come pre-built?","Aspect ships with 10 + ready-to-use pages. ",{"title":378,"content":379},"Is a design file included?","Yes—every purchase includes the matching Figma source to speed up custom edits.",{"title":381,"content":382},"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":384,"content":385},"Do I get lifetime updates?","Buying Aspect (or the Premium Plan) grants lifetime updates and access to new shadcn/ui blocks.",[387,388,389,390],{"id":262,"title":80,"slug":81},{"id":264,"title":265,"slug":266},{"id":268,"title":269,"slug":73},{"id":391,"title":392,"slug":393},443,"HTML","html",{"id":395,"title":396,"slug":396},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/",[402,403,405],{"id":291,"title":292,"slug":293},{"id":404,"title":349,"slug":350},411,{"id":295,"title":116,"slug":117},"Aspect Company Template - Next.js & Astro Landing Kit",[408,412,413,417,418,422],{"id":409,"title":410,"slug":411},1457,"Startup","startup",{"id":348,"title":349,"slug":350},{"id":414,"title":415,"slug":416},1460,"Company","company",{"id":352,"title":353,"slug":354},{"id":419,"title":420,"slug":421},427,"Blog","blog",{"id":356,"title":357,"slug":358},"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.",[262,264,268,391],[291,404,295],[409,348,414,352,419,356],"content:templates:2074.json","templates/2074.json","templates/2074",{"_path":433,"_dir":160,"_draft":6,"_partial":6,"_locale":7,"id":434,"type":160,"title":179,"slug":180,"published_at":435,"order":436,"created_at":435,"updated_at":437,"faqs":438,"tags":451,"color":457,"cover":460,"images":461,"is_hot":98,"content":462,"is_paid":98,"demo_url":463,"features":464,"seo_title":467,"categories":468,"target_url":463,"description":472,"is_featured":98,"seo_description":473,"tags_ids":474,"features_ids":475,"categories_ids":476,"_id":477,"_type":19,"_source":20,"_file":478,"_stem":479,"_extension":19},"/templates/2171",2171,"2025-10-30 01:27:20",19,"2025-10-30 20:43:32",[439,442,445,448],{"title":440,"content":441},"Is Lumen beginner-friendly?","Yes, sections are block-based, so you can rearrange and ship quickly without designing from scratch.",{"title":443,"content":444},"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":446,"content":447},"Can I use it with either Next.js or Astro?","Yes, there are separate editions for Next.js 15 and Astro.",{"title":449,"content":450},"What files help with customization?","A Figma file is included for design changes, plus MDX/JSON data to edit content easily.",[452,453,454,455,456],{"id":262,"title":80,"slug":81},{"id":264,"title":265,"slug":266},{"id":268,"title":269,"slug":73},{"id":271,"title":76,"slug":77},{"id":391,"title":392,"slug":393},{"id":458,"title":459,"slug":459},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",[465,466],{"id":291,"title":292,"slug":293},{"id":295,"title":116,"slug":117},"Lumen - shadcn/ui + Tailwind 4 Landing Page Template",[469,470,471],{"id":409,"title":410,"slug":411},{"id":352,"title":353,"slug":354},{"id":356,"title":357,"slug":358},"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. ",[262,264,268,271,391],[291,295],[409,352,356],"content:templates:2171.json","templates/2171.json","templates/2171",{"_path":481,"_dir":160,"_draft":6,"_partial":6,"_locale":7,"id":482,"type":160,"title":203,"slug":204,"published_at":483,"order":12,"created_at":483,"updated_at":484,"faqs":485,"tags":498,"color":504,"cover":505,"images":506,"is_hot":98,"content":507,"is_paid":98,"demo_url":508,"features":509,"seo_title":512,"categories":513,"target_url":517,"description":518,"is_featured":98,"is_free_listing":6,"seo_description":519,"tags_ids":520,"features_ids":521,"categories_ids":522,"_id":523,"_type":19,"_source":20,"_file":524,"_stem":525,"_extension":19},"/templates/2178",2178,"2025-11-29 15:10:56","2026-03-11 20:21:58",[486,489,492,495],{"title":487,"content":488},"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":490,"content":491},"Is a Figma design file included?","Yes, Metafi includes a Figma file so your design team can customize the system before coding. ",{"title":493,"content":494},"How many pages does Metafi include?","It ships with 10+ pages built from reusable sections, covering core marketing flows like landing and pricing. ",{"title":496,"content":497},"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.",[499,500,501,502,503],{"id":262,"title":80,"slug":81},{"id":264,"title":265,"slug":266},{"id":268,"title":269,"slug":73},{"id":271,"title":76,"slug":77},{"id":391,"title":392,"slug":393},{"id":336,"title":337,"slug":337},"/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",[510,511],{"id":291,"title":292,"slug":293},{"id":295,"title":116,"slug":117},"Metafi SaaS Template for Next.js & Astro",[514,515,516],{"id":409,"title":410,"slug":411},{"id":352,"title":353,"slug":354},{"id":356,"title":357,"slug":358},"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. ",[262,264,268,271,391],[291,295],[409,352,356],"content:templates:2178.json","templates/2178.json","templates/2178",{"_path":527,"_dir":528,"_draft":6,"_partial":6,"_locale":7,"id":529,"type":528,"title":530,"slug":531,"published_at":532,"order":12,"created_at":532,"updated_at":533,"color":534,"cover":537,"is_hot":98,"is_enabled":98,"target_url":538,"button_text":539,"large_badge_text":540,"small_badge_text":541,"large_description":542,"small_description":543,"_id":544,"_type":19,"_source":20,"_file":545,"_stem":546,"_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":535,"title":536,"slug":536},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",{"_path":548,"_dir":549,"_draft":6,"_partial":6,"_locale":7,"id":550,"type":549,"title":551,"slug":549,"published_at":552,"order":12,"created_at":552,"updated_at":553,"faqs":554,"seo_content":573,"featured_title":574,"page_seo_title":575,"page_hero_title":576,"featured_description":577,"page_seo_description":578,"_id":579,"_type":19,"_source":20,"_file":580,"_stem":581,"_extension":19},"/components-static-texts/1508","components-static-texts",1508,"Components Static Texts","2024-05-29 01:38:20","2026-01-24 16:52:05",[555,558,561,564,567,570],{"title":556,"content":557},"Are Tailkits components free for commercial use?","Yes, the Tailkits core library is open-source and free for both personal and commercial projects. We provide a permissive license that allows you to use these components in unlimited client projects without attribution, making it an ideal choice for freelancers and agencies.",{"title":559,"content":560},"How do I integrate these components with React or Next.js?","Tailkits components are fully compatible with React and Next.js. Since Tailwind is utility-first, you simply copy the HTML and convert class attributes to className. For interactive elements, we recommend using our headless adapters or integrating with libraries like Radix UI for full accessibility and state management.",{"title":562,"content":563},"Do you support Tailwind CSS v4?","Yes, all components are optimized for the Tailwind CSS v4 engine. We utilize modern CSS features and avoid deprecated utilities, ensuring that your project is future-proof. Our templates are regularly updated to leverage the latest performance improvements in the Tailwind ecosystem.",{"title":565,"content":566},"What is the difference between Tailkits and Tailwind UI?","While Tailwind UI is the official paid library, Tailkits offers a robust alternative with a massive collection of free and premium components. Tailkits focuses on a broader range of design aesthetics and provides specific integrations for frameworks like Astro and Alpine.js that are often less prioritized in other libraries.",{"title":568,"content":569},"How does accessibility (WCAG) work in these components?","Accessibility is built-in. We use semantic HTML tags (\u003Cnav>, \u003Cmain>) and include ARIA attributes (like aria-expanded for menus) by default. Our color palettes are tested for contrast ratios to meet WCAG 2.1 AA standards, ensuring your site is usable by everyone, including those relying on screen readers.",{"title":571,"content":572},"Can I use these components with Alpine.js?","Absolutely. Alpine.js is a perfect match for Tailwind. Our HTML components are structured to easily accept Alpine x-data and x-bind directives, allowing you to add interactivity like dropdown toggles and mobile menus without the complexity of a build step.","\u003Ch2>The Evolution of Utility-First Interfaces\u003C/h2>\u003Cp>The shift from semantic CSS to utility-first frameworks has fundamentally altered web development. \u003Cstrong>Tailwind CSS\u003C/strong> has emerged not merely as a tool but as a standard for building scalable, maintainable user interfaces. For modern developers, the search for "tailwind components" is rarely about finding a single button style; it is about discovering a cohesive design system that can accelerate the transition from prototype to production.\u003C/p>\u003Cp>At \u003Cstrong>Tailkits\u003C/strong>, we understand that modern development requires more than just HTML snippets. It requires an architecture that supports the latest standards, including \u003Cstrong>React Server Components\u003C/strong>, \u003Cstrong>Vue 3 Composition API\u003C/strong>, and the interactive simplicity of \u003Cstrong>Alpine.js\u003C/strong>. Our library is curated to bridge the gap between design fidelity and code quality, ensuring that every component—from a simple \u003Cstrong>hero section\u003C/strong> to a complex admin dashboard—is built with maintainability in mind.\u003C/p>\u003Cp>This evolution is driven by the need for speed. By providing copy-paste solutions that are pre-optimized for \u003Cstrong>Tailwind v4\u003C/strong>, we address the core friction point of setup and configuration. The modern component is "headless" in logic but "opinionated" in style, allowing for seamless integration into existing projects without the bloat of traditional heavy UI frameworks.\u003C/p>\u003Ch2>Framework Integration & Ecosystem\u003C/h2>\u003Cp>A robust component library must adapt to the developer's stack of choice. Whether you are building a static site or a complex web application, our components are designed to be framework-agnostic while offering specific optimizations for the most popular tools.\u003C/p>\u003Ch3>The React & Next.js Paradigm\u003C/h3>\u003Cp>For the React ecosystem, specifically \u003Cstrong>Next.js\u003C/strong>, component architecture must account for hydration lifecycles and server-side rendering. Our React-compatible components are built to be "drop-in" ready. We leverage the philosophy where components are not hidden behind an npm package but are exposed as code you own. If you are new to this workflow, read our guide on(/blog/convert-html-to-react-component/) to streamline your integration process.\u003C/p>\u003Ch3>The Vue & Nuxt Ecosystem\u003C/h3>\u003Cp>Vue developers often struggle to find Tailwind resources that respect the framework's reactive principles. Our components utilize the \u003Ccode><script setup>\u003C/code> syntax and fully support \u003Cstrong>Nuxt 3\u003C/strong>'s auto-import features. By providing native Vue implementations alongside HTML, we ensure that developers looking for specific \u003Cstrong>Vue Tailwind components\u003C/strong> have a dedicated resource that respects their framework's conventions.\u003C/p>\u003Ch3>Alpine.js: The Lightweight Contender\u003C/h3>\u003Cp>For developers adhering to the "stackless" approach—often pairing Laravel or Django with Tailwind—\u003Cstrong>Alpine.js\u003C/strong> offers the perfect balance of interactivity without the build step complexity. Our library includes a dedicated subset of components pre-wired with Alpine.js logic for handling states like dropdowns, modals, and mobile menus.\u003C/p>\u003Ch2>Accessibility (A11y) as a Standard\u003C/h2>\u003Cp>Accessibility is no longer optional; it is a critical ranking factor and a legal requirement for many projects. Low-quality component libraries often neglect semantic HTML, leading to poor SEO performance and inaccessible products.\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Semantic Structure:\u003C/strong> Our components abandon the "div soup" approach. We utilize semantic tags—\u003Ccode><nav>\u003C/code>, \u003Ccode><header>\u003C/code>, \u003Ccode><main>\u003C/code>, \u003Ccode><article>\u003C/code>—to ensure that search engines can parse the document structure effectively.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>ARIA & Focus Management:\u003C/strong> Interactive elements in the Tailkits library come equipped with dynamic ARIA attributes. For example, our include properly associated \u003Ccode><label>\u003C/code> tags and \u003Ccode>aria-describedby\u003C/code> attributes for error messages, ensuring compatibility with screen readers.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Performance & The Tailwind v4 Engine\u003C/h2>\u003Cp>With the adoption of \u003Cstrong>Tailwind CSS v4\u003C/strong>, performance optimization has taken center stage. The new engine, built on Rust, offers lightning-fast compilation, but it requires components to be structured correctly to take advantage of new features like native CSS variable configuration.\u003C/p>\u003Ch3>JIT & Tree-Shaking\u003C/h3>\u003Cp>Our components are optimized for the Just-In-Time (JIT) compiler. We avoid dynamic class concatenation (e.g., \u003Ccode>bg-${color}-500\u003C/code>), which breaks tree-shaking. Instead, we use complete utility strings and map props to classes, ensuring that the final CSS bundle remains minimal—often under 10KB even for large projects. For a deeper dive into these technical updates, check out our analysis of(/blog/tailwind-v4-component-libraries/).\u003C/p>\u003Ch3>Dark Mode Architecture\u003C/h3>\u003Cp>Dark mode is a frequent requirement for modern web apps. Tailkits components utilize the \u003Ccode>dark:\u003C/code> variant strategy, allowing for seamless theme switching based on system preferences or user toggles. This is implemented via CSS variables in \u003Ccode>tailwind.config.js\u003C/code>, ensuring that color schemes are consistent and easily themable across your entire or application interface.\u003C/p>","Featured Tailwind Components","160+ Free Tailwind Components & UI Kits (2026) | React, Vue, HTML & Next.js","Tailwind CSS \u003Cmark>Components\u003C/mark>","Production-ready Tailwind components for React, Next.js, Vue & HTML. Responsive, accessible UI blocks optimized for Tailwind v4 with MCP integration.","160+ Tailwind components for React, Next.js & Vue. Responsive, accessible UI blocks with dashboards, forms & marketing sections. Tailwind v4 ready.","content:components-static-texts:1508.json","components-static-texts/1508.json","components-static-texts/1508",1773750064645]