[{"data":1,"prerenderedAt":2237},["ShallowReactive",2],{"announcement-bar":3,"components-category_page-open-source":23,"popular_product_refs":37,"popular-product-2074":137,"popular-product-2178":225,"popular-product-1766":276,"popular-product-2113":342,"popular-product-2171":388,"elite_banner_hero":436,"components-category_page-all_products-open-source":457,"components-static-texts":2200,"elite_banner":2235},{"_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":29,"faqs":30,"seo_title":31,"seo_content":32,"seo_description":33,"_id":34,"_type":19,"_source":20,"_file":35,"_stem":36,"_extension":19},"/component_categories/2233","component_categories",2233,"Open-Source","open-source","2026-03-02 19:50:19",[],"Open-Source Tailwind CSS Components",null,"Browse open-source Tailwind CSS components by Tailkits. Copy-paste ready UI blocks including headers, heroes, pricing, and more - built for modern web projects.","content:component_categories:2233.json","component_categories/2233.json","component_categories/2233",[38,53,66,78,90,102,114,126],{"_path":39,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":41,"type":40,"title":42,"slug":43,"published_at":44,"order":45,"created_at":44,"updated_at":46,"product_id":47,"is_shuffled":48,"collection_type":49,"_id":50,"_type":19,"_source":20,"_file":51,"_stem":52,"_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":54,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":55,"type":40,"title":56,"slug":57,"published_at":58,"order":59,"created_at":58,"updated_at":60,"product_id":61,"is_shuffled":48,"collection_type":62,"_id":63,"_type":19,"_source":20,"_file":64,"_stem":65,"_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":67,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":68,"type":40,"title":69,"slug":70,"published_at":71,"order":72,"created_at":71,"updated_at":73,"product_id":74,"is_shuffled":6,"collection_type":62,"_id":75,"_type":19,"_source":20,"_file":76,"_stem":77,"_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":79,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":80,"type":40,"title":81,"slug":82,"published_at":83,"order":84,"created_at":83,"updated_at":85,"product_id":86,"is_shuffled":6,"collection_type":62,"_id":87,"_type":19,"_source":20,"_file":88,"_stem":89,"_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":91,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":92,"type":40,"title":93,"slug":94,"published_at":95,"order":96,"created_at":95,"updated_at":97,"product_id":98,"is_shuffled":48,"collection_type":62,"_id":99,"_type":19,"_source":20,"_file":100,"_stem":101,"_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":103,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":104,"type":40,"title":105,"slug":106,"published_at":107,"order":108,"created_at":107,"updated_at":109,"product_id":110,"is_shuffled":6,"collection_type":62,"_id":111,"_type":19,"_source":20,"_file":112,"_stem":113,"_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":115,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":116,"type":40,"title":117,"slug":118,"published_at":119,"order":120,"created_at":119,"updated_at":121,"product_id":122,"is_shuffled":6,"collection_type":62,"_id":123,"_type":19,"_source":20,"_file":124,"_stem":125,"_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":127,"_dir":40,"_draft":6,"_partial":6,"_locale":7,"id":128,"type":40,"title":129,"slug":130,"published_at":131,"order":12,"created_at":131,"updated_at":132,"product_id":133,"is_shuffled":6,"collection_type":62,"_id":134,"_type":19,"_source":20,"_file":135,"_stem":136,"_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":138,"_dir":62,"_draft":6,"_partial":6,"_locale":7,"id":139,"type":62,"title":129,"slug":130,"published_at":140,"order":45,"created_at":140,"updated_at":141,"faqs":142,"tags":155,"color":172,"cover":175,"images":176,"is_hot":48,"content":177,"is_paid":48,"demo_url":178,"features":179,"seo_title":192,"categories":193,"target_url":216,"description":217,"is_featured":48,"is_free_listing":6,"seo_description":218,"tags_ids":219,"features_ids":220,"categories_ids":221,"_id":222,"_type":19,"_source":20,"_file":223,"_stem":224,"_extension":19},"/templates/2074",2074,"2025-08-07 13:20:45","2026-03-11 20:21:39",[143,146,149,152],{"title":144,"content":145},"How many pages come pre-built?","Aspect ships with 10 + ready-to-use pages. ",{"title":147,"content":148},"Is a design file included?","Yes—every purchase includes the matching Figma source to speed up custom edits.",{"title":150,"content":151},"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":153,"content":154},"Do I get lifetime updates?","Buying Aspect (or the Premium Plan) grants lifetime updates and access to new shadcn/ui blocks.",[156,160,164,168],{"id":157,"title":158,"slug":159},1380,"shadcn/ui","shadcnui",{"id":161,"title":162,"slug":163},458,"Astro","astro",{"id":165,"title":166,"slug":167},453,"Nextjs","nextjs",{"id":169,"title":170,"slug":171},443,"HTML","html",{"id":173,"title":174,"slug":174},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/",[180,184,188],{"id":181,"title":182,"slug":183},405,"Figma File","figma-file",{"id":185,"title":186,"slug":187},411,"Dark Mode","dark-mode",{"id":189,"title":190,"slug":191},1720,"Tailwind CSS v4","tailwind-css-v4","Aspect Company Template - Next.js & Astro Landing Kit",[194,198,200,204,208,212],{"id":195,"title":196,"slug":197},1457,"Startup","startup",{"id":199,"title":186,"slug":187},1458,{"id":201,"title":202,"slug":203},1460,"Company","company",{"id":205,"title":206,"slug":207},430,"SaaS","saas",{"id":209,"title":210,"slug":211},427,"Blog","blog",{"id":213,"title":214,"slug":215},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.",[157,161,165,169],[181,185,189],[195,199,201,205,209,213],"content:templates:2074.json","templates/2074.json","templates/2074",{"_path":226,"_dir":62,"_draft":6,"_partial":6,"_locale":7,"id":227,"type":62,"title":105,"slug":106,"published_at":228,"order":12,"created_at":228,"updated_at":229,"faqs":230,"tags":243,"color":252,"cover":255,"images":256,"is_hot":48,"content":257,"is_paid":48,"demo_url":258,"features":259,"seo_title":262,"categories":263,"target_url":267,"description":268,"is_featured":48,"is_free_listing":6,"seo_description":269,"tags_ids":270,"features_ids":271,"categories_ids":272,"_id":273,"_type":19,"_source":20,"_file":274,"_stem":275,"_extension":19},"/templates/2178",2178,"2025-11-29 15:10:56","2026-03-11 20:21:58",[231,234,237,240],{"title":232,"content":233},"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":235,"content":236},"Is a Figma design file included?","Yes, Metafi includes a Figma file so your design team can customize the system before coding. ",{"title":238,"content":239},"How many pages does Metafi include?","It ships with 10+ pages built from reusable sections, covering core marketing flows like landing and pricing. ",{"title":241,"content":242},"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.",[244,245,246,247,251],{"id":157,"title":158,"slug":159},{"id":161,"title":162,"slug":163},{"id":165,"title":166,"slug":167},{"id":248,"title":249,"slug":250},447,"React","react",{"id":169,"title":170,"slug":171},{"id":253,"title":254,"slug":254},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",[260,261],{"id":181,"title":182,"slug":183},{"id":189,"title":190,"slug":191},"Metafi SaaS Template for Next.js & Astro",[264,265,266],{"id":195,"title":196,"slug":197},{"id":205,"title":206,"slug":207},{"id":213,"title":214,"slug":215},"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. ",[157,161,165,248,169],[181,189],[195,205,213],"content:templates:2178.json","templates/2178.json","templates/2178",{"_path":277,"_dir":62,"_draft":6,"_partial":6,"_locale":7,"id":278,"type":62,"title":279,"slug":280,"published_at":281,"order":59,"created_at":281,"updated_at":282,"faqs":283,"tags":302,"color":307,"cover":310,"images":311,"is_hot":48,"content":318,"is_paid":48,"demo_url":319,"features":320,"seo_title":327,"categories":328,"target_url":333,"description":334,"is_featured":48,"is_free_listing":6,"seo_description":335,"tags_ids":336,"features_ids":337,"categories_ids":338,"_id":339,"_type":19,"_source":20,"_file":340,"_stem":341,"_extension":19},"/templates/1766",1766,"Shadcnblocks Template Bundle","shadcnblocks-template-bundle","2025-03-24 12:34:39","2026-03-10 22:43:05",[284,287,290,293,296,299],{"title":285,"content":286},"Is there a free tier?","A limited set of free blocks is available, but the bundle and monthly updates require the paid license. ",{"title":288,"content":289},"Does it support dark mode?","Yes. Blocks inherit any Shadcn UI theme, including light/dark variants, without extra work. ",{"title":291,"content":292},"Can I use it on unlimited projects?","Absolutely; the license permits unlimited commercial and personal projects. ",{"title":294,"content":295},"How often are new components added?","Expect roughly 50 new blocks and at least one template every month",{"title":297,"content":298},"How big is the catalog right now?","Feature blocks alone list 266+ items; other categories are growing alongside recent “50 New Blocks” updates. ",{"title":300,"content":301},"Do these blocks work with Tailwind v4?","Yes, Lumen and the other templates specify Tailwind 4; blocks follow the same stack. ",[303,304,305,306],{"id":157,"title":158,"slug":159},{"id":161,"title":162,"slug":163},{"id":165,"title":166,"slug":167},{"id":248,"title":249,"slug":250},{"id":308,"title":309,"slug":309},22,"indigo","/shadcnblocks-template-bundle-4.png",[312,314,316],{"image":313},"/shadcnblocks-32.png",{"image":315},"/shadcnblocks-template-bundle-2.png",{"image":317},"/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",[321,325,326],{"id":322,"title":323,"slug":324},420,"MDX Support","mdx-support",{"id":181,"title":182,"slug":183},{"id":189,"title":190,"slug":191},"Shadcn UI Templates & Page Layouts",[329],{"id":330,"title":331,"slug":332},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.",[157,161,165,248],[322,181,189],[330],"content:templates:1766.json","templates/1766.json","templates/1766",{"_path":343,"_dir":62,"_draft":6,"_partial":6,"_locale":7,"id":344,"type":62,"title":93,"slug":94,"published_at":345,"order":346,"created_at":345,"updated_at":347,"faqs":348,"tags":361,"color":366,"cover":367,"images":368,"is_hot":6,"content":369,"is_paid":48,"demo_url":370,"features":371,"seo_title":374,"categories":375,"target_url":379,"description":380,"is_featured":48,"seo_description":381,"tags_ids":382,"features_ids":383,"categories_ids":384,"_id":385,"_type":19,"_source":20,"_file":386,"_stem":387,"_extension":19},"/templates/2113",2113,"2025-08-28 20:56:38",9,"2025-09-11 12:08:34",[349,352,355,358],{"title":350,"content":351},"Does Plasma include a docs system?","Yes—docs are set up with Fumadocs, ready to write in MDX. ",{"title":353,"content":354},"Are both Next.js and Astro versions available?","Yes, it ships with Next.js 15 and Astro 5 editions. ",{"title":356,"content":357},"Is the design file included?","Yes, a Figma file is included with the template.",{"title":359,"content":360},"What pages are prebuilt?","Landing, pricing, docs, changelog, and a download page; plus MDX blog.",[362,363,364,365],{"id":157,"title":158,"slug":159},{"id":161,"title":162,"slug":163},{"id":165,"title":166,"slug":167},{"id":248,"title":249,"slug":250},{"id":253,"title":254,"slug":254},"/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",[372,373],{"id":181,"title":182,"slug":183},{"id":189,"title":190,"slug":191},"Plasma Template | Next.js & Astro SaaS UI (shadcn/ui)",[376,377,378],{"id":199,"title":186,"slug":187},{"id":205,"title":206,"slug":207},{"id":213,"title":214,"slug":215},"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. ",[157,161,165,248],[181,189],[199,205,213],"content:templates:2113.json","templates/2113.json","templates/2113",{"_path":389,"_dir":62,"_draft":6,"_partial":6,"_locale":7,"id":390,"type":62,"title":81,"slug":82,"published_at":391,"order":392,"created_at":391,"updated_at":393,"faqs":394,"tags":407,"color":413,"cover":416,"images":417,"is_hot":48,"content":418,"is_paid":48,"demo_url":419,"features":420,"seo_title":423,"categories":424,"target_url":419,"description":428,"is_featured":48,"seo_description":429,"tags_ids":430,"features_ids":431,"categories_ids":432,"_id":433,"_type":19,"_source":20,"_file":434,"_stem":435,"_extension":19},"/templates/2171",2171,"2025-10-30 01:27:20",19,"2025-10-30 20:43:32",[395,398,401,404],{"title":396,"content":397},"Is Lumen beginner-friendly?","Yes, sections are block-based, so you can rearrange and ship quickly without designing from scratch.",{"title":399,"content":400},"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":402,"content":403},"Can I use it with either Next.js or Astro?","Yes, there are separate editions for Next.js 15 and Astro.",{"title":405,"content":406},"What files help with customization?","A Figma file is included for design changes, plus MDX/JSON data to edit content easily.",[408,409,410,411,412],{"id":157,"title":158,"slug":159},{"id":161,"title":162,"slug":163},{"id":165,"title":166,"slug":167},{"id":248,"title":249,"slug":250},{"id":169,"title":170,"slug":171},{"id":414,"title":415,"slug":415},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",[421,422],{"id":181,"title":182,"slug":183},{"id":189,"title":190,"slug":191},"Lumen - shadcn/ui + Tailwind 4 Landing Page Template",[425,426,427],{"id":195,"title":196,"slug":197},{"id":205,"title":206,"slug":207},{"id":213,"title":214,"slug":215},"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. ",[157,161,165,248,169],[181,189],[195,205,213],"content:templates:2171.json","templates/2171.json","templates/2171",{"_path":437,"_dir":438,"_draft":6,"_partial":6,"_locale":7,"id":439,"type":438,"title":440,"slug":441,"published_at":442,"order":12,"created_at":442,"updated_at":443,"color":444,"cover":447,"is_hot":48,"is_enabled":48,"target_url":448,"button_text":449,"large_badge_text":450,"small_badge_text":451,"large_description":452,"small_description":453,"_id":454,"_type":19,"_source":20,"_file":455,"_stem":456,"_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":445,"title":446,"slug":446},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",[458,518,567,597,638,681,713,758,805,841,886,931,977,1021,1071,1113,1174,1214,1249,1292,1324,1357,1405,1447,1476,1521,1569,1617,1645,1677,1716,1747,1780,1825,1862,1896,1926,1958,1992,2025,2055,2099,2142],{"_path":459,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":460,"type":49,"title":461,"slug":462,"published_at":463,"order":12,"created_at":463,"updated_at":464,"faqs":465,"tags":478,"color":494,"cover":497,"images":498,"is_hot":48,"content":499,"is_paid":6,"demo_url":500,"features":501,"seo_title":502,"categories":503,"target_url":509,"description":510,"is_featured":6,"is_free_listing":6,"seo_description":511,"tags_ids":512,"features_ids":513,"categories_ids":514,"_id":515,"_type":19,"_source":20,"_file":516,"_stem":517,"_extension":19},"/components/2244",2244,"jalco/ui","jalcoui","2026-03-14 10:31:20","2026-03-14 10:48:52",[466,469,472,475],{"title":467,"content":468},"Is jal-co/ui free to use?","Yes, it is fully free and open source. There is no paid tier, no subscription, and no license fee.",{"title":470,"content":471},"Do I need to have shadcn/ui already set up to use it?","Yes. The library requires an existing Next.js project with Tailwind CSS v4 and shadcn/ui initialized before you can install any component.",{"title":473,"content":474},"Can I use individual components without installing the whole library? ","Absolutely, that is the whole point. Each component is installed independently via the CLI or copied manually. You only add what you actually need.",{"title":476,"content":477},"Does it work with frameworks other than Next.js? ","Officially, Next.js with App Router is the recommended setup. Some components (especially the async server components with ISR data fetching) are tightly coupled to Next.js, though purely presentational ones could be adapted to other React environments with extra work.",[479,483,487,490,492],{"id":480,"title":481,"slug":482},199,"Vite","vite",{"id":484,"title":485,"slug":486},1374,"Radix UI","radix-ui",{"id":488,"title":489,"slug":167},195,"Next.js",{"id":491,"title":249,"slug":250},192,{"id":493,"title":158,"slug":159},1740,{"id":495,"title":496,"slug":496},23,"red","/jalcoui.png",[],"\u003Cp>\u003Cimg src=\"/jalcoui-2.png\" alt=\"Activity Graph - GitHub-style activity heatmap\" title=\"Activity Graph\" width=\"791\" height=\"276\" loading=\"lazy\">\u003C/p>\u003Cblockquote>\u003Cp>jal-co/ui is a free, open-source shadcn-compatible registry of 17 composable components laser-focused on developer tooling  think log viewers, JSON trees, env variable tables, cron schedule displays, and GitHub/npm stat badges.\u003C/p>\u003C/blockquote>\u003Cp>You install each component via the shadcn CLI directly into your project, no external package required.\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cimg src=\"/jalcoui-3.png\" alt=\"JSON Viewer - Collapsible, syntax-colored JSON tree\" title=\"JSON Viewer Component\" width=\"805\" height=\"476\" loading=\"lazy\">\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">The library is purpose-built for a very specific audience: developers building documentation sites, internal dashboards, dev tools, and open-source project pages. If you need a JSON viewer, a terminal-style log output, or a GitHub star count button for your app, this is where you go.\u003C/p>\u003Chr>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Features ✨\u003C/h2>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>17 polished, composable components\u003C/strong> organized across Code, Docs, Open Source, Dev Tools, and Payments categories\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>shadcn registry-native\u003C/strong> — install any component with a single \u003Ccode>npx shadcn\u003C/code> command, no package manager dependency\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Server Component support\u003C/strong> — async components like GitHub Stars Button and npm Badge fetch live data at build time with ISR (Incremental Static Regeneration)\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Tailwind CSS v4 compatible\u003C/strong> — built on top of the latest Tailwind stack\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Copy-paste alternative\u003C/strong> — every component page includes full source if you prefer manual installation\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Color themes\u003C/strong> — customizable via the built-in theming system\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>llms.txt support\u003C/strong> — a dedicated endpoint for AI tools and LLM ingestion\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>AI Copy Button\u003C/strong> — lets users send component content directly to v0, ChatGPT, Claude, or Gemini from the docs\u003C/p>\u003C/li>\u003C/ul>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Included Components 📒\u003C/h2>\u003Cp class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">\u003Cimg src=\"/jalcoui-4.png\" alt=\"Tabbed CLI command block\" title=\"Code Block Command Component\" width=\"791\" height=\"216\" loading=\"lazy\">\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>Code\u003C/strong>\u003C/p>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Code Block - syntax-highlighted block with language icon, copy button, and collapsible overflow (powered by Shiki)\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Code Block Command - tabbed CLI block with package manager switching (pnpm, yarn, npm, bun, shadcn) and localStorage persistence\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Code Line - compact inline code snippet with copy button\u003C/p>\u003C/li>\u003C/ul>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>Docs\u003C/strong>\u003C/p>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>AI Copy Button - split button that sends content to AI tools (v0, ChatGPT, Claude, Gemini)\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>API Reference Table - expandable prop table with color-coded types for documentation pages\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Stepper - numbered step layout with vertical connectors and status indicators for onboarding/installation guides\u003C/p>\u003C/li>\u003C/ul>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>Open Source\u003C/strong>\u003C/p>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Activity Graph - GitHub-style contribution heatmap with real data fetching by username\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>GitHub Stars Button - live star count button via async ISR server component\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>GitHub Button Group - segmented button showing multiple repo metrics with individual links\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>npm Badge - live npm stats (version, downloads, license, last publish) in 3 layout variants\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Product Hunt Button - live upvote count button in two layouts\u003C/p>\u003C/li>\u003C/ul>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>Dev Tools\u003C/strong>\u003C/p>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Cron Schedule - visual cron expression display with human-readable summary and next-run preview\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Env Table - read-only env variable table with masked values, click-to-reveal, and bulk \u003Ccode>.env\u003C/code> copy\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>JSON Viewer - collapsible syntax-colored JSON tree with search, path copy, and 65 color themes\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Log Viewer - scrollable log output with terminal, minimal, and filterable variants; supports colored levels, auto-scroll, and export\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Request Viewer - network request inspector with headers, response body, and timing waterfall\u003C/p>\u003C/li>\u003C/ul>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>Payments\u003C/strong>\u003C/p>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Crypto + Tip Jar - donation/tipping widget supporting crypto wallets and platforms like Ko-fi and Patreon, in six layout variants\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Pros and Cons\u003C/h2>\u003Ch3 class=\"text-text-100 mt-2 -mb-1 text-base font-bold\">Pros ✅\u003C/h3>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Highly specialized\u003C/strong> - no other shadcn registry focuses this specifically on developer tooling components\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Zero vendor lock-in\u003C/strong> - you own every line of code the moment you install it\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Server Component-first\u003C/strong> - data-fetching components use ISR, keeping your page fast with live stats\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>CLI-native workflow\u003C/strong> - one command installs the component and all its dependencies automatically\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Free and open source\u003C/strong> - 19 GitHub stars (early stage) with an MIT-friendly ethos\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>AI-ready\u003C/strong> - llms.txt and the AI Copy Button make it forward-compatible with AI coding workflows\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>No version tracking\u003C/strong> - components are copied into your project, so you are never blocked by a breaking upstream change\u003C/p>\u003C/li>\u003C/ul>\u003Ch3 class=\"text-text-100 mt-2 -mb-1 text-base font-bold\">Cons ⚠️\u003C/h3>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Only 17 components\u003C/strong> - the library is early-stage; general-purpose UI components (modals, dropdowns, navigation) are not in scope\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Narrow audience\u003C/strong> - ideal for dev tools and docs sites, not general-purpose web app UIs\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Next.js App Router required\u003C/strong> - officially requires Next.js with App Router and Tailwind CSS v4 already configured\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Integration\u003C/h2>\u003Cul>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>shadcn CLI\u003C/strong> - primary install method via \u003Ccode>npx shadcn@latest add jalco/{component-name}\u003C/code>\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Next.js App Router\u003C/strong> - required; components are built as async server components where needed\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Tailwind CSS v4\u003C/strong> - styling layer; must be configured in your project before installing\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>shadcn/ui\u003C/strong> - must be initialized in the project as a prerequisite\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Shiki\u003C/strong> - used under the hood for syntax highlighting in Code Block components\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>npm registry\u003C/strong> - npm dependencies are installed automatically by the CLI\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Registry URL\u003C/strong> - components can also be added directly via \u003Ccode>npx shadcn@latest add https://ui.justinlevine.me/r/{component-name}.json\u003C/code>\u003C/p>\u003C/li>\u003C/ul>","ui.justinlevine.me",[],"jalco/ui | Shadcn registry components for dev dashboards",[504,505],{"id":26,"title":27,"slug":28},{"id":506,"title":507,"slug":508},1654,"UI Element","ui-element","https://ui.justinlevine.me/docs","Open-source component library for React + Tailwind","jal-co/ui is a shadcn-compatible registry of 17 composable components built for developer tools - log viewers, JSON trees, env tables, GitHub stats, and more",[480,484,488,491,493],[],[26,506],"content:components:2244.json","components/2244.json","components/2244",{"_path":519,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":520,"type":49,"title":521,"slug":522,"published_at":523,"order":12,"created_at":523,"updated_at":524,"faqs":525,"tags":538,"color":543,"cover":544,"images":545,"is_hot":48,"content":548,"is_paid":6,"demo_url":549,"features":550,"seo_title":555,"categories":556,"target_url":558,"description":559,"is_featured":6,"is_free_listing":6,"seo_description":560,"tags_ids":561,"features_ids":562,"categories_ids":563,"_id":564,"_type":19,"_source":20,"_file":565,"_stem":566,"_extension":19},"/components/2230",2230,"Efferd","efferd","2026-03-02 18:44:04","2026-03-14 10:59:27",[526,529,532,535],{"title":527,"content":528},"Does Efferd work without Next.js?","Yes, any React-based project works. Next.js is the recommended setup, but Efferd blocks are compatible with TanStack Start and other React frameworks.",{"title":530,"content":531},"Do I need to install anything before using Efferd?","You need an existing project with shadcn/ui already configured. Once that's set up, you can pull any block via the CLI in one command.",{"title":533,"content":534},"Is the free tier actually free forever, or is it a trial?","The free tier is permanent. Contact blocks and select Hero sections have no paywall, no time limit, and no credit card required.",{"title":536,"content":537},"Can I use Efferd blocks in client work?","Yes. Pro and Team plans include a commercial license covering unlimited personal and client projects with no per-project fees.",[539,540,541,542],{"id":484,"title":485,"slug":486},{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":493,"title":158,"slug":159},{"id":253,"title":254,"slug":254},"/efferd-3.png",[546],{"image":547},"/efferd-4.png","\u003Cblockquote>\u003Cp>Efferd is a shadcn/ui block library offering 130+ pre-built UI sections across 14 categories. You install blocks via the shadcn CLI - no npm package, no abstraction layer, the code drops straight into your project.\u003C/p>\u003C/blockquote>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">What Is Efferd?\u003C/h2>\u003Cp class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">\u003Cimg src=\"/efferd-ui-2.png\" alt=\"Efferd UI - Features\" title=\"Efferd UI - Features\" width=\"1183\" height=\"659\" loading=\"lazy\">\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Efferd is a block library built on top of shadcn/ui, designed for React developers who need production-ready UI sections without writing everything from scratch. Instead of individual components like buttons or inputs, Efferd delivers full UI sections — hero areas, auth screens, pricing tables, CTAs, and more - that you paste into your codebase and own completely.\u003C/p>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Features ✨\u003C/h2>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>130+ blocks\u003C/strong> organized across 14 categories, from auth to logo clouds\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Registry-ready CLI install\u003C/strong> via \u003Ccode>npx shadcn@latest add @efferd/[block-name]\u003C/code> — code lives in your project, not in node_modules\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Multi-framework support\u003C/strong> - works with Next.js and TanStack Start out of the box\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Radix UI and Base UI support\u003C/strong> - choose your preferred primitive layer\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Flexible icon system\u003C/strong> - swap between Lucide, Tabler Icons, HugeIcons, Phosphor Icons, and Remix Icons without refactoring\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Responsive by default\u003C/strong> - every block looks solid from mobile to ultra-wide\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>One-time pricing\u003C/strong> - no subscriptions, lifetime access and updates on Pro and Team tiers\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Free tier available\u003C/strong> - contact blocks and select hero sections at no cost\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Dark mode support\u003C/strong> - toggle-ready with Tailwind CSS theming\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Commercial license\u003C/strong> included in Pro and Team plans\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/efferd-ui-3.png\" alt=\"Efferd UI - Hero Block 6\" title=\"Efferd UI - Hero Block 6\" width=\"1200\" height=\"940\" loading=\"lazy\">\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">The key difference from most block libraries is how delivery works. Efferd is \u003Cstrong>registry-ready\u003C/strong>, meaning you pull blocks using the standard shadcn CLI (\u003Ccode>npx shadcn@latest add @efferd/block-name\u003C/code>). The code lands directly in your \u003Ccode>components/\u003C/code> folder — no node_modules dependency, no version lock-in, no black box. Once it's in, it's yours to edit however you like.\u003C/p>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Integration 🧰\u003C/h2>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Frameworks:\u003C/strong> Next.js, TanStack Start (React-based projects broadly)\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Component primitives:\u003C/strong> Radix UI, Base UI\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Styling:\u003C/strong> Tailwind CSS (utility-first, fully customizable)\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Icon libraries:\u003C/strong> Lucide, Tabler Icons, HugeIcons, Phosphor Icons, Remix Icon\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Install method:\u003C/strong> shadcn CLI (\u003Ccode>npx shadcn@latest add @efferd/[block-name]\u003C/code>) or manual copy-paste\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Registry:\u003C/strong> Listed at \u003Ccode>efferd.com/r/registry.json\u003C/code>, officially indexed in the shadcn/ui registry directory\u003C/p>\u003C/li>\u003C/ul>","https://efferd.com/blocks/hero?atp=tailkits",[551],{"id":552,"title":553,"slug":554},202,"Install via npm","install-via-npm","Efferd - shadcn/ui Blocks, CLI-Ready for React",[557],{"id":26,"title":27,"slug":28},"https://efferd.com/?atp=tailkits","Beautiful Shadcn blocks - ready-to-use & built for speed","Efferd is a shadcn/ui block library with 130+ copy-paste sections for React and Next.js. Install via CLI, one-time payment, no subscriptions.",[484,488,491,493],[552],[26],"content:components:2230.json","components/2230.json","components/2230",{"_path":568,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":569,"type":49,"title":570,"slug":571,"published_at":572,"order":45,"created_at":572,"updated_at":573,"faqs":574,"tags":575,"color":578,"cover":581,"images":582,"is_hot":6,"content":32,"is_paid":6,"demo_url":583,"features":584,"seo_title":585,"categories":586,"target_url":588,"description":589,"is_featured":6,"is_free_listing":48,"seo_description":590,"tags_ids":591,"features_ids":592,"categories_ids":593,"_id":594,"_type":19,"_source":20,"_file":595,"_stem":596,"_extension":19},"/components/2229",2229,"Bklit UI","bklit-ui","2026-03-02 18:21:07","2026-03-02 19:57:27",[],[576,577],{"id":491,"title":249,"slug":250},{"id":493,"title":158,"slug":159},{"id":579,"title":580,"slug":580},49,"gray","/bklit-ui-2.png",[],"https://ui.bklit.com/docs/components/funnel-chart",[],"Bklit UI - Chart Components Built on shadcn/ui",[587],{"id":26,"title":27,"slug":28},"https://ui.bklit.com/","Open-source charts built on shadcn/ui for React","Bklit UI is an open-source chart library built on shadcn/ui. Add line, area, ring, radar, and funnel charts to your React or Next.js app with a composable API.",[491,493],[],[26],"content:components:2229.json","components/2229.json","components/2229",{"_path":598,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":599,"type":49,"title":600,"slug":601,"published_at":602,"order":72,"created_at":602,"updated_at":603,"faqs":604,"tags":617,"color":618,"cover":619,"images":620,"is_hot":6,"content":623,"is_paid":6,"demo_url":624,"features":625,"seo_title":626,"categories":627,"target_url":629,"description":630,"is_featured":6,"is_free_listing":6,"seo_description":631,"tags_ids":632,"features_ids":633,"categories_ids":634,"_id":635,"_type":19,"_source":20,"_file":636,"_stem":637,"_extension":19},"/components/2224",2224,"Flux UI","flux-ui","2026-02-22 16:38:24","2026-03-02 19:56:34",[605,608,611,614],{"title":606,"content":607},"Does Flux work with Alpine.js alone, without Livewire?","No. Flux is built specifically for Livewire. If your project doesn't use Livewire, Flux isn't designed for it and won't work properly.",{"title":609,"content":610},"Is the free tier actually useful or just a stripped-down demo?","It's genuinely useful. The free tier includes buttons, inputs, dropdowns, modals, selects, checkboxes, switches, and layout components - enough to build most standard app interfaces without paying anything.",{"title":612,"content":613},"What's the difference between Flux and other Tailwind UI libraries like Shadcn or Preline?","Those libraries are framework-agnostic or React-focused. Flux is built specifically for Livewire's reactivity model, which means wire:model bindings, Livewire events, and server-side state all work natively - no wrappers or workarounds required.",{"title":615,"content":616},"Can I customize the components to match my own design? ","Yes. You can publish any component's Blade file to your project and modify it directly. Just keep in mind that heavily customized published files may need manual updates when Flux releases breaking changes.",[],{"id":579,"title":580,"slug":580},"/flux-ui.jpg",[621],{"image":622},"/flux-ui-3.png","\u003Cp>\u003Cstrong>TL;DR:\u003C/strong> Flux is the official UI component library for Livewire, built by the same team. It gives you production-ready, accessible, dark-mode-friendly components styled with Tailwind CSS - no hacks, no glue code needed. There's a solid free tier and a Pro version with advanced components.\u003C/p>\u003Cp>\u003Cimg src=\"/flux-ui.png\" alt=\"Flux UI - Livewire Settings page component\" title=\"Flux UI - Settings page\" width=\"1235\" height=\"825\" loading=\"lazy\">\u003C/p>\u003Ch2>What Is Flux?\u003C/h2>\u003Cp>Flux is a UI component library made specifically for Livewire, the Laravel full-stack framework. Think of it as the missing design system for your Livewire apps - built by Caleb Porzio and Hugo Sainte-Marie, the same people who created Livewire itself.\u003C/p>\u003Cp>\u003Cimg src=\"/flux-ui-2.png\" alt=\"Flux UI - Livewire Q&A Board component\" title=\"Flux UI - Q&A Board\" width=\"1235\" height=\"825\" loading=\"lazy\">\u003C/p>\u003Cp>Instead of stitching together third-party components that weren't built with Livewire in mind, Flux gives you components that just work. They're composable, keyboard-accessible, dark mode ready out of the box, and fully responsive. You drop them in and they behave exactly the way you'd expect.\u003C/p>\u003Cp>It comes in two tiers: a free version covering all the essentials, and a Pro version unlocking advanced stuff like date pickers, rich text editors, charts, and command palettes.\u003C/p>\u003Chr>\u003Ch2>Features ✨\u003C/h2>\u003Cp>\u003Cimg src=\"/flux-ui.png\" alt=\"Flux UI - Livewire Kanban board component\" title=\"Flux UI - Kanban board\" width=\"1235\" height=\"825\" loading=\"lazy\">\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Composable syntax\u003C/strong> - components are designed like building blocks you mix and match freely\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Dark mode support\u003C/strong> - every component handles light and dark mode without extra config\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Accessibility built in\u003C/strong> - keyboard navigation and screen reader support on all components\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Fully responsive\u003C/strong> - works on mobile out of the box, no extra CSS needed\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS powered\u003C/strong> - styling is done entirely via Tailwind, so it fits naturally in any Laravel + Tailwind project\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Livewire-native\u003C/strong> - wire:model, wire:click, and other Livewire attributes all work seamlessly\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Free tier available\u003C/strong> - essential components ship for free, no credit card needed\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cp>\u003Cstrong>Free components:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dropdown\u003C/p>\u003C/li>\u003Cli>\u003Cp>Modal\u003C/p>\u003C/li>\u003Cli>\u003Cp>Input\u003C/p>\u003C/li>\u003Cli>\u003Cp>Select\u003C/p>\u003C/li>\u003Cli>\u003Cp>Checkbox Group\u003C/p>\u003C/li>\u003Cli>\u003Cp>Switch Group\u003C/p>\u003C/li>\u003Cli>\u003Cp>Radio Group\u003C/p>\u003C/li>\u003Cli>\u003Cp>Header layout\u003C/p>\u003C/li>\u003Cli>\u003Cp>Sidebar layout\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Pro components (paid):\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Charts (zero-dependency, lightweight)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Calendar and Date Picker\u003C/p>\u003C/li>\u003Cli>\u003Cp>Command Palette\u003C/p>\u003C/li>\u003Cli>\u003Cp>Rich Text Editor (WYSIWYG)\u003C/p>\u003C/li>\u003Cli>\u003Cp>10+ additional advanced components\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Built by the Livewire team - first-party quality, not a side project\u003C/p>\u003C/li>\u003Cli>\u003Cp>Free tier is genuinely useful and not just a teaser\u003C/p>\u003C/li>\u003Cli>\u003Cp>Zero-compromise accessibility on every component\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dark mode works without any extra configuration\u003C/p>\u003C/li>\u003Cli>\u003Cp>Composable API feels natural and flexible\u003C/p>\u003C/li>\u003Cli>\u003Cp>Baked into the official Livewire v4 starter kit\u003C/p>\u003C/li>\u003Cli>\u003Cp>Regular updates alongside Livewire releases\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Requires Livewire - not usable in vanilla Laravel or other stacks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pro license is per-project, which can add up for agencies\u003C/p>\u003C/li>\u003Cli>\u003Cp>Component library is still growing - some niche components aren't there yet\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind v4 required, which may force an upgrade in older projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>Published component customization requires ejecting files, which can complicate future updates\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Laravel\u003C/strong> - requires Laravel v10 or higher\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Livewire\u003C/strong> - requires Livewire v3.5.19+ or v4.0+\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS\u003C/strong> - requires Tailwind v4.0+\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>PHP\u003C/strong> - requires PHP 8.1+\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Blade templates\u003C/strong> - integrates directly into your existing Blade layout files via \u003Ccode>@fluxAppearance\u003C/code> and \u003Ccode>@fluxScripts\u003C/code> directives\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Laravel Forge\u003C/strong> - supported via Forge's Packages section for Pro license authentication\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Laravel Cloud\u003C/strong> - supported via Build Commands for Pro package authentication\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Composer\u003C/strong> - installed and managed as a standard Composer package (\u003Ccode>livewire/flux\u003C/code>)\u003C/p>\u003C/li>\u003C/ul>","https://fluxui.dev/themes",[],"Flux UI - Livewire Component Library for Laravel Apps",[628],{"id":26,"title":27,"slug":28},"https://fluxui.dev/","Official Livewire components, free and Pro","Flux is a hand-crafted UI component library for Livewire. It ships accessible, dark-mode-ready components built on Tailwind CSS - free and Pro tiers available.",[],[],[26],"content:components:2224.json","components/2224.json","components/2224",{"_path":639,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":640,"type":49,"title":641,"slug":642,"published_at":643,"order":346,"created_at":643,"updated_at":644,"faqs":645,"tags":658,"color":661,"cover":664,"images":665,"is_hot":6,"content":666,"is_paid":6,"demo_url":667,"features":668,"seo_title":669,"categories":670,"target_url":672,"description":673,"is_featured":6,"is_free_listing":6,"seo_description":674,"tags_ids":675,"features_ids":676,"categories_ids":677,"_id":678,"_type":19,"_source":20,"_file":679,"_stem":680,"_extension":19},"/components/2223",2223,"ReUI","reui","2026-02-22 16:30:05","2026-03-02 19:56:27",[646,649,652,655],{"title":647,"content":648},"Is ReUI actually free, or is there a paid tier? ","Yes, it is completely free and open-source. The full library of 966+ patterns is publicly available on GitHub and via the documentation site with no premium plan required.",{"title":650,"content":651},"Can I use ReUI in a project that already uses shadcn/ui? ","Absolutely - that is exactly what it is designed for. ReUI is a first-class shadcn registry, so it slots into any existing shadcn/ui project without requiring any major changes to your setup.",{"title":653,"content":654},"Do I have to use all the dependencies to get started? ","No. Because ReUI uses a copy-paste model, you only bring in the code for what you actually use. Each component or pattern lists its specific dependencies, so you are never forced to install the entire library's dependency tree for a single button.",{"title":656,"content":657},"What is the difference between a component and a pattern in ReUI?","A component is the base UI primitive (like a Button or Input). A pattern is a composed, real-world use case built from one or more components, like a data grid with sorting and filters, or a file upload with drag-and-drop. Most of ReUI's value lives at the pattern level.",[659,660],{"id":491,"title":249,"slug":250},{"id":493,"title":158,"slug":159},{"id":662,"title":663,"slug":663},48,"stone","/reui.png",[],"\u003Cp>\u003Cstrong>TL;DR:\u003C/strong> ReUI is a free, open-source shadcn/ui pattern registry built by Keenthemes. It ships 966+ production-ready components and patterns compatible with Radix UI and Base UI, supports all 5 shadcn create styles, and is designed to help React developers ship real-world UIs significantly faster without writing everything from scratch.\u003C/p>\u003Ch2>What Is ReUI?\u003C/h2>\u003Cp>ReUI is a free, open-source component pattern library that extends shadcn/ui with 966+ ready-to-use patterns and components for React. Built by the Keenthemes team - a studio with over 15 years of UI/UX and full-stack development experience - it goes well beyond what shadcn/ui ships by default.\u003C/p>\u003Cp>\u003Cstrong>ReUI is completely free.\u003C/strong> The core library is open-source on GitHub with 2.6k+ stars as of early 2026, and the 2.0 release expanded the offering with dual library support and compatibility across all 5 shadcn create styles.\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>966+ patterns\u003C/strong> composed from core shadcn/ui primitives into real-world, production-ready use cases\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>100% free and open-source\u003C/strong> - no premium tiers blocking essential functionality\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Dual primitive support\u003C/strong> - every component and pattern is available in both Radix UI and Base UI versions\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>All 5 shadcn create styles supported\u003C/strong> - works out of the box with New York, Default, and all other official styles\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Extended semantic tokens\u003C/strong> - adds \u003Ccode>--info\u003C/code>, \u003Ccode>--success\u003C/code>, \u003Ccode>--warning\u003C/code>, \u003Ccode>--invert\u003C/code> color tokens on top of the standard shadcn theming system\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>TypeScript-first\u003C/strong> - full type safety with autocompletion across all components\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Motion-powered animations\u003C/strong> - smooth micro-interactions and transitions using the Motion library\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Dark mode included\u003C/strong> - every pattern ships with light and dark mode support via CSS variables\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>WCAG-accessible\u003C/strong> - proper ARIA attributes and keyboard navigation baked in, not bolted on\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>AI-workflow friendly\u003C/strong> - code is structured for use with Cursor, Copilot, v0, and other AI coding tools\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Completely free\u003C/strong> - the full 966+ pattern library is accessible without a paywall, which is rare at this quality level\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Real-world patterns, not just primitives\u003C/strong> - the library solves actual UI problems like data grids with filters, kanban boards, and multi-step forms, not just basic buttons\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Dual primitive support\u003C/strong> is a genuine differentiator - you can use Radix UI or Base UI without having to switch libraries entirely\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Actively maintained\u003C/strong> - the 2.0 release brought major upgrades and the team ships new patterns regularly\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>shadcn create compatible\u003C/strong> - drops into any existing shadcn project with no friction\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Community-loved\u003C/strong> - even shadcn's own creator commented positively on the release\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Copy-paste ownership\u003C/strong> - no hidden dependencies, no vendor lock-in, full code control\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>High pattern count means more navigation\u003C/strong> - with 966+ patterns across 60+ categories, finding the right one requires a little exploration upfront\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Motion dependency\u003C/strong> - animations rely on the Motion library, which adds some initial setup if you are not already using it\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS required\u003C/strong> - it is not framework-agnostic; if you are outside the Tailwind ecosystem this library is not a fit\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>React-only currently\u003C/strong> - there is no Vue, Svelte, or Solid version; it is a React/Next.js focused library\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>shadcn/ui CLI\u003C/strong> - install components directly using the shadcn registry CLI with the \u003Ccode>@reui\u003C/code> registry tag\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Manual copy-paste\u003C/strong> - grab any component's code directly from the docs and paste it into your project\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Next.js\u003C/strong> - fully compatible and production-tested with Next.js App Router projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>React + TypeScript\u003C/strong> - works with any modern React setup using TypeScript\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS\u003C/strong> - requires Tailwind CSS for styling; extend your existing \u003Ccode>tailwind.config\u003C/code> as documented\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Radix UI or Base UI\u003C/strong> - choose either primitive layer per-component depending on your project's existing dependencies\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Motion library\u003C/strong> - animated components require Motion (formerly Framer Motion); add it once and all animation patterns work\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>nuqs\u003C/strong> - some advanced patterns (like filter components with URL state) integrate with nuqs for query string management\u003C/p>\u003C/li>\u003C/ul>","https://reui.io/patterns/carousel",[],"ReUI - 966 Free shadcn/ui Patterns for React",[671],{"id":26,"title":27,"slug":28},"https://reui.io/","Free shadcn/ui patterns, 966+ components for React","ReUI is a free, open-source shadcn/ui pattern library with 966+ production-ready components for React. Works with Radix UI and Base UI, supports all 5 shadcn styles.",[491,493],[],[26],"content:components:2223.json","components/2223.json","components/2223",{"_path":682,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":683,"type":49,"title":684,"slug":685,"published_at":686,"order":687,"created_at":686,"updated_at":688,"faqs":689,"tags":690,"color":696,"cover":697,"images":698,"is_hot":6,"content":699,"is_paid":6,"demo_url":700,"features":701,"seo_title":702,"categories":703,"target_url":700,"description":705,"is_featured":6,"is_free_listing":6,"seo_description":706,"tags_ids":707,"features_ids":708,"categories_ids":709,"_id":710,"_type":19,"_source":20,"_file":711,"_stem":712,"_extension":19},"/components/2221",2221,"Sileo","sileo","2026-02-22 16:14:03",11,"2026-03-02 19:57:12",[],[691,692],{"id":491,"title":249,"slug":250},{"id":693,"title":694,"slug":695},2217,"Animated","animated",{"id":662,"title":663,"slug":663},"/sileo.png",[],"\u003Cp>Sileo is a free, open-source React toast notification library that delivers smooth, animated alerts using spring physics and gooey SVG morphing. It's tiny, opinionated, and works beautifully out of the box with a single npm install.\u003C/p>\u003Cp>Best suited for developers who want polished notifications without spending time on configuration.\u003C/p>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Features ✨\u003C/h2>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Spring physics animations\u003C/strong> - Every toast enters, idles, and exits with realistic motion using the Motion library under the hood\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Gooey SVG morphing\u003C/strong> - The signature visual effect that makes Sileo stand out from every other toast library\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>5 toast types\u003C/strong> - Success, error, warning, info, and action - each with color-coded badges\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Promise support\u003C/strong> - Chain loading, success, and error states from a single \u003Ccode>sileo.promise()\u003C/code> call\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>6 position options\u003C/strong> - Top or bottom, combined with left, center, or right\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Custom icons\u003C/strong> - Swap out default state icons for any React node\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Auto-dismiss control\u003C/strong> - Set a custom duration per toast, or pass \u003Ccode>null\u003C/code> to keep it on screen until dismissed\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Action buttons\u003C/strong> - Attach interactive buttons directly to any toast\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Style overrides\u003C/strong> - Customize individual toast elements (title, description, badge, button) via a \u003Ccode>styles\u003C/code> prop\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Dark mode support\u003C/strong> - Automatically adapts background and text colors based on system preference\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Swipe to dismiss\u003C/strong> - Users can swipe toasts away on touch devices\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Included Components 📒\u003C/h2>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Sileo ships with two main exports you drop into your project:\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Ccode>Toaster\u003C/code> - The container component you place once in your app's root layout. It manages all active toast instances and accepts global defaults like \u003Ccode>position\u003C/code>, \u003Ccode>offset\u003C/code>, and shared \u003Ccode>options\u003C/code> for fill colors or style overrides.\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Ccode>sileo\u003C/code> - The function you call from anywhere in your app to trigger a toast. It exposes named methods for each toast type: \u003Ccode>sileo.success()\u003C/code>, \u003Ccode>sileo.error()\u003C/code>, \u003Ccode>sileo.warning()\u003C/code>, \u003Ccode>sileo.info()\u003C/code>, \u003Ccode>sileo.action()\u003C/code>, \u003Ccode>sileo.promise()\u003C/code>, and the generic \u003Ccode>sileo.show()\u003C/code> if you want to set the state dynamically at runtime.\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">There are also exported TypeScript types - \u003Ccode>SileoOptions\u003C/code>, \u003Ccode>SileoPosition\u003C/code>, \u003Ccode>SileoState\u003C/code>, \u003Ccode>SileoStyles\u003C/code>, and \u003Ccode>SileoButton\u003C/code> - for teams working in typed codebases.\u003C/p>\u003Chr>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Pros and Cons\u003C/h2>\u003Ch3 class=\"text-text-100 mt-2 -mb-1 text-base font-bold\">Pros ✅\u003C/h3>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Drop-dead gorgeous out of the box - the SVG morphing effect genuinely looks unlike any other toast library\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Minimal API means you're up and running in under 5 minutes\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Promise integration is really well thought out - loading, success, and error states handled in a single call\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>MIT license - completely free for personal and commercial projects\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>TypeScript support built in, no separate type package needed\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Very lightweight with only one dependency (Motion)\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Active development - reached 1,000+ GitHub stars within days of launch\u003C/p>\u003C/li>\u003C/ul>\u003Ch3 class=\"text-text-100 mt-2 -mb-1 text-base font-bold\">Cons ⚠️\u003C/h3>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>React-only - if you're on Vue, Svelte, or vanilla JS, you'll need the unofficial community port\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Being "opinionated" means limited customization compared to more flexible libraries like react-toastify\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Very new library (launched February 2026) - not battle-tested in large production environments yet\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>No built-in accessibility options documented (ARIA roles, screen reader support)\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Requires React 18 or higher - older projects can't use it without upgrading\u003C/p>\u003C/li>\u003C/ul>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Integration\u003C/h2>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>React 18+\u003C/strong> - Peer dependency, required for installation\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Motion\u003C/strong> (\u003Ccode>motion\u003C/code> npm package) - The only runtime dependency, handles all animation primitives\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Next.js\u003C/strong> - Works out of the box by placing \u003Ccode>Toaster\u003C/code> in your root layout file\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Remix\u003C/strong> - Compatible, place \u003Ccode>Toaster\u003C/code> in your app's root component\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Vite + React\u003C/strong> - Standard setup, no extra configuration needed\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>TypeScript\u003C/strong> - Native types included, no \u003Ccode>@types/sileo\u003C/code> package required\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Tailwind CSS\u003C/strong> - The \u003Ccode>styles\u003C/code> prop accepts Tailwind class strings directly for custom styling\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Any Promise-based workflow\u003C/strong> - Works with \u003Ccode>fetch\u003C/code>, \u003Ccode>axios\u003C/code>, or any async function via \u003Ccode>sileo.promise()\u003C/code>\u003C/p>\u003C/li>\u003C/ul>","https://sileo.aaryan.design/",[],"Sileo | Animated Toast Alerts for React Apps",[704],{"id":26,"title":27,"slug":28},"Animated toast alerts, beautiful by default","Sileo is a lightweight React toast library that uses spring physics and gooey SVG morphing to deliver smooth, beautiful notifications with a minimal API - no config needed",[491,693],[],[26],"content:components:2221.json","components/2221.json","components/2221",{"_path":714,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":715,"type":49,"title":716,"slug":717,"published_at":718,"order":719,"created_at":718,"updated_at":720,"faqs":721,"tags":734,"color":736,"cover":737,"images":738,"is_hot":6,"content":739,"is_paid":6,"demo_url":740,"features":741,"seo_title":742,"categories":743,"target_url":749,"description":750,"is_featured":6,"is_free_listing":6,"seo_description":751,"tags_ids":752,"features_ids":753,"categories_ids":754,"_id":755,"_type":19,"_source":20,"_file":756,"_stem":757,"_extension":19},"/components/2209",2209,"Base UI","base-ui","2026-01-24 13:07:48",14,"2026-03-02 19:57:58",[722,725,728,731],{"title":723,"content":724},"Is Base UI tied to any styling library?","No, it’s built to work with basically any CSS approach, because it ships unstyled.",{"title":726,"content":727},"Is it okay for production apps?","Yes, the project is positioned as a long-term foundation, and the site lists real teams using it.",{"title":729,"content":730},"Does it help with accessibility work?","That’s a core focus: components follow WAI-ARIA patterns and are designed around accessible behavior",{"title":732,"content":733},"Can I use it commercially?","Yes, it’s MIT licensed, which is generally commercial-friendly",[735],{"id":491,"title":249,"slug":250},{"id":579,"title":580,"slug":580},"/base-ui.png",[],"\u003Ch2>What Is the Base UI?\u003C/h2>\u003Cp>Base UI is a set of \u003Cstrong>unstyled React components\u003C/strong> that handle the hard parts (interaction patterns, keyboard support, ARIA) while letting you style everything yourself. It’s built for \u003Cstrong>composability and long-term maintainability\u003C/strong> when you’re building a real design system.\u003C/p>\u003Cp>If you like the idea of “primitives” or “building blocks” instead of pre-themed components, Base UI fits that workflow.\u003C/p>\u003Ch2>What features does Base UI offer? ✨\u003C/h2>\u003Cp>It’s designed to be flexible first, not pretty by default. The big wins:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Unstyled by default\u003C/strong> (no bundled CSS)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Accessible patterns baked in\u003C/strong> (WAI-ARIA aligned)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Composable APIs\u003C/strong> (easy to wrap, extend, or swap parts)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Works with your styling choice\u003C/strong> (Tailwind, CSS Modules, CSS-in-JS, plain CSS)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Docs are LLM-friendly\u003C/strong> (pages offer “View as Markdown” + an \u003Ccode>llms.txt\u003C/code> entry)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What components are included in Base UI? 📒\u003C/h2>\u003Cp>You get a broad set of common building blocks, including things like \u003Cstrong>Accordion, Dialog, Menu/Menubar, Navigation Menu, Popover, Select, Tabs, Toast, Tooltip, Slider, Switch\u003C/strong>, and more.\u003C/p>\u003Cp>It also includes helpful utilities (providers and helpers) to support real app setups.\u003C/p>\u003Ch2>What are the pros and cons of Base UI?\u003C/h2>\u003Cp>Base UI is great when you want control, but that comes with tradeoffs.\u003C/p>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>You control the look 100%\u003C/strong> (no fighting a theme)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Strong accessibility baseline\u003C/strong> (less DIY ARIA work)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Easy to compose into your design system\u003C/strong>\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>MIT licensed\u003C/strong> (simple for commercial use)\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>You must provide styling\u003C/strong> (it won’t look “done” out of the box)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Design consistency is on you\u003C/strong> (tokens, theming, UI rules)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Some teams may prefer pre-styled speed\u003C/strong> for prototypes\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How do you integrate Base UI into a React app?\u003C/h2>\u003Cp>Typical integration is straightforward, especially if you already have a styling approach.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Pick your styling setup (Tailwind, CSS Modules, CSS-in-JS, etc.)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Wrap Base UI primitives into your own branded components (Button, Input, etc.)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Lean on the docs and component “anatomy” to assemble only the parts you need\u003C/p>\u003C/li>\u003Cli>\u003Cp>If you use AI helpers, share the docs “Markdown view” or \u003Ccode>llms.txt\u003C/code> to keep answers accurate\u003C/p>\u003C/li>\u003Cli>\u003Cp>If you’re still on the older \u003Cstrong>@mui/base\u003C/strong>, plan a move: it’s marked as deprecated and points to Base UI as the replacement\u003C/p>\u003C/li>\u003C/ul>","https://base-ui.com/react/components/accordion",[],"Base UI Component Library for Accessible React UIs",[744,748],{"id":745,"title":746,"slug":747},2208,"Unstyled","unstyled",{"id":26,"title":27,"slug":28},"https://base-ui.com/","Unstyled, accessible React components","Build accessible React interfaces with Base UI unstyled components. Use Tailwind or any CSS, and keep full control of styling.",[491],[],[745,26],"content:components:2209.json","components/2209.json","components/2209",{"_path":759,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":760,"type":49,"title":761,"slug":762,"published_at":763,"order":764,"created_at":763,"updated_at":765,"faqs":766,"tags":770,"color":778,"cover":779,"images":780,"is_hot":6,"content":781,"is_paid":6,"demo_url":782,"features":783,"seo_title":794,"categories":795,"target_url":782,"description":797,"is_featured":6,"is_free_listing":6,"seo_description":798,"tags_ids":799,"features_ids":800,"categories_ids":801,"_id":802,"_type":19,"_source":20,"_file":803,"_stem":804,"_extension":19},"/components/2194",2194,"SmoothUI","smoothui","2026-01-02 13:30:26",15,"2026-03-02 19:58:22",[767],{"title":768,"content":769},"How to integrate SmoothUI into a project?","You typically add the SmoothUI registry, install components using the shadcn CLI flow, then customize with Tailwind classes like you would in any Tailwind app. It’s designed to fit nicely in React and Next.js projects.",[771,772,776,777],{"id":491,"title":249,"slug":250},{"id":773,"title":774,"slug":775},1747,"Framer Motion","framer-motion",{"id":493,"title":158,"slug":159},{"id":693,"title":694,"slug":695},{"id":579,"title":580,"slug":580},"/smoothui.webp",[],"\u003Cdiv data-youtube-video=\"true\" class=\"responsive\">\u003Ciframe src=\"https://www.youtube.com/embed/epYwHno8m_Q\" width=\"1600\" height=\"900\" allowfullscreen=\"true\" allow=\"autoplay; fullscreen; picture-in-picture\" style=\"aspect-ratio:1600/900; width: 100%; height: auto;\">\u003C/iframe>\u003C/div>\u003Cp>SmoothUI is a set of React components and UI blocks built with Tailwind CSS and Motion, designed to help you ship interfaces that feel polished fast. It’s especially handy if you already use shadcn/ui patterns and want motion-ready components without rebuilding everything yourself.\u003C/p>\u003Cp>\u003Cstrong>Key stats (quick scan):\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Tech stack:\u003C/strong> React + Tailwind CSS v4 + Motion (Framer Motion) + TypeScript\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Component count:\u003C/strong> “40+” components listed in docs\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>License:\u003C/strong> MIT (permissive, commercial-friendly with attribution)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Repo snapshot:\u003C/strong> 626 stars, 31 forks shown on GitHub\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Docs freshness:\u003C/strong> pages show updates as of Dec 14, 2025\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2>What Is the SmoothUI?\u003C/h2>\u003Cp>SmoothUI is a component library that combines React, Tailwind CSS, and Motion to deliver modern UI with smooth animations. The goal is simple: reusable pieces you can drop into an app to get great interaction and visuals quickly.\u003C/p>\u003Cp>\u003Cstrong>Definition:\u003C/strong> A “component library” is a collection of prebuilt UI parts (buttons, inputs, modals, sections) that you reuse across screens so design and behavior stay consistent.\u003C/p>\u003Chr>\u003Ch2>What features does SmoothUI include? ✨\u003C/h2>\u003Cp>You get animation-forward components, shadcn-friendly install flows, and customization via Tailwind classes. It’s built to be developer-friendly (TypeScript-first) and practical for real projects (responsive + dark mode support).\u003C/p>\u003Cp>\u003Cstrong>Feature highlights:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Smooth animations powered by Motion\u003C/p>\u003C/li>\u003Cli>\u003Cp>shadcn CLI compatibility for installing components\u003C/p>\u003C/li>\u003Cli>\u003Cp>TypeScript-first components\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dark mode support out of the box\u003C/p>\u003C/li>\u003Cli>\u003Cp>Accessibility-focused defaults\u003C/p>\u003C/li>\u003Cli>\u003Cp>MCP support so AI assistants can discover/install components\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Which components and blocks are included? 📒\u003C/h2>\u003Cp>SmoothUI includes a broad set of UI components (docs call out 40+), plus prebuilt page blocks (hero, pricing, testimonial, FAQ, footer, logo clouds, stats, team sections). If you’re building marketing pages or dashboards, it covers a lot of the “common layout” work.\u003C/p>\u003Cp>\u003Cstrong>Examples you’ll see in the component catalog:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Basics: Accordion, inputs, modals, toasts\u003C/p>\u003C/li>\u003Cli>\u003Cp>Interactive/fun: Dynamic Island, Power Off Slide, Siri Orb\u003C/p>\u003C/li>\u003Cli>\u003Cp>“Showy hero” bits: GitHub Stars Animation (animated counter + avatars)\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Note:\u003C/strong> The homepage also highlights “premium blocks”, so expect some blocks to be gated or priced depending on the section you’re browsing.\u003C/p>\u003Chr>\u003Ch2>Pros and Cons\u003C/h2>\u003Cp>If you want modern UI that feels alive, SmoothUI saves time and looks great quickly. The tradeoff is that animation-heavy UI can add complexity (and you’ll want to be mindful of performance and consistency across your app).\u003C/p>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Quick installs via shadcn-style workflow and registry approach\u003C/p>\u003C/li>\u003Cli>\u003Cp>Strong “polish” factor from Motion animations\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind-based customization (fits typical frontend workflows)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Good coverage: 40+ components plus blocks for common sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT licensed, so it’s flexible for commercial projects (keep the license notice)\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Animation-heavy components can increase bundle size or require extra performance care\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind CSS v4 is referenced, so older Tailwind setups may need tweaks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Some blocks appear positioned as premium on the homepage\u003C/p>\u003C/li>\u003Cli>\u003Cp>You’ll still need to align visuals with your design system (spacing, motion feel, brand tokens)\u003C/p>\u003C/li>\u003C/ul>","https://smoothui.dev/",[784,788,790],{"id":785,"title":786,"slug":787},204,"Copy & Paste","copy-paste",{"id":789,"title":190,"slug":191},1719,{"id":791,"title":792,"slug":793},1704,"Theming","theming","SmoothUI - Animated React UI with Tailwind CSS",[796],{"id":26,"title":27,"slug":28},"Animated React components for Tailwind projects","Free React components and UI blocks built with Tailwind CSS v4 and Motion. shadcn/ui friendly, responsive, dark mode-ready, easy to customize.",[491,773,493,693],[785,789,791],[26],"content:components:2194.json","components/2194.json","components/2194",{"_path":806,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":807,"type":49,"title":808,"slug":809,"published_at":810,"order":811,"created_at":810,"updated_at":812,"faqs":813,"tags":814,"color":820,"cover":821,"images":822,"is_hot":6,"content":823,"is_paid":6,"demo_url":824,"features":825,"seo_title":830,"categories":831,"target_url":824,"description":833,"is_featured":6,"is_free_listing":6,"seo_description":834,"tags_ids":835,"features_ids":836,"categories_ids":837,"_id":838,"_type":19,"_source":20,"_file":839,"_stem":840,"_extension":19},"/components/1799",1799,"BadtzUI","badtzui","2025-04-14 20:55:01",16,"2026-03-09 19:29:17",[],[815,816,817,818,819],{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":693,"title":694,"slug":695},{"id":493,"title":158,"slug":159},{"id":773,"title":774,"slug":775},{"id":253,"title":254,"slug":254},"/badtzui-4.png",[],"\u003Ch2>What Is the BadtzUI React?\u003C/h2>\u003Cp>BadtzUI React is a modern, lightweight collection of UI components built specifically for React JS developers. It’s designed to make your life easier by providing a range of ready-to-use, stylish components that you can quickly integrate into your projects.\u003C/p>\u003Cp>\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;\">\u003Cdiv data-native-video=\"true\" class=\"responsive\">\u003Cvideo autoplay=\"true\" loop=\"true\" src=\"https://ik.imagekit.io/landingpagefyi/Tailkits/badtz-ui-card-1_8TrCJIntw.mp4/ik-video.mp4?updatedAt=1744663758663\" width=\"1600\" height=\"900\">\u003C/video>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cdiv data-native-video=\"true\" class=\"responsive\">\u003Cvideo autoplay=\"true\" loop=\"true\" src=\"https://ik.imagekit.io/landingpagefyi/Tailkits/badtz-ui-card-2_Lo9jXXvCg.mp4/ik-video.mp4?updatedAt=1744663758354\" width=\"1600\" height=\"900\">\u003C/video>\u003C/div>\u003C/div>\u003C/div>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Modern Design:\u003C/strong> Clean, contemporary styling that makes your apps look fresh.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Lightweight & Fast:\u003C/strong> Optimized for performance so your app stays speedy.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Easy Customization:\u003C/strong> Simple tweaks let you match your brand’s style.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Regular Updates:\u003C/strong> Check out the changelog for new features and improvements.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Developer-Friendly:\u003C/strong> Built with React, ensuring smooth integration and ease-of-use.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/badtzui.webp\" alt=\" BadtzUI React Library\" title=\" BadtzUI React Library\" width=\"672\" height=\"378\">\u003C/p>\u003Ch2>Included Components 📒\u003C/h2>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"3\" style=\"grid-template-columns: repeat(3, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Ch3>3D & Shaders\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Pixel Distortion \u003Cem>(Hot)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pulse Shader\u003C/p>\u003C/li>\u003Cli>\u003Cp>Mouse Wave Shader\u003C/p>\u003C/li>\u003Cli>\u003Cp>Glass Distortion \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Globe \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Liquid Shader \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Ch3>Components\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Bento Grid \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Radiant Edge \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Spaceship Scrollbar\u003C/p>\u003C/li>\u003Cli>\u003Cp>Spotlight Box \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Social Proof Avatars\u003C/p>\u003C/li>\u003Cli>\u003Cp>Border Beam\u003C/p>\u003C/li>\u003Cli>\u003Cp>3D Wrapper\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Ch3>Components\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Cloud Orbit \u003Cem>(New)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dock\u003C/p>\u003C/li>\u003Cli>\u003Cp>Expandable Card\u003C/p>\u003C/li>\u003Cli>\u003Cp>Image Split \u003Cem>(Hot)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Image Trail \u003Cem>(New)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Infinite Ribbon\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"3\" style=\"grid-template-columns: repeat(3, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Ch3>Backgrounds\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Stripe Animated Gradient\u003C/p>\u003C/li>\u003Cli>\u003Cp>Hyperspace Background\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Text Animations\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Blur Reveal\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Ch3>Buttons\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Gradient Slide\u003C/p>\u003C/li>\u003Cli>\u003Cp>Star Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Confetti Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Shuffle Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Stagger Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Like Button\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Ch3>Animated Cards\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Animated Card 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Card 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Card 3\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Card 4 \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Card 5 \u003Cem>(Soon)\u003C/em>\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Easy to Use:\u003C/strong> Straightforward implementation with clear documentation.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Visually Appealing:\u003C/strong> Offers a sleek and professional look out of the box.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Performance Focused:\u003C/strong> Optimized for speed and minimal load on your app.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Active Updates:\u003C/strong> Frequent improvements and bug fixes based on user feedback.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Limited Customization:\u003C/strong> Some components might need extra work for highly unique designs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Learning Curve:\u003C/strong> Beginners might need a bit of time to fully explore all features.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Documentation Depth:\u003C/strong> While clear, some sections could benefit from more detailed examples.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/badtzui.png\" alt=\"Dock UI - React Component\" title=\"Dock UI - React Component\" width=\"900\" height=\"692\" loading=\"lazy\">\u003C/p>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>React Ecosystem:\u003C/strong> Seamlessly fits into any React project.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Easy Setup:\u003C/strong> Quick installation with npm or yarn.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Customizable Themes:\u003C/strong> Tweak styles easily using provided settings.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Responsive Design:\u003C/strong> Works well across different devices and screen sizes.\u003C/p>\u003C/li>\u003C/ul>","https://pro.badtz-ui.com/",[826],{"id":827,"title":828,"slug":829},208,"Documentation","documentation","BadtzUI: Premium UI Components for React JS",[832],{"id":26,"title":27,"slug":28},"UI Components for React","Experience BadtzUI React with an intuitive collection of UI components designed for seamless React integration and modern aesthetics.",[488,491,693,493,773],[827],[26],"content:components:1799.json","components/1799.json","components/1799",{"_path":842,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":843,"type":49,"title":844,"slug":845,"published_at":846,"order":847,"created_at":846,"updated_at":848,"faqs":849,"tags":862,"color":867,"cover":868,"images":869,"is_hot":6,"content":870,"is_paid":6,"demo_url":871,"features":872,"seo_title":874,"categories":875,"target_url":871,"description":878,"is_featured":6,"is_free_listing":6,"seo_description":879,"tags_ids":880,"features_ids":881,"categories_ids":882,"_id":883,"_type":19,"_source":20,"_file":884,"_stem":885,"_extension":19},"/components/2170",2170,"Basecoat UI","basecoat-ui","2025-10-18 13:29:42",17,"2026-03-02 19:58:54",[850,853,856,859],{"title":851,"content":852},"Is Basecoat UI free for commercial use?","Yes, it’s MIT-licensed, so commercial use is allowed. ",{"title":854,"content":855},"Do I need React or Next.js?","No. It’s built for plain HTML + Tailwind and any web stack. ",{"title":857,"content":858},"Can I use shadcn/ui themes with it?","Yes. It’s compatible with shadcn/ui themes and supports dark mode.",{"title":860,"content":861},"How much JavaScript is required?","Only a tiny amount for interactive parts; there’s no JS runtime by default.",[863,864,866],{"id":491,"title":249,"slug":250},{"id":865,"title":170,"slug":171},190,{"id":493,"title":158,"slug":159},{"id":579,"title":580,"slug":580},"/basecoat-ui.png",[],"\u003Ch2>What Is the Basecoat UI?\u003C/h2>\u003Cp>Basecoat UI is a modern, MIT-licensed Tailwind CSS component library that recreates the shadcn/ui experience without React. It uses clean, readable classes, minimal vanilla JS for interactivity, and works with virtually any backend or frontend stack.\u003C/p>\u003Cp>\u003Cimg src=\"/basecoat-ui-2.png\" alt=\"Basecoat UI: shadcn/ui, no React\" title=\"Basecoat UI: Admin\" width=\"1050\" height=\"835\" loading=\"lazy\">\u003C/p>\u003Cp>\u003Cstrong>Key stats & terms:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Framework-agnostic\u003C/strong>: usable with Laravel, Rails, Django, Flask, Astro, or plain HTML.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Licensing\u003C/strong>: \u003Cstrong>MIT\u003C/strong> (free & permissive).\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Accessibility\u003C/strong>: components follow a11y best practices.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What Features Stand Out? ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Lightweight styles with \u003Cstrong>no runtime JS\u003C/strong>; tiny vanilla JS only where needed\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Clean class names\u003C/strong> (avoid “class soup”)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Themeable\u003C/strong> and \u003Cstrong>dark-mode ready\u003C/strong>; compatible with shadcn/ui themes\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Accessible\u003C/strong> defaults (ARIA, focus, keyboard)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Works anywhere\u003C/strong> Tailwind runs; framework-agnostic\u003C/p>\u003C/li>\u003Cli>\u003Cp>Optional \u003Cstrong>CLI\u003C/strong> to scaffold and speed setup\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Open source (MIT)\u003C/strong> with docs and examples\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What’s Included Out of the Box? 📒\u003C/h2>\u003Cp>You’ll find essentials like buttons, inputs/forms, cards, alerts, nav elements, dialogs/modals, dropdowns/menus, tabs, accordions, toasts, and more; structured to keep HTML readable and theming consistent. (Exact set evolves; check docs for the latest.)\u003C/p>\u003Ch2>What Are the Pros and Cons?\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>No React required\u003C/strong>; bring shadcn/ui-style design to any stack\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Readable HTML\u003C/strong>—maintainable Tailwind without massive utility chains\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Theme compatibility\u003C/strong> with shadcn/ui; dark mode support\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tiny JS footprint\u003C/strong> and focus on accessibility\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>MIT license\u003C/strong> for commercial projects\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Component breadth still growing\u003C/strong> compared to older kits\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>JS-heavy widgets\u003C/strong> may need extra wiring (since there’s no React runtime)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Ecosystem size\u003C/strong> smaller than long-standing libraries (e.g., Flowbite/Preline)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How Does It Integrate?\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Works with:\u003C/strong> Laravel, Rails, Django, Flask, Astro, Hugo, or plain HTML\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS\u003C/strong> required; plays nicely with existing Tailwind configs\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Optional Alpine.js\u003C/strong> for simple interactivity if desired\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Theme sharing\u003C/strong> with shadcn/ui design tokens/themes\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>CLI & docs\u003C/strong> guide install and scaffolding\u003C/p>\u003C/li>\u003C/ul>","https://basecoatui.com/",[873],{"id":791,"title":792,"slug":793},"Basecoat UI - shadcn/ui without React",[876,877],{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"shadcn/ui without React","Learn how Basecoat UI brings shadcn/ui-style components to plain HTML with minimal JS, theming, and accessibility—usable on any web stack. ",[491,865,493],[791],[506,26],"content:components:2170.json","components/2170.json","components/2170",{"_path":887,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":888,"type":49,"title":889,"slug":890,"published_at":891,"order":892,"created_at":891,"updated_at":893,"faqs":894,"tags":907,"color":911,"cover":912,"images":913,"is_hot":6,"content":914,"is_paid":6,"demo_url":915,"features":916,"seo_title":919,"categories":920,"target_url":922,"description":923,"is_featured":6,"is_free_listing":6,"seo_description":924,"tags_ids":925,"features_ids":926,"categories_ids":927,"_id":928,"_type":19,"_source":20,"_file":929,"_stem":930,"_extension":19},"/components/2162",2162,"Blocks.so","blocksso","2025-10-10 21:02:54",18,"2026-03-02 19:59:29",[895,898,901,904],{"title":896,"content":897},"Is Blocks.so free for commercial projects?","Yes, licensed MIT, so you can use it commercially. ",{"title":899,"content":900},"Do I need to use shadcn/ui?","Blocks are built with shadcn/ui + Tailwind. You can still adapt them, but the best experience is with that stack.",{"title":902,"content":903},"Can I add blocks by command instead of copy-pasting?","Yes. Configure the remote registry and run the shadcn CLI to add specific blocks (e.g., @blocks/login-01)",{"title":905,"content":906},"Which categories are available right now?","AI (small set), dialogs, auth, forms, tables, stats, sidebars, grid lists, file upload, etc.—as listed on the homepage",[908,909,910],{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":493,"title":158,"slug":159},{"id":579,"title":580,"slug":580},"/blocksso-2.png",[],"\u003Ch2>What Is Blocks.so?\u003C/h2>\u003Cp>Blocks.so is an open-source set of ready-to-use UI “blocks” for React apps. You browse live previews, copy the code, or pull blocks straight into your project using the shadcn CLI. It’s built with React, Tailwind CSS, and shadcn/ui, and it’s free under the MIT license. It works with all major React frameworks.\u003C/p>\u003Cdiv data-native-video=\"true\" class=\"responsive\">\u003Cvideo autoplay=\"true\" controls=\"true\" loop=\"true\" src=\"https://ik.imagekit.io/landingpagefyi/Tailkits/blockso_VVjy9bMsM.mp4/ik-video.mp4?updatedAt=1760130278865\" width=\"1600\" height=\"900\">\u003C/video>\u003C/div>\u003Ch2>Features ✨\u003C/h2>\u003Cp>\u003Cimg src=\"/blocksso.png\" alt=\"Blocks.so - React UI blocks for Tailwind + shadcn\" title=\"Blocks.so - Teact UI blocks for Tailwind + shadcn\" width=\"1200\" height=\"630\" loading=\"lazy\">\u003C/p>\u003Cul>\u003Cli>\u003Cp>Copy-paste UI blocks with live previews\u003C/p>\u003C/li>\u003Cli>\u003Cp>Works with any React framework (Next.js, Remix, Vite, etc.)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built on React + Tailwind + shadcn/ui for easy theming\u003C/p>\u003C/li>\u003Cli>\u003Cp>Add via shadcn CLI or direct registry URL (remote registry)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Categories like Dialogs, Login/Signup, Sidebar, Stats, Tables, Forms, File Upload, Grid Lists, plus a small AI set\u003C/p>\u003C/li>\u003Cli>\u003Cp>Free forever, MIT-licensed open source\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>AI (starter set)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dialogs\u003C/p>\u003C/li>\u003Cli>\u003Cp>File Upload\u003C/p>\u003C/li>\u003Cli>\u003Cp>Form Layout\u003C/p>\u003C/li>\u003Cli>\u003Cp>Grid List\u003C/p>\u003C/li>\u003Cli>\u003Cp>Login & Signup\u003C/p>\u003C/li>\u003Cli>\u003Cp>Sidebar\u003C/p>\u003C/li>\u003Cli>\u003Cp>Stats\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tables\u003Cbr>(These are the groups currently visible on the site.)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Super fast: browse → copy → ship\u003C/p>\u003C/li>\u003Cli>\u003Cp>Familiar stack (React/Tailwind/shadcn) fits modern projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>CLI integration for pulling blocks by name (e.g., \u003Ccode>@blocks/login-01\u003C/code>)\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT license and free usage for commercial projects\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Catalog is smaller than giant UI kits; still growing\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blocks are code-first; you’ll wire behaviors yourself\u003C/p>\u003C/li>\u003Cli>\u003Cp>Design language leans minimal—may need extra styling for brand fit\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>React\u003C/strong>: drop-in JSX blocks\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Next.js / Remix / Vite / CRA\u003C/strong>: compatible; paste or add via CLI\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS\u003C/strong>: classes included; theme with tokens/utilities\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>shadcn CLI\u003C/strong>: \u003Ccode>npx shadcn@latest add @blocks/<name>\u003C/code> or direct JSON URLs\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Package managers\u003C/strong>: works whether you use npm, pnpm, or bun (it’s just code)\u003C/p>\u003C/li>\u003C/ul>","https://blocks.so/ai",[917,918],{"id":785,"title":786,"slug":787},{"id":789,"title":190,"slug":191},"Blocks.so - React UI Components - Tailwind + shadcn",[921],{"id":26,"title":27,"slug":28},"https://blocks.so/","React UI blocks for Tailwind + shadcn","Clean, copy-paste UI blocks built with React, Tailwind and shadcn. Works with any React framework. Free forever under MIT.",[488,491,493],[785,789],[26],"content:components:2162.json","components/2162.json","components/2162",{"_path":932,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":933,"type":49,"title":934,"slug":935,"published_at":936,"order":392,"created_at":937,"updated_at":938,"faqs":939,"tags":952,"color":957,"cover":958,"images":959,"is_hot":6,"content":960,"is_paid":6,"demo_url":961,"features":962,"seo_title":964,"categories":965,"target_url":968,"description":969,"is_featured":6,"is_free_listing":6,"seo_description":970,"tags_ids":971,"features_ids":972,"categories_ids":973,"_id":974,"_type":19,"_source":20,"_file":975,"_stem":976,"_extension":19},"/components/2161",2161,"Taiga UI","taiga-ui","2025-10-12 22:51:06","2025-10-10 20:50:31","2026-03-02 20:00:02",[940,943,946,949],{"title":941,"content":942},"Does it support older Angular versions?","v4 targets Angular 16+; migration schematics are available for v3→v4",{"title":944,"content":945},"How do I install it quickly?","Use the automatic install from the docs for Angular or Nx; it configures styles and providers",{"title":947,"content":948},"Is theming built-in?","Yes, CSS custom properties and dark mode support are included. ",{"title":950,"content":951},"What makes bundles small?","Modular packages with secondary entry points ensure unused code is tree-shaken away.",[953],{"id":954,"title":955,"slug":956},191,"Angular","angular",{"id":662,"title":663,"slug":663},"/taiga-ui.png",[],"\u003Ch2>What Is the Taiga UI?\u003C/h2>\u003Cp>Taiga UI is an open-source, Angular-first component library focused on speed, flexibility, and small bundles via full treeshaking. It ships 130+ components plus directives, tokens, and utilities.\u003C/p>\u003Cp>\u003Cimg src=\"/taiga-ui.jpg\" alt=\"Taiga UI - Angular Component Library\" title=\"Taiga UI\" width=\"1200\" height=\"628\" loading=\"lazy\">\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Fully treeshakable, modular packages with secondary entry points.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Quick install with guided setup for Angular CLI and Nx.\u003C/p>\u003C/li>\u003Cli>\u003Cp>130+ components, 100+ directives, and rich utilities.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Uses ng-polymorpheus and Angular Web APIs wrappers for modern browser features.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dark theme and CSS custom properties for easy theming.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Active maintenance with frequent releases (v4.57.0).\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Forms (masked inputs via Maskito), validation helpers, date & number inputs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Overlays: dialogs, notifications, tooltips, sheets, dropdowns.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Navigation & layout primitives: tabs, steppers, menus, grids.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Extras: editor module, event plugins, DOMPurify sanitizer pipe.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Fast start with CLI/Nx auto-configuration and clear docs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Small bundles thanks to aggressive treeshaking and OnPush strategy.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Broad, production-ready catalog (130+ components).\u003C/p>\u003C/li>\u003Cli>\u003Cp>Strong ecosystem (Maskito, ng-web-apis, editor, more).\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Angular-only; not intended for React/Vue/Svelte stacks.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Large surface area can feel overwhelming at first. (Docs are comprehensive, but there’s a learning curve.)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Angular CLI / Nx\u003C/strong>: official guides for automatic and manual setup.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Maskito\u003C/strong> for input masking; \u003Cstrong>ng-web-apis\u003C/strong> wrappers for browser APIs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Editor module\u003C/strong> and \u003Cstrong>Figma kit\u003C/strong> for end-to-end design/dev workflow.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Versioning\u003C/strong>: v4 requires Angular 16+; migration schematics are provided.\u003C/p>\u003C/li>\u003C/ul>","https://taiga-ui.dev/layout/card-large",[963],{"id":785,"title":786,"slug":787},"Taiga UI - Angular Component Library",[966,967],{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"https://taiga-ui.dev/","Angular component kit with 130+ building blocks","Taiga UI is a modular, treeshakable Angular kit with 130+ components, quick CLI install, and themed, accessible widgets for building apps faster. ",[954],[785],[506,26],"content:components:2161.json","components/2161.json","components/2161",{"_path":978,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":979,"type":49,"title":980,"slug":981,"published_at":982,"order":308,"created_at":982,"updated_at":983,"faqs":984,"tags":997,"color":1001,"cover":1002,"images":1003,"is_hot":6,"content":1004,"is_paid":6,"demo_url":1005,"features":1006,"seo_title":1010,"categories":1011,"target_url":1005,"description":1013,"is_featured":6,"is_free_listing":6,"seo_description":1014,"tags_ids":1015,"features_ids":1016,"categories_ids":1017,"_id":1018,"_type":19,"_source":20,"_file":1019,"_stem":1020,"_extension":19},"/components/2160",2160,"Mantine UI","mantine-ui","2025-10-10 20:15:55","2026-03-02 20:00:47",[985,988,991,994],{"title":986,"content":987},"Is Mantine UI free for commercial projects?","Yes. MIT license covers commercial use.",{"title":989,"content":990},"Does it support dark mode automatically?","Most components ship with dark/light variants enabled.",{"title":992,"content":993},"How many components are available?","Expect 120+ customizable components plus 70+ hooks via Mantine core.",{"title":995,"content":996},"Can I use it with Next.js and SSR?","Yes, Mantine supports modern frameworks and server-side rendering.",[998,999,1000],{"id":480,"title":481,"slug":482},{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":579,"title":580,"slug":580},"/mantine-ui.png",[],"\u003Ch2>What Is the Mantine UI?\u003C/h2>\u003Cp>Mantine UI is a collection of prebuilt, responsive React components and page sections built on the Mantine library—free, MIT-licensed, and themeable out of the box.\u003C/p>\u003Cp>\u003Cimg src=\"/mantine-ui-2.png\" alt=\"Mantine UI - Stats Section\" title=\"Mantine UI - Numbers Components\" width=\"1331\" height=\"676\" loading=\"lazy\">\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>120+ components and 70+ hooks via Mantine core + extras\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built-in theming with easy color, font, and spacing control\u003C/p>\u003C/li>\u003Cli>\u003Cp>Native light/dark modes across most components\u003C/p>\u003C/li>\u003Cli>\u003Cp>Accessible patterns and strong developer experience\u003C/p>\u003C/li>\u003Cli>\u003Cp>Free and open source (MIT) for personal and commercial use\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Application UI: navbars, headers, footers, inputs, buttons, sliders, tables, stats, cards, carousels, drag-and-drop\u003C/p>\u003C/li>\u003Cli>\u003Cp>Page sections: hero, features, auth, FAQ, contact, error pages, banners\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blog UI: article cards, TOC, comments\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Huge set of ready-to-use sections and widgets\u003C/p>\u003C/li>\u003Cli>\u003Cp>Fast theming; dark/light works with no extra setup\u003C/p>\u003C/li>\u003Cli>\u003Cp>Great docs and examples; strong DX\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT license—safe for commercial use\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Visual style is opinionated; heavy customization may take time\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ecosystem is smaller than MUI/Ant for certain niche components (charts, enterprise tables) (inferred vs. larger ecosystems in roundups).\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>React + Next.js/Remix\u003C/strong> compatible; SSR supported\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Theme provider\u003C/strong> for global styling and dark mode toggles\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Works with common libs\u003C/strong> (forms, data fetching, tables) per community guides and roundups\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>GitHub repo\u003C/strong> for examples and quick copy-paste usage\u003C/p>\u003C/li>\u003C/ul>","https://ui.mantine.dev/",[1007],{"id":1008,"title":1009,"slug":187},207,"Dark mode","Mantine UI Components – 120+ React Blocks & Sections",[1012],{"id":26,"title":27,"slug":28},"120+ responsive UI blocks for React. ","Build React apps faster with 120+ responsive, themed components and sections. Dark mode ready, MIT-licensed, and easy to customize.",[480,488,491],[1008],[26],"content:components:2160.json","components/2160.json","components/2160",{"_path":1022,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1023,"type":49,"title":1024,"slug":1025,"published_at":1026,"order":495,"created_at":1026,"updated_at":1027,"faqs":1028,"tags":1041,"color":1052,"cover":1053,"images":1054,"is_hot":6,"content":1055,"is_paid":6,"demo_url":1056,"features":1057,"seo_title":1058,"categories":1059,"target_url":1062,"description":1063,"is_featured":6,"is_free_listing":6,"seo_description":1064,"tags_ids":1065,"features_ids":1066,"categories_ids":1067,"_id":1068,"_type":19,"_source":20,"_file":1069,"_stem":1070,"_extension":19},"/components/2211",2211,"Ark UI","ark-ui","2026-01-24 13:34:10","2026-03-02 20:02:11",[1029,1032,1035,1038],{"title":1030,"content":1031},"Does Ark UI include default styles?","No. All components are intentionally unstyled.",{"title":1033,"content":1034},"Which frameworks does Ark UI support?","React, Solid, Vue, and Svelte.",{"title":1036,"content":1037},"Do I need to understand state machines to use Ark UI?","No. The state-machine logic is internal and abstracted away.",{"title":1039,"content":1040},"What’s the recommended way to style Ark UI components?","Style individual component parts using your existing CSS or utility framework.",[1042,1046,1047,1051],{"id":1043,"title":1044,"slug":1045},193,"Svelte","svelte",{"id":488,"title":489,"slug":167},{"id":1048,"title":1049,"slug":1050},194,"Vue","vue",{"id":491,"title":249,"slug":250},{"id":579,"title":580,"slug":580},"/ark-ui-2.png",[],"\u003Cp>\u003Cimg src=\"/ark-ui.png\" alt=\"Ark UI Architecture Diagram\" title=\"Ark UI Architecture Diagram\" width=\"775\" height=\"620\" loading=\"lazy\">\u003C/p>\u003Cp>Ark UI is a headless component library that handles behavior and accessibility while leaving styling entirely to your design system. It supports React, Solid, Vue, and Svelte, and includes 45+ components built with predictable state-machine logic.\u003C/p>\u003Cp>\u003Cstrong>Key stats:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Components:\u003C/strong> 45+\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Frameworks:\u003C/strong> React, Solid, Vue, Svelte\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>License:\u003C/strong> MIT\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Definition:\u003C/strong> \u003Cem>Headless components\u003C/em> = logic + accessibility, no default styles\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What Is the Ark UI?\u003C/h2>\u003Cp>Ark UI is a collection of unstyled UI components designed for building consistent design systems across multiple JavaScript frameworks. It takes care of keyboard interactions, ARIA patterns, and edge cases so you can focus on visuals.\u003C/p>\u003Cp>Component behavior is powered by state machines, which keeps interactions predictable and consistent no matter which framework you’re using.\u003C/p>\u003Ch2>What features does Ark UI offer? ✨\u003C/h2>\u003Cp>Ark UI focuses on composability, accessibility, and framework parity. It gives you a solid behavior layer without imposing visual opinions.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Unstyled by default so you control the look\u003C/p>\u003C/li>\u003Cli>\u003Cp>Accessibility-first interaction patterns\u003C/p>\u003C/li>\u003Cli>\u003Cp>State-machine driven behavior\u003C/p>\u003C/li>\u003Cli>\u003Cp>Consistent APIs across React, Solid, Vue, and Svelte\u003C/p>\u003C/li>\u003Cli>\u003Cp>Styling hooks via stable component parts\u003C/p>\u003C/li>\u003Cli>\u003Cp>TypeScript-friendly APIs\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Which components are included in Ark UI? 📒\u003C/h2>\u003Cp>Ark UI ships with over 45 components covering common design system primitives. These components are meant to be assembled into real product interfaces without rebuilding logic from scratch.\u003C/p>\u003Cp>Common examples include:\u003C/p>\u003Cul>\u003Cli>\u003Cp>Dialog\u003C/p>\u003C/li>\u003Cli>\u003Cp>Slider\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tooltip\u003C/p>\u003C/li>\u003Cli>\u003Cp>Combobox\u003C/p>\u003C/li>\u003Cli>\u003Cp>Popover, Accordion, and more\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What are the pros and cons of Ark UI?\u003C/h2>\u003Cp>Ark UI works best when you want full styling control and strong accessibility guarantees. It’s less ideal if you want pre-designed UI out of the box.\u003C/p>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Ideal for custom design systems\u003C/p>\u003C/li>\u003Cli>\u003Cp>Accessibility handled for you\u003C/p>\u003C/li>\u003Cli>\u003Cp>Consistent behavior across frameworks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Predictable interaction logic\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Requires you to build and maintain styles\u003C/p>\u003C/li>\u003Cli>\u003Cp>Learning curve around component composition\u003C/p>\u003C/li>\u003Cli>\u003Cp>Not suitable if you want ready-made visual components\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How do you integrate Ark UI into your app?\u003C/h2>\u003Cp>You install the framework-specific package, compose components, and style them using exposed parts and attributes. Most teams plug Ark UI into an existing styling setup and treat it as the behavior layer of their design system.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Install the package for your framework\u003C/p>\u003C/li>\u003Cli>\u003Cp>Start from official templates if available\u003C/p>\u003C/li>\u003Cli>\u003Cp>Style components using stable part selectors\u003C/p>\u003C/li>\u003Cli>\u003Cp>Share the same component logic across multiple apps\u003C/p>\u003C/li>\u003Cli>\u003Cp>Especially useful for teams supporting multiple frameworks\u003C/p>\u003C/li>\u003C/ul>","https://ark-ui.com/docs/components/accordion",[],"Ark UI | Unstyled Accessible UI for React, Vue, Solid",[1060,1061],{"id":745,"title":746,"slug":747},{"id":26,"title":27,"slug":28},"https://ark-ui.com/","Unstyled components for React, Vue, Solid, Svelte","Build unstyled, accessible UI components powered by state machines. Works across React, Solid, Vue, and Svelte with 45+ primitives.",[1043,488,1048,491],[],[745,26],"content:components:2211.json","components/2211.json","components/2211",{"_path":1072,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1073,"type":49,"title":1074,"slug":1075,"published_at":1076,"order":1077,"created_at":1076,"updated_at":1078,"faqs":1079,"tags":1092,"color":1094,"cover":1095,"images":1096,"is_hot":6,"content":1097,"is_paid":6,"demo_url":1098,"features":1099,"seo_title":1100,"categories":1101,"target_url":1104,"description":1105,"is_featured":6,"is_free_listing":6,"seo_description":1106,"tags_ids":1107,"features_ids":1108,"categories_ids":1109,"_id":1110,"_type":19,"_source":20,"_file":1111,"_stem":1112,"_extension":19},"/components/2213",2213,"Melt UI","melt-ui","2026-01-24 13:46:06",25,"2026-03-02 20:02:34",[1080,1083,1086,1089],{"title":1081,"content":1082},"Is Melt UI styled by default?","No. It provides behavior and accessibility only, leaving all styling to you.",{"title":1084,"content":1085},"Does Melt UI support complex menus?","Yes. Menu builders include features like submenus and typeahead navigation.",{"title":1087,"content":1088},"How are toasts handled?","Toasts are global and usually rendered through a single top-level component.",{"title":1090,"content":1091},"Are date pickers included?","Yes. Melt UI includes calendars, date fields, and composed date picker builders.",[1093],{"id":1043,"title":1044,"slug":1045},{"id":579,"title":580,"slug":580},"/melt-ui-3.png",[],"\u003Cp>\u003Cimg src=\"/melt-ui.png\" alt=\"Melt UI - Headless Accessible Components for Svelte\" title=\"Melt UI - Components for Svelte\" width=\"1635\" height=\"1123\" loading=\"lazy\">Melt UI is an open-source, headless set of Svelte builders that handles accessibility and behavior, while you fully control markup and styling. It’s a strong pick if you want Radix-style primitives for Svelte without being locked into a design system.\u003C/p>\u003Cp>\u003Cstrong>Key stats and definitions\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>License:\u003C/strong> MIT\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>What “headless” means:\u003C/strong> logic and accessibility included, no default styling\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Accessibility baseline:\u003C/strong> follows WAI-ARIA design patterns with focus management and keyboard navigation\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Quick setup:\u003C/strong> optional CLI initializer available\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What Is the Melt UI?\u003C/h2>\u003Cp>Melt UI is a collection of accessible, unstyled component builders for Svelte apps. You use its builders to get the correct keyboard interactions, roles, and focus handling, then layer your own styles on top.\u003C/p>\u003Cp>It’s especially useful when you want a consistent accessibility foundation across menus, dialogs, selects, and date inputs without adopting a full UI framework.\u003C/p>\u003Ch2>What features does Melt UI offer? ✨\u003C/h2>\u003Cp>Melt UI focuses on solving complex interaction and accessibility problems once, while staying visually unopinionated.\u003C/p>\u003Cp>\u003Cstrong>Features\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Headless, unstyled builders\u003C/p>\u003C/li>\u003Cli>\u003Cp>Strong keyboard navigation and focus management\u003C/p>\u003C/li>\u003Cli>\u003Cp>Designed for Svelte and SvelteKit with TypeScript support\u003C/p>\u003C/li>\u003Cli>\u003Cp>Advanced menu behavior including submenus and typeahead\u003C/p>\u003C/li>\u003Cli>\u003Cp>Date utilities like calendars, date fields, and pickers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Optional preprocessor to reduce repetitive markup\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What components are included in Melt UI? 📒\u003C/h2>\u003Cp>Melt UI includes a wide range of builders covering forms, navigation, overlays, and complex widgets.\u003C/p>\u003Cp>\u003Cstrong>Included builders\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Overlays:\u003C/strong> Dialog, Popover, Tooltip, Link Preview\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Menus:\u003C/strong> Dropdown Menu, Menubar, Context Menu\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Form controls:\u003C/strong> Checkbox, Radio Group, Switch, Select, Combobox, Tags Input\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Navigation and layout:\u003C/strong> Tabs, Scroll Area, Separator, Pagination, Tree View, Table of Contents\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Date and time:\u003C/strong> Calendar, Range Calendar, Date Field, Date Range Field, Date Picker, Date Range Picker\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Feedback:\u003C/strong> Progress, Toast\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Utilities:\u003C/strong> Toggle, Toggle Group, Toolbar, Collapsible, PIN Input\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What are the pros and cons of Melt UI?\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Full control over styling with no design lock-in\u003C/p>\u003C/li>\u003Cli>\u003Cp>Strong accessibility defaults out of the box\u003C/p>\u003C/li>\u003Cli>\u003Cp>Broad coverage of both simple and advanced UI patterns\u003C/p>\u003C/li>\u003Cli>\u003Cp>Open-source with a permissive license\u003C/p>\u003C/li>\u003Cli>\u003Cp>Developer experience tools to reduce boilerplate\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Requires extra work to style and wrap components\u003C/p>\u003C/li>\u003Cli>\u003Cp>More complex builders involve multiple composed parts\u003C/p>\u003C/li>\u003Cli>\u003Cp>Toast handling is global, requiring a small app-level setup\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How do you integrate Melt UI with your stack?\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Install the library and start with individual builders\u003C/p>\u003C/li>\u003Cli>\u003Cp>Works well with SvelteKit and TypeScript projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>Compatible with any styling solution, including Tailwind or plain CSS\u003C/p>\u003C/li>\u003Cli>\u003Cp>Optional preprocessor can simplify markup\u003C/p>\u003C/li>\u003Cli>\u003Cp>Toasts are typically rendered once at the app root\u003C/p>\u003C/li>\u003C/ul>","https://melt-ui.com/docs/builders/accordion",[],"Melt UI for Svelte | Unstyled, Accessible UI Builders",[1102,1103],{"id":745,"title":746,"slug":747},{"id":26,"title":27,"slug":28},"https://melt-ui.com/","Unstyled Svelte components with WAI-ARIA support","Build accessible Svelte components fast with Melt UI headless builders. Unstyled primitives, TypeScript support, WAI-ARIA patterns, and CLI setup.",[1043],[],[745,26],"content:components:2213.json","components/2213.json","components/2213",{"_path":1114,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1115,"type":49,"title":1116,"slug":1117,"published_at":1118,"order":1119,"created_at":1118,"updated_at":1120,"faqs":1121,"tags":1134,"color":1138,"cover":1141,"images":1142,"is_hot":6,"content":1145,"is_paid":6,"demo_url":1146,"features":1147,"seo_title":1157,"categories":1158,"target_url":1165,"description":1166,"is_featured":6,"is_free_listing":6,"seo_description":1167,"tags_ids":1168,"features_ids":1169,"categories_ids":1170,"_id":1171,"_type":19,"_source":20,"_file":1172,"_stem":1173,"_extension":19},"/components/320",320,"Preline UI","preline-ui","2023-03-09 20:56:48",26,"2026-03-02 20:02:42",[1122,1125,1128,1131],{"title":1123,"content":1124},"Can I use Preline UI in commercial projects?","The MIT license permits free commercial use and modification. ",{"title":1126,"content":1127},"Does Preline Pro include the free components?","Absolutely. Pro bundles everything in Preline UI plus additional templates and pages. ",{"title":1129,"content":1130},"What frameworks are officially supported?","HTML, React, and Vue are first-class; community starters exist for Next.js, Nuxt, Svelte, Remix, and more. ",{"title":1132,"content":1133},"Is Preline heavier than Tailwind UI at runtime?","Preline’s HTML can be more verbose, which some devs say adds bloat, but tree-shaking with Tailwind’s JIT keeps CSS lean. ",[1135,1136,1137],{"id":1048,"title":1049,"slug":1050},{"id":491,"title":249,"slug":250},{"id":865,"title":170,"slug":171},{"id":1139,"title":1140,"slug":1140},30,"blue","/preline-ui-3.png",[1143],{"image":1144},"/preline-ui-4.png","\u003Cblockquote>\u003Cp>Preline has grown into a two-track frontend ecosystem: the free MIT-licensed \u003Cstrong>Preline UI\u003C/strong> library and the commercial \u003Cstrong>Preline Pro\u003C/strong> template bundle.\u003C/p>\u003C/blockquote>\u003Cp>\u003Cimg src=\"/preline-ui.png\" alt=\"Preline UI - Tailwind Hero Section Example\" title=\"Preline UI - Tailwind Hero Section Example\" width=\"1100\" height=\"820\" loading=\"lazy\">\u003C/p>\u003Cp>The open-source core ships hundreds of Tailwind-ready components, while Pro layers on full-site demos, premium plugins, and priority updates. Below is a developer-friendly deep-dive that spells out what each tier includes, how they differ, and when to reach for one over the other.\u003C/p>\u003Ch2>What Is Preline UI?\u003C/h2>\u003Cp>Preline UI is an open-source collection of Tailwind CSS components, utilities, and example pages released under the MIT license. It works in plain HTML as well as React and Vue projects.\u003C/p>\u003Cp>\u003Cimg src=\"/preline-ui-2.png\" alt=\"Preline UI - Card Components\" title=\"Preline UI - Card Components\" width=\"1100\" height=\"741\" loading=\"lazy\">\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>300 + components & 160 + starter pages\u003C/strong> covering buttons, navbars, heroes, dashboards, and more\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Framework-agnostic\u003C/strong>: drop-in classes for HTML, React, Vue, and even Svelte or Remix\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Plugins\u003C/strong> such as Advanced Datepicker, Datatables, and File-Upload for richer UX\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma design kit\u003C/strong> to keep dev/design teams in sync\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built on \u003Cstrong>Tailwind CSS v4\u003C/strong> as of the v3.x milestone, giving access to CSS nesting, improved performance, and new utility groups\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What's New in 2025: Preline UI v3.x & Preline Pro v1.8\u003C/h2>\u003Cblockquote>\u003Cp>\u003Cstrong>TL;DR\u003C/strong>: Preline jumped to Tailwind CSS v4, shipped over 50 new components, new plugins like Advanced Datepicker & Scroll Nav, and Preline Pro added four fresh full‑site demos and 35 extra pages.\u003C/p>\u003C/blockquote>\u003Ch3>🚀 Preline UI v3.1.0 (June 4, 2025)\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Fresh \u003Cstrong>Coffee Shop\u003C/strong> template and revamped \u003Cstrong>Creative Agency\u003C/strong> demo.\u003C/p>\u003C/li>\u003Cli>\u003Cp>New example pages: \u003Cstrong>Hero Sections\u003C/strong>, \u003Cstrong>Testimonials\u003C/strong>, \u003Cstrong>E‑commerce Product Grid\u003C/strong>, and more.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Stepper plugin\u003C/strong> gains \u003Ccode>beforeFinish\u003C/code> event & \u003Ccode>goToFinish()\u003C/code> helper.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Carousel\u003C/strong> and \u003Cstrong>Dropdown\u003C/strong> receive smarter positioning, while tooltips now auto‑recalculate on overflow.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Added framework guides for \u003Cstrong>React + Vite\u003C/strong>, \u003Cstrong>Adonis\u003C/strong>, and \u003Cstrong>Hugo\u003C/strong>.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>🧭 Preline UI v3.0.0 (March 4, 2025)\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Upgraded to Tailwind CSS v4\u003C/strong> — faster build times & new \u003Ccode>size-*\u003C/code> utilities.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Debuted \u003Cstrong>Advanced Datepicker\u003C/strong> & \u003Cstrong>Scroll Nav\u003C/strong> plugins.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Introduced \u003Cstrong>TimePicker\u003C/strong>, mega‑menu refinements, hover‑triggered tabs, and mobile UX tweaks.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Switched from Popper.js to \u003Cstrong>Floating UI\u003C/strong> under the hood for lighter bundles.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>💼 Preline Pro v1.8.0 (June 4, 2025)\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>4 brand‑new demos\u003C/strong> (Agency, Smart Home, Personal, Coffee Shop) plus \u003Cstrong>35 pages\u003C/strong> ranging from visitors analytics to CRM dashboards.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Rich new example sets: navbars, data cards, interactive stats, galleries, kanban boards, and more.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>🤓 Why it matters\u003C/h3>\u003Cp>These releases push Preline into the Tailwind v4 era, add production‑ready patterns (datatables, file‑upload, chat layouts), and smooth out long‑standing issues with dropdowns, tooltips, and stepper flows.\u003C/p>\u003Ch3>⚡️ Upgrade tips\u003C/h3>\u003Col start=\"1\">\u003Cli>\u003Cp>\u003Cstrong>Pin Tailwind v4.0.8+\u003C/strong> and follow the official upgrade guide before bumping Preline.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Replace any custom Popper.js overrides with \u003Cstrong>Floating UI\u003C/strong> equivalents.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Audit your stepper hooks—\u003Ccode>beforeFinish\u003C/code> fires right before completion.\u003C/p>\u003C/li>\u003Cli>\u003Cp>For Pro, re‑generate route manifests; many new demo pages live under \u003Ccode>/pro/…\u003C/code> paths.\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Pros and Cons (Side-by-Side)\u003C/h2>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003C/p>\u003C/th>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Preline UI\u003C/p>\u003C/th>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Preline Pro\u003C/p>\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003Cstrong>Cost\u003C/strong>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Free (MIT)\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>$459 seat pack\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003Cstrong>Components\u003C/strong>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>300 +\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>300 +\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003Cstrong>Pages\u003C/strong>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>160 +\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>740 +\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003Cstrong>Templates\u003C/strong>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>3 starter demos\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>18 premium demos\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003Cstrong>Plugins\u003C/strong>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Datepicker, Datatables, File Upload\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>All UI plugins + Calendar, Chat widgets\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003Cstrong>License\u003C/strong>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>MIT\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Commercial\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\" data-colwidth=\"194\">\u003Cp>\u003Cstrong>Support\u003C/strong>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>GitHub issues\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Email priority\u003C/p>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Chr>\u003Ch2>Open Source Components\u003C/h2>\u003Cp>Preline UI (free-version) provides essential landing page components to build multipurpose websites.\u003C/p>\u003Cp>\u003Cimg src=\"/preline-components.png\" alt=\"Free Preline UI Landing Page Components\">\u003C/p>\u003Ch2>Pro Components\u003C/h2>\u003Cp>Preline UI (paid version) provides essential landing page components to build multipurpose websites.\u003C/p>\u003Cp>\u003Cimg src=\"/preline-components-pro.png\" alt=\"Premium Preline UI Components\">\u003C/p>\u003Cp>\u003Cimg src=\"/preline-components-pro-2-2.png\" alt=\"Pro Preline UI Components\">\u003C/p>\u003Ch2>Preline UI vs Preline Pro — Which One Should You Pick?\u003C/h2>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Scenario\u003C/p>\u003C/th>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Best Fit\u003C/p>\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Hackathon, MVP, personal site\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Cstrong>Preline UI\u003C/strong> — zero cost, huge component set\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>SaaS landing page needing hero, pricing, blog, sign-in funnel\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Cstrong>Preline Pro\u003C/strong> — marketing template covers 90 % of work\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Enterprise dashboard with complex auth & billing\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Cstrong>Pro\u003C/strong> — full dashboard, profile, billing flows baked in\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Design-heavy brand with custom tokens\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Cstrong>UI\u003C/strong> — lighter starting point, no opinionated theming\u003C/p>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Comes with free Figma Design System as well.\u003C/p>\u003C/li>\u003Cli>\u003Cp>You might not get \u003Cstrong>Data Maps\u003C/strong> and \u003Cstrong>AI Prompt\u003C/strong> components anywhere else.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Regular updates\u003C/p>\u003C/li>\u003Cli>\u003Cp>Well documented\u003C/p>\u003C/li>\u003Cli>\u003Cp>740+ total components and elements available\u003C/p>\u003C/li>\u003Cli>\u003Cp>Speeds up greenfield projects with ready-made multi-page flows.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Premium Figma assets align pixel-perfectly with code.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Commercial license removes attribution worries.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Framework integration guides available\u003C/p>\u003C/li>\u003Cli>\u003Cp>10+ templates available in Preline UI Pro\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Up-front price may be steep for solo devs or hobby projects.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Locked to 15-dev seats; larger teams must negotiate enterprise pricing\u003C/p>\u003C/li>\u003Cli>\u003Cp>Source is minified; deep customisation sometimes easier in the open-source core.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Integration\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Download ZIP\u003C/strong> from your Pro dashboard or install via private npm registry.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Import styles just like Preline UI; Tailwind v4 config is included.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Copy any template folder into your project and swap dummy data.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Integration Tips\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Add Preline last in your Tailwind config’s \u003Ccode>content\u003C/code> array to avoid purge issues.\u003C/p>\u003C/li>\u003Cli>\u003Cp>With React + Vite, call \u003Ccode>import 'preline/dist/preline';\u003C/code> inside \u003Ccode>useEffect(() => { initPreline(); }, [])\u003C/code> for proper JS init.\u003C/p>\u003C/li>\u003Cli>\u003Cp>For Vue, wrap any plugin calls in \u003Ccode>onMounted()\u003C/code>.\u003C/p>\u003C/li>\u003C/ul>","https://preline.co/pro/templates.html",[1148,1149,1150,1151,1155,1156],{"id":552,"title":553,"slug":554},{"id":1008,"title":1009,"slug":187},{"id":827,"title":828,"slug":829},{"id":1152,"title":1153,"slug":1154},203,"Figma design file","figma-design-file",{"id":785,"title":786,"slug":787},{"id":789,"title":190,"slug":191},"Preline UI & Preline Pro: Tailwind Components",[1159,1163,1164],{"id":1160,"title":1161,"slug":1162},153,"Admin & Dashboard","admin-dashboard",{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"https://preline.co/","Preline: 740+ Tailwind pages & components ","Discover Preline Pro’s 740+ Tailwind templates plus the free Preline UI kit, premium plugins and Figma files to launch polished web apps fast. ",[1048,491,865],[552,1008,827,1152,785,789],[1160,506,26],"content:components:320.json","components/320.json","components/320",{"_path":1175,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1176,"type":49,"title":1177,"slug":1178,"published_at":1179,"order":1180,"created_at":1179,"updated_at":1181,"faqs":1182,"tags":1183,"color":1189,"cover":1190,"images":1191,"is_hot":6,"content":1192,"is_paid":48,"demo_url":1193,"features":1194,"seo_title":1201,"categories":1202,"target_url":1205,"description":1206,"is_featured":6,"is_free_listing":6,"seo_description":1207,"tags_ids":1208,"features_ids":1209,"categories_ids":1210,"_id":1211,"_type":19,"_source":20,"_file":1212,"_stem":1213,"_extension":19},"/components/1614",1614,"Oxbow UI","oxbow-ui","2024-08-31 10:15:20",27,"2026-03-02 20:03:17",[],[1184,1188],{"id":1185,"title":1186,"slug":1187},200,"Alpine.js","alpinejs",{"id":865,"title":170,"slug":171},{"id":1139,"title":1140,"slug":1140},"/oxbow-ui.png",[],"\u003Cp>Oxbow UI is a comprehensive library of pre-designed components and layouts built with Tailwind CSS and Alpine JS, designed to help developers create modern, responsive websites more efficiently.\u003C/p>\u003Cp>\u003Cimg src=\"/oxbow-ui-2.png\" alt=\"Oxbow UI - Tailwind Hero Section Example\" title=\"Oxbow UI - Tailwind Hero Section Example\" width=\"909\" height=\"597\" loading=\"lazy\">\u003C/p>\u003Ch2>\u003Cstrong>Features ✨\u003C/strong>\u003C/h2>\u003Cp>A versatile collection of UI components.\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Marketing Sections:\u003C/strong> Includes hero, feature, pricing, and more.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Application UI:\u003C/strong> Forms, tables, and modals for responsive apps.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>E-commerce:\u003C/strong> (Coming soon) Checkout forms, carts, product views.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Lifetime Access:\u003C/strong> One-time purchase with unlimited project usage.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Lifetime Support:\u003C/strong> Continuous updates and support.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Customizable:\u003C/strong> Easily tailored to fit project needs.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>\u003Cstrong>Pros and Cons\u003C/strong>\u003C/h2>\u003Cp>\u003Cstrong>Pros ✅\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>High-quality, customizable components.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Lifetime access with no recurring fees.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Covers a broad range of UI needs.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Cons 🏗️\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>E-commerce components are not yet available.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Limited to Tailwind CSS and Alpine JS.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/oxbow-ui-3.png\" alt=\"Oxbow UI - Integration\" title=\"Oxbow UI - Integration\" width=\"1200\" height=\"517\" loading=\"lazy\">\u003C/p>","https://oxbowui.com/playground/marketing/bento-grids/?atp=tailkits",[1195,1196,1200],{"id":827,"title":828,"slug":829},{"id":1197,"title":1198,"slug":1199},210,"JavaScript Plugin","javascript-plugin",{"id":785,"title":786,"slug":787},"Oxbow UI - 220+ Tailwind CSS & Alpine JS Components",[1203,1204],{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"https://oxbowui.com?atp=tailkits","Open source Tailwind CSS & Alpine.js components","A collection of beautifully designed Tailwind CSS and Alpine JS components and layouts for web development.",[1185,865],[827,1197,785],[506,26],"content:components:1614.json","components/1614.json","components/1614",{"_path":1215,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1216,"type":49,"title":1217,"slug":1218,"published_at":1219,"order":1220,"created_at":1219,"updated_at":1221,"faqs":1222,"tags":1223,"color":1226,"cover":1227,"images":1228,"is_hot":6,"content":1231,"is_paid":6,"demo_url":1232,"features":1233,"seo_title":1236,"categories":1237,"target_url":1240,"description":1241,"is_featured":6,"is_free_listing":6,"seo_description":1242,"tags_ids":1243,"features_ids":1244,"categories_ids":1245,"_id":1246,"_type":19,"_source":20,"_file":1247,"_stem":1248,"_extension":19},"/components/1652",1652,"coss ui","coss-ui","2024-11-18 21:16:33",28,"2026-03-02 20:04:05",[],[1224,1225],{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":662,"title":663,"slug":663},"/origin-ui.png",[1229],{"image":1230},"/coss-ui.png","\u003Cblockquote>\u003Ch2>The component library once known as \u003Cstrong>Origin UI\u003C/strong> has now been re-branded as \u003Cstrong>coss ui\u003C/strong>, available at \u003Ca href=\"https://coss.com/ui/\" target=\"_blank\" data-as-button=\"false\">coss.com/ui/\u003C/a>\u003C/h2>\u003C/blockquote>\u003Cp>coss ui is a modern React + Tailwind CSS component system built on top of the Base UI primitives. It continues the copy-&-paste ethos of the original library, but with a stronger accessibility foundation, broader component coverage, and ongoing active development.\u003C/p>\u003Cp>\u003Cimg src=\"/origin-ui-2.png\" alt=\"Origin UI - Checkbox & Select\" title=\"Origin UI - Checkbox & Select\" width=\"800\" height=\"405\">\u003C/p>\u003Ch2>\u003Cstrong>What’s new (vs Origin UI)\u003C/strong>\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Built on Base UI primitives rather than Radix/shadcn (Origin UI) to improve accessibility and composability.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Styled with Tailwind CSS, and designed for full code ownership — you copy the source code into your project, giving you maximal control.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Offers three abstraction layers: Primitives (unstyled accessible building blocks), Particles (pre-assembled patterns), and Atoms (API-connected smart components).\u003C/p>\u003C/li>\u003Cli>\u003Cp>Maintains the original library’s “free & open source” philosophy, but under the new umbrella of the company behind it.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Components\u003C/h2>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"3\" style=\"grid-template-columns: repeat(3, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/origin-ui-3.png\" alt=\"Origin UI - Buttons\" title=\"Origin UI - Buttons\" width=\"767\" height=\"524\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/origin-ui-4.png\" alt=\"Origin UI - Buttons\" title=\"Origin UI - Buttons\" width=\"781\" height=\"577\">\u003C/p>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cp>\u003Cimg src=\"/origin-ui-5.png\" alt=\"Origin UI - Radio Switch\" title=\"Origin UI - Radio Switch\" width=\"777\" height=\"524\">\u003C/p>\u003C/div>\u003C/div>\u003Cp>coss ui (ex Origin UI) provides a range of UI components:\u003C/p>\u003Cul>\u003Cli>\u003Cp>Input fields\u003C/p>\u003C/li>\u003Cli>\u003Cp>Buttons\u003C/p>\u003C/li>\u003Cli>\u003Cp>Checkboxes, radios, and switches\u003C/p>\u003C/li>\u003Cli>\u003Cp>Select menus\u003C/p>\u003C/li>\u003Cli>\u003Cp>Slider \u003Cem>\u003Csmall>(coming soon ✨)\u003C/small>\u003C/em>\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Features\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Built on top of Base UI primitives and styled with Tailwind CSS for full control.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Three-layer architecture: Primitives (unstyled accessible blocks) → Particles (pre-built patterns) → Atoms (API-connected components)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Copy-&-paste ownership model: you drop full source files into your project rather than using opaque packages.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Wide component coverage: includes buttons, cards, inputs, dialogs, tables, etc.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Open-source, developer-friendly approach focused on accessibility and modern UI stacks.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros\u003C/h2>\u003Cul>\u003Cli>\u003Cp>✅ Full code ownership and customization possible, ideal for teams wanting to tweak deeply.\u003C/p>\u003C/li>\u003Cli>\u003Cp>✅ Built with modern technologies (React + Tailwind + Base UI), giving a robust foundation.\u003C/p>\u003C/li>\u003Cli>\u003Cp>✅ Strong accessibility and composability thanks to Base UI beneath the surface.\u003C/p>\u003C/li>\u003Cli>\u003Cp>✅ Good for new projects or migrating from simpler kits (and for developers who prefer copy-paste rather than black-box libs).\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Cons\u003C/h2>\u003Cul>\u003Cli>\u003Cp>⚠️ Still relatively new (in early phases) — may undergo breaking changes as it matures.\u003C/p>\u003C/li>\u003Cli>\u003Cp>⚠️ Because you copy the source, managing updates and custom modifications is more your responsibility vs a packaged library.\u003C/p>\u003C/li>\u003Cli>\u003Cp>⚠️ If you’re coming from an older version of Origin UI (Radix/shadcn style), there may be migration effort.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pricing\u003C/h2>\u003Cp>Origin UI is completely free to use, offering open-source components without any associated costs.\u003C/p>\u003Ch2>Integrations\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Tailwind CSS\u003C/p>\u003C/li>\u003Cli>\u003Cp>Next.js\u003C/p>\u003C/li>\u003Cli>\u003Cp>React\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>\u003Cstrong>Use Cases\u003C/strong>\u003C/h2>\u003Cul>\u003Cli>\u003Cp>New projects built with React + Tailwind that need a modern, accessible UI kit\u003C/p>\u003C/li>\u003Cli>\u003Cp>Teams migrating from libraries like shadcn/ui or Radix who want more control over styling and code\u003C/p>\u003C/li>\u003Cli>\u003Cp>Projects where you want full ownership of UI component source code and behaviour\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>\u003Cstrong>Summary\u003C/strong>\u003C/h2>\u003Cp>If you’re looking for a modern, accessible, Tailwind-style component library with full code ownership, coss ui is a strong option\u003C/p>","https://coss.com/ui/docs/components/card",[1234,1235],{"id":1008,"title":1009,"slug":187},{"id":785,"title":786,"slug":787},"coss ui (formerly Origin UI) – React + Tailwind CSS Component Library",[1238,1239],{"id":1160,"title":1161,"slug":1162},{"id":26,"title":27,"slug":28},"https://coss.com/ui","Open-source Tailwind and Next.js components","coss ui -formerly Origin UI- an open-source React + Tailwind CSS component library built on Base UI. Copy the source, customize freely, build faster.",[488,491],[1008,785],[1160,26],"content:components:1652.json","components/1652.json","components/1652",{"_path":1250,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1251,"type":49,"title":1252,"slug":1253,"published_at":1254,"order":1255,"created_at":1254,"updated_at":1256,"faqs":1257,"tags":1270,"color":1273,"cover":1274,"images":1275,"is_hot":6,"content":1276,"is_paid":6,"demo_url":1277,"features":1278,"seo_title":1280,"categories":1281,"target_url":1277,"description":1284,"is_featured":6,"is_free_listing":6,"seo_description":1285,"tags_ids":1286,"features_ids":1287,"categories_ids":1288,"_id":1289,"_type":19,"_source":20,"_file":1290,"_stem":1291,"_extension":19},"/components/2158",2158,"shadcn components dev","shadcn-components-dev","2025-10-07 11:14:33",32,"2026-03-02 20:47:29",[1258,1261,1264,1267],{"title":1259,"content":1260},"Is this an official shadcn/ui project?","No. it's an independent components site built for the shadcn/ui ecosystem.",{"title":1262,"content":1263},"Do I need Tailwind installed first?","Yes. These components are designed for Tailwind + shadcn/ui projects.",{"title":1265,"content":1266},"Can I use these with TypeScript?","Absolutely, the patterns align well with TS React setups.",{"title":1268,"content":1269},"Will it replace a full component library package?","It’s code-first: you copy and own it. Great for control, less for plug-and-play updates",[1271,1272],{"id":491,"title":249,"slug":250},{"id":493,"title":158,"slug":159},{"id":579,"title":580,"slug":580},"/shadcn-components-2.png",[],"\u003Ch2>What Is the Shadcn Components?\u003C/h2>\u003Cp>Shadcn Components is a curated set of copy-paste UI parts built for \u003Cstrong>shadcn/ui\u003C/strong>, \u003Cstrong>Tailwind CSS\u003C/strong>, and \u003Cstrong>React\u003C/strong>. It focuses on practical, real-world blocks (not AI-generated) so you can drop them in and ship fast.\u003C/p>\u003Cdiv data-native-video=\"true\" class=\"responsive\">\u003Cvideo autoplay=\"true\" loop=\"true\" src=\"https://ik.imagekit.io/landingpagefyi/Tailkits/CleanShot%202025-10-07%20at%2013.22.34_Qm2d6Ky_K.mp4/ik-video.mp4?updatedAt=1759836209287\" width=\"1600\" height=\"900\">\u003C/video>\u003C/div>\u003Ch2>Features ✨\u003C/h2>\u003Cp>\u003Cimg src=\"/shadcn-components.png\" alt=\"Radio Group - A set of checkable buttons\" title=\"Radio Group Components\" width=\"1200\" height=\"772\" loading=\"lazy\">\u003C/p>\u003Cul>\u003Cli>\u003Cp>100+ battle-tested components & sections (cards, tables, heroes, nav, forms).\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built for shadcn/ui + Tailwind CSS with Radix under the hood.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Clean, editable React + TypeScript patterns that match shadcn/ui style.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Consistent spacing, states, and accessibility cues you expect from shadcn/ui\u003C/p>\u003C/li>\u003Cli>\u003Cp>“Copy the code” workflow—no lock-in, just paste and customize.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Essentials: Button, Input, Select, Dialog, Dropdown, Pagination.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Data display: Cards, Tables (incl. TanStack variant), Badges, Avatars.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Layout blocks: Hero sections, Team sections, pricing, footers.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Utility patterns: Command palette, progress, breadcrumbs, toasts.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Fits the shadcn/ui philosophy: copy, own, and evolve your code.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cuts page-build time with ready sections and examples.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Works smoothly with Tailwind + React setups out of the box.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Good range from tiny atoms to full hero/section blocks.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>You still maintain the code—no packaged updates like classic UI kits.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Depth of patterns varies; complex app flows may need custom work.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Style alignment assumes Tailwind/shadcn stack (less ideal for non-Tailwind projects).\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Stack:\u003C/strong> React + Tailwind CSS + shadcn/ui (Radix primitives)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Import style:\u003C/strong> Copy the component code, adjust variants, plug into your design tokens.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Data layer:\u003C/strong> Map props to your fetch/state; TanStack Table example ready for tables.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Routing:\u003C/strong> Works with Next.js/React Router; paste into app or pages.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Theming:\u003C/strong> Extend Tailwind config + shadcn tokens for brand colors/spacing.\u003C/p>\u003C/li>\u003C/ul>","https://shadcncomponents.dev/",[1279],{"id":789,"title":190,"slug":191},"Shadcn Components | Ready-to-use UI for Tailwind & React ",[1282,1283],{"id":1160,"title":1161,"slug":1162},{"id":26,"title":27,"slug":28},"100+ shadcn/ui components for Tailwind & React.","Copy-paste 100+ polished UI components made for shadcn/ui, Tailwind, and React—clean code, real use cases, and easy drop-in setup. ",[491,493],[789],[1160,26],"content:components:2158.json","components/2158.json","components/2158",{"_path":1293,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1294,"type":49,"title":1295,"slug":1296,"published_at":1297,"order":253,"created_at":1297,"updated_at":1298,"faqs":1299,"tags":1300,"color":1304,"cover":1305,"images":1306,"is_hot":6,"content":1307,"is_paid":6,"demo_url":1308,"features":1309,"seo_title":1311,"categories":1312,"target_url":1315,"description":1316,"is_featured":6,"is_free_listing":6,"seo_description":1317,"tags_ids":1318,"features_ids":1319,"categories_ids":1320,"_id":1321,"_type":19,"_source":20,"_file":1322,"_stem":1323,"_extension":19},"/components/1837",1837,"PaceKit","pacekit","2025-06-10 10:43:51","2026-03-02 20:44:45",[],[1301,1302,1303],{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":493,"title":158,"slug":159},{"id":662,"title":663,"slug":663},"/pacekit.png",[],"\u003Cp>PaceKit UI is a collection of practical, production-ready UI blocks and app templates built with shadcn/ui, Tailwind CSS, and GSAP. It's designed for developers who want to ship real apps and dashboards fast, without reinventing common layout patterns from scratch.\u003C/p>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Features ✨\u003C/h2>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>shadcn/ui compatible\u003C/strong> - blocks follow shadcn/ui conventions so they slot into your project with zero friction\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Tailwind CSS powered\u003C/strong> - utility-first styling means every block is fully customizable without fighting a separate CSS layer\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>GSAP animations included\u003C/strong> - smooth, production-grade transitions built in, no manual animation setup required\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Dashboard-first design\u003C/strong> - blocks are purpose-built for data-heavy screens, admin panels, and app interfaces\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Production-ready structure\u003C/strong> - solid patterns that hold up in live apps, not just side projects\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Drop-in integration\u003C/strong> - designed for fast setup, minimal configuration, and immediate use in real projects\u003C/p>\u003C/li>\u003C/ul>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Included Components 📒\u003C/h2>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">PaceKit UI ships content across two main areas:\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>App Templates\u003C/strong> - Full app layouts including dashboard screens ready for data-heavy use cases. These are complete, structured starting points built to handle real product needs.\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>UI Blocks\u003C/strong> - Modular sections covering common app patterns. Blocks are production-tested, responsive, and built to compose nicely within existing codebases.\u003C/p>\u003Cp class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\u003Cstrong>GSAP Animations\u003C/strong> - A dedicated set of animated elements powered by GreenSock, covering scroll-triggered reveals, transitions, and interaction feedback built specifically for React and Next.js.\u003C/p>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Pros and Cons\u003C/h2>\u003Ch3 class=\"text-text-100 mt-2 -mb-1 text-base font-bold\">Pros ✅\u003C/h3>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Built on shadcn/ui so it speaks the same language as your existing stack\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Dashboard and admin layouts are first-class citizens, not afterthoughts\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>GSAP integration means you get real animation quality without doing the wiring yourself\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Tailwind CSS utilities keep customization fast and predictable\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Quick setup means you can drop a block in and be shipping the same day\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Made by an active solo developer with a clear product direction and roadmap\u003C/p>\u003C/li>\u003C/ul>\u003Ch3 class=\"text-text-100 mt-2 -mb-1 text-base font-bold\">Cons ⚠️\u003C/h3>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Library is still growing - not as large as established players like ShadcnBlocks or ShadcnStudio\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Best suited for React and Next.js - not a fit for Vue, Angular, or non-Tailwind stacks\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>Limited public documentation at early stage, which adds a small onboarding curve\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>GSAP dependency adds weight compared to lighter motion libraries if you only need basic transitions\u003C/p>\u003C/li>\u003C/ul>\u003Ch2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Integration\u003C/h2>\u003Cul class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Framework\u003C/strong> - Works with React and Next.js projects using the App Router or Pages Router\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Styling\u003C/strong> - Requires Tailwind CSS; blocks inherit your existing Tailwind config and custom tokens\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Component system\u003C/strong> - Built on top of shadcn/ui, so you can extend or override any block using your local shadcn setup\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Animations\u003C/strong> - GSAP is required for animated blocks; the library provides ready-to-use \u003Ccode>useGSAP()\u003C/code> powered components\u003C/p>\u003C/li>\u003Cli class=\"whitespace-normal break-words pl-2\">\u003Cp>\u003Cstrong>Installation\u003C/strong> - Blocks are designed for copy-paste use directly into your codebase, keeping full code ownership\u003C/p>\u003C/li>\u003C/ul>","https://ui.pacekit.dev/blocks/meters",[1310],{"id":785,"title":786,"slug":787},"PaceKit UI - shadcn Blocks for Apps and Dashboards",[1313,1314],{"id":26,"title":27,"slug":28},{"id":506,"title":507,"slug":508},"https://ui.pacekit.dev/","UI blocks for dashboards, built with shadcn/ui","PaceKit UI is a library of production-ready UI blocks built with shadcn/ui and Tailwind CSS, made for dashboards, data-heavy screens, and real app development.",[488,491,493],[785],[26,506],"content:components:1837.json","components/1837.json","components/1837",{"_path":1325,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1326,"type":49,"title":1327,"slug":1328,"published_at":1329,"order":1330,"created_at":1329,"updated_at":1331,"faqs":1332,"tags":1333,"color":1337,"cover":1338,"images":1339,"is_hot":6,"content":1342,"is_paid":6,"demo_url":1343,"features":1344,"seo_title":1345,"categories":1346,"target_url":1348,"description":1349,"is_featured":6,"is_free_listing":6,"seo_description":1350,"tags_ids":1351,"features_ids":1352,"categories_ids":1353,"_id":1354,"_type":19,"_source":20,"_file":1355,"_stem":1356,"_extension":19},"/components/1807",1807,"SyntaxUI","syntaxui","2025-04-21 21:22:35",36,"2026-03-02 20:36:01",[],[1334,1335,1336],{"id":491,"title":249,"slug":250},{"id":773,"title":774,"slug":775},{"id":693,"title":694,"slug":695},{"id":579,"title":580,"slug":580},"/syntaxui.png",[1340],{"image":1341},"/syntaxui-2.png","\u003Ch2>What Is SyntaxUI?\u003C/h2>\u003Cp>SyntaxUI is a free, open‑source library offering copy‑paste React components styled with Tailwind CSS and enhanced by Framer Motion animations. Instead of coding buttons, tab panels, or pricing tables from scratch, you grab a snippet, tweak the classes, and ship—saving hours per screen\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>100 + production‑ready components: buttons, inputs, tabs, accordions, loaders, steppers and more\u003C/p>\u003C/li>\u003Cli>\u003Cp>Eye‑catching animations powered by Framer Motion\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blocks for common pages: feature grids, testimonials, pricing, footers\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT‑licensed, so you can use it in commercial projects for free\u003C/p>\u003C/li>\u003Cli>\u003Cp>Growing GitHub community (900 + stars) & active X / Discord support\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components\u003C/h2>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"3\" style=\"grid-template-columns: repeat(3, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Accordion\u003C/p>\u003C/li>\u003Cli>\u003Cp>Button \u003Cem>(new)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Input\u003C/p>\u003C/li>\u003Cli>\u003Cp>Loaders\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Text\u003C/p>\u003C/li>\u003Cli>\u003Cp>Toggle\u003C/p>\u003C/li>\u003Cli>\u003Cp>Stepper \u003Cem>(new)\u003C/em>\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Banner \u003Cem>(new)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Features\u003C/p>\u003C/li>\u003Cli>\u003Cp>Footer\u003C/p>\u003C/li>\u003Cli>\u003Cp>Logo Cloud\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pricing\u003C/p>\u003C/li>\u003Cli>\u003Cp>Testimonial \u003Cem>(new)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animations\u003C/p>\u003C/li>\u003Cli>\u003Cp>Skewed Infinite Scroll\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Background\u003C/p>\u003C/li>\u003Cli>\u003Cp>Gradients\u003C/p>\u003C/li>\u003Cli>\u003Cp>Image Fade\u003C/p>\u003C/li>\u003Cli>\u003Cp>Emoji Confetti\u003C/p>\u003C/li>\u003Cli>\u003Cp>Hover Animations\u003C/p>\u003C/li>\u003Cli>\u003Cp>Effects\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Cuts UI build time dramatically—copy, paste, tweak\u003C/p>\u003C/li>\u003Cli>\u003Cp>Fully Tailwind‑styled; no CSS files to manage\u003C/p>\u003C/li>\u003Cli>\u003Cp>Framer Motion examples make adding motion effortless\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT license + zero cost for core kit (paid “Pro” upgrade optional)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Active updates & community feedback on GitHub/X\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>You still need Tailwind set up—beginners face a small learning curve.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Design aesthetic is minimal; heavy custom branding may require extra tweaks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Library is young compared with giants like Tailwind UI, so fewer patterns are covered\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Install Tailwind:\u003C/strong> \u003Ccode>npm install -D tailwindcss\u003C/code> and init config\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Add Framer Motion:\u003C/strong> \u003Ccode>npm install framer-motion\u003C/code> (for animated pieces)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Copy a snippet:\u003C/strong> Pick a component, copy JSX/Tailwind markup\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Paste & tweak classes:\u003C/strong> Update colors, spacing, or motion settings\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Ship:\u003C/strong> Push your Next.js/React app—no design blocks, no CSS re‑work\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Final thoughts\u003C/h2>\u003Cp>If you’re after a no‑cost way to spice up a React/Tailwind project without drowning in Figma files, SyntaxUI is a lightweight but surprisingly versatile toolkit. Give it a spin, see how fast that “launch sooner” motto becomes reality.\u003C/p>","https://syntaxui.com/components/button",[],"SyntaxUI Tailwind & React Components Library",[1347],{"id":26,"title":27,"slug":28},"https://syntaxui.com/","Free Tailwind & React UI components for rapid builds","SyntaxUI gives you ready‑to‑use Tailwind CSS & React components powered by Framer Motion, so you ship sleek interfaces in minutes—no design hurdles.",[491,773,693],[],[26],"content:components:1807.json","components/1807.json","components/1807",{"_path":1358,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1359,"type":49,"title":1360,"slug":1361,"published_at":1362,"order":445,"created_at":1362,"updated_at":1363,"faqs":1364,"tags":1377,"color":1382,"cover":1385,"images":1386,"is_hot":6,"content":1387,"is_paid":6,"demo_url":1388,"features":1389,"seo_title":1392,"categories":1393,"target_url":1388,"description":1397,"is_featured":6,"is_free_listing":6,"seo_description":1398,"tags_ids":1399,"features_ids":1400,"categories_ids":1401,"_id":1402,"_type":19,"_source":20,"_file":1403,"_stem":1404,"_extension":19},"/components/332",332,"Myna UI","myna-ui","2023-03-11 13:39:29","2026-03-02 20:34:10",[1365,1368,1371,1374],{"title":1366,"content":1367},"Can I customize MynaUI components?","Absolutely! All components in MynaUI are designed to be fully customizable. You can tweak colors, spacing, typography, and more to match your project’s unique requirements. The Figma files are especially useful for visual customization before you apply changes in code.",{"title":1369,"content":1370},"Is MynaUI suitable for both beginners and experienced developers?","Yes, it is. While beginners might need a little time to get used to TailwindCSS and shadcn/ui, the documentation and guided onboarding make it accessible. Experienced developers will appreciate the kit’s flexibility, modularity, and the speed it brings to the development process.",{"title":1372,"content":1373},"How often is MynaUI updated?","MynaUI is actively maintained, with regular updates that include new components, improvements to existing ones, and bug fixes. Staying current with the latest web standards is a top priority for the development team.",{"title":1375,"content":1376},"Can I use MynaUI for commercial projects?","Definitely. MynaUI is built for both personal and commercial use. The licensing is flexible, so whether you’re working on a startup, a personal blog, or a large-scale enterprise application, MynaUI is a reliable choice.",[1378,1379,1380,1381],{"id":484,"title":485,"slug":486},{"id":488,"title":489,"slug":167},{"id":865,"title":170,"slug":171},{"id":493,"title":158,"slug":159},{"id":1383,"title":1384,"slug":1384},34,"slate","/myna-ui-2.png",[],"\u003Ch2>What Is MynaUI?\u003C/h2>\u003Cp>MynaUI is a modern, accessible UI kit designed to help designers and developers speed up the design-to-code process. With a carefully crafted collection of Figma components and React code, MynaUI is built using TailwindCSS and shadcn/ui – two of the most popular tools in the web development world.\u003C/p>\u003Cp>\u003Cimg src=\"/myna-ui-3.png\" alt=\"Myna UI Hero Component\" title=\"Myna UI Hero Component\" width=\"900\" height=\"733\">\u003C/p>\u003Ch2>Features\u003C/h2>\u003Cp>\u003Cimg src=\"/myna-ui-4.png\" alt=\"Myna UI Design System, Figma\" title=\"Myna UI Design System\" width=\"900\" height=\"959\">\u003C/p>\u003Cp>MynaUI comes packed with features designed to simplify web development and design:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Component Library:\u003C/strong>\u003Cbr>MynaUI includes a wide variety of elements ranging from basic building blocks like buttons, alerts, and avatars to more complex elements like data tables, modals, and dashboards. This means you get a ready-to-use resource that minimizes repetitive coding.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>TailwindCSS & shadcn/ui Integration:\u003C/strong>\u003Cbr>Built with the latest version of TailwindCSS, MynaUI benefits from a utility-first approach to styling, making customization fast and straightforward. Meanwhile, shadcn/ui ensures that the components have reliable interactivity and modern design standards.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma Ready:\u003C/strong>\u003Cbr>The kit provides Figma files that are neatly organized into a user-friendly design system. This allows designers to prototype and tweak layouts, colors, typography, and more before handing off the design to developers.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Responsive and Accessible:\u003C/strong>\u003Cbr>Every component is built with responsiveness and accessibility in mind. This means your projects not only look great on any device but are also designed to be usable by everyone.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Regular Updates:\u003C/strong>\u003Cbr>With frequent updates, MynaUI stays current with evolving web trends. New components and improvements are rolled out regularly to keep your project up-to-date without a major overhaul.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Flexible Free and Pro Options:\u003C/strong>\u003Cbr>MynaUI offers a free version with essential components, making it easy to get started. For those who need more advanced features and a broader component selection, the pro version unlocks an even larger library with additional customization options.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/myna-ui-6.png\" alt=\"Myna UI - Dropdown Menu\" title=\"Myna UI - Dropdown Menu\" width=\"900\" height=\"676\">\u003C/p>\u003Ch2>Included Components\u003C/h2>\u003Cp>MynaUI isn’t just about individual components; it also provides a collection of ready-to-use templates that can give your project a head start:\u003C/p>\u003Cp>\u003Cimg src=\"/myna-ui-5.png\" alt=\"Cleanshot Badge Components\" title=\"Cleanshot Badge Components\" width=\"900\" height=\"505\">\u003C/p>\u003Ch3>UI Elements\u003C/h3>\u003Cp>Create stunning admin panels and dashboards with pre-built components.\u003C/p>\u003Cdiv class=\"filament-tiptap-grid-builder\" data-type=\"responsive\" data-cols=\"3\" style=\"grid-template-columns: repeat(3, 1fr);\" data-stack-at=\"md\">\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Accordion\u003C/p>\u003C/li>\u003Cli>\u003Cp>Alert\u003C/p>\u003C/li>\u003Cli>\u003Cp>Alert Dialog\u003C/p>\u003C/li>\u003Cli>\u003Cp>Avatar\u003C/p>\u003C/li>\u003Cli>\u003Cp>Avatar Groups\u003C/p>\u003C/li>\u003Cli>\u003Cp>Badge\u003C/p>\u003C/li>\u003Cli>\u003Cp>Breadcrumb\u003C/p>\u003C/li>\u003Cli>\u003Cp>Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Button Groups\u003C/p>\u003C/li>\u003Cli>\u003Cp>Calendar\u003C/p>\u003C/li>\u003Cli>\u003Cp>Combobox\u003C/p>\u003C/li>\u003Cli>\u003Cp>Command\u003C/p>\u003C/li>\u003Cli>\u003Cp>Context Menu\u003C/p>\u003C/li>\u003Cli>\u003Cp>Data Table\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dialog\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Drawer\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dropdown Menu\u003C/p>\u003C/li>\u003Cli>\u003Cp>Menubar\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pagination\u003C/p>\u003C/li>\u003Cli>\u003Cp>Popover\u003C/p>\u003C/li>\u003Cli>\u003Cp>Progress\u003C/p>\u003C/li>\u003Cli>\u003Cp>Rating\u003C/p>\u003C/li>\u003Cli>\u003Cp>Sheet\u003C/p>\u003C/li>\u003Cli>\u003Cp>Skeleton\u003C/p>\u003C/li>\u003Cli>\u003Cp>Spinner\u003C/p>\u003C/li>\u003Cli>\u003Cp>Table\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Toast\u003C/p>\u003C/li>\u003Cli>\u003Cp>Toggle and Toggle Group\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Tooltip\u003C/p>\u003C/li>\u003Cli>\u003Cp>Forms\u003C/p>\u003C/li>\u003Cli>\u003Cp>Form components for your application\u003C/p>\u003C/li>\u003Cli>\u003Cp>Checkbox\u003C/p>\u003C/li>\u003Cli>\u003Cp>Date Picker\u003C/p>\u003C/li>\u003Cli>\u003Cp>Input OTP\u003C/p>\u003C/li>\u003Cli>\u003Cp>Input\u003C/p>\u003C/li>\u003Cli>\u003Cp>Radio\u003C/p>\u003C/li>\u003Cli>\u003Cp>Select\u003C/p>\u003C/li>\u003Cli>\u003Cp>Slider\u003C/p>\u003C/li>\u003Cli>\u003Cp>Switch\u003C/p>\u003C/li>\u003Cli>\u003Cp>Textarea\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch3>\u003Cstrong>Marketing Elements\u003C/strong>\u003C/h3>\u003Cp>Start your marketing or product website with beautifully designed marketing site components.\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;\">\u003Cul>\u003Cli>\u003Cp>Footer\u003C/p>\u003C/li>\u003Cli>\u003Cp>Header\u003C/p>\u003C/li>\u003Cli>\u003Cp>Hero\u003C/p>\u003C/li>\u003Cli>\u003Cp>Statistics\u003C/p>\u003C/li>\u003Cli>\u003Cp>Testimonial Logos\u003C/p>\u003C/li>\u003Cli>\u003Cp>Features\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>404\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blog List\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blog Post\u003C/p>\u003C/li>\u003Cli>\u003Cp>Call to Action\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cookies\u003C/p>\u003C/li>\u003Cli>\u003Cp>FAQ\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch3>\u003Cstrong>Admin Sections\u003C/strong>\u003C/h3>\u003Cp>Start your web application with pre-made components.\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;\">\u003Cul>\u003Cli>\u003Cp>App Headers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Card Headers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cards\u003C/p>\u003C/li>\u003Cli>\u003Cp>Containers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dividers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Empty States\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Forgot Password\u003C/p>\u003C/li>\u003Cli>\u003Cp>Login\u003C/p>\u003C/li>\u003Cli>\u003Cp>Notifications\u003C/p>\u003C/li>\u003Cli>\u003Cp>Registration\u003C/p>\u003C/li>\u003Cli>\u003Cp>Section Headers\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch2>Pricing\u003C/h2>\u003Cp>MynaUI offers a flexible pricing model to suit different project requirements:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Free Version:\u003C/strong>\u003Cbr>The free version gives you access to a core set of components and templates. It’s an excellent way to test the kit and see if it fits your workflow.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Pro Version:\u003C/strong>\u003Cbr>For a one-time fee, the pro version unlocks an extended library with advanced components, additional customization options, and priority updates. This investment can save you hours of development time and give you access to premium designs that elevate your project.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integrations\u003C/h2>\u003Cp>MynaUI works seamlessly with several industry-standard tools and platforms:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>TailwindCSS:\u003C/strong>\u003Cbr>The kit is built on TailwindCSS, ensuring you have access to a powerful, utility-first framework that makes styling quick and efficient.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>shadcn/ui:\u003C/strong>\u003Cbr>Leveraging shadcn/ui for its components means you get modern, interactive elements that follow best practices in UI development.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma:\u003C/strong>\u003Cbr>MynaUI comes with ready-to-use Figma files, allowing you to prototype and iterate on designs before diving into the code.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>React:\u003C/strong>\u003Cbr>For developers, the provided React components ensure smooth integration with your projects, whether you’re building a web application from scratch or enhancing an existing one.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>User-Friendly:\u003C/strong>\u003Cbr>Both designers and developers will find MynaUI easy to navigate. The Figma files are well-organized, and the React components are modular, which reduces the learning curve significantly.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>High Customizability:\u003C/strong>\u003Cbr>Every component is built with customization in mind. You can tweak colors, spacing, and typography to match your project’s unique style, making it a highly flexible solution.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Modern and Responsive:\u003C/strong>\u003Cbr>MynaUI’s components are built to be responsive and accessible, ensuring your projects are future-proof and usable across different devices and by diverse user groups.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Frequent Updates:\u003C/strong>\u003Cbr>The development team actively maintains MynaUI, releasing updates and new components regularly. This means you always have access to the latest design trends and technical improvements.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Dark Mode Inconsistencies:\u003C/strong>\u003Cbr>While some components offer dark mode support, the experience isn’t fully consistent across the entire kit. A more comprehensive dark mode implementation would be a great addition.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Premium Lock-In:\u003C/strong>\u003Cbr>While the free version is generous, some of the more advanced features and components are locked behind the pro version. For smaller projects or tight budgets, this might be a consideration.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Learning Curve for Beginners:\u003C/strong>\u003Cbr>Even though the kit is designed to be user-friendly, complete newcomers to TailwindCSS or shadcn/ui might need some time to get accustomed to the workflow.\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Cp>MynaUI stands out as a modern, flexible UI kit that bridges the gap between design and development. Its comprehensive collection of Figma and React components, built on the solid foundation of TailwindCSS and shadcn/ui, makes it a top pick for anyone looking to streamline their workflow.\u003C/p>","https://mynaui.com/",[1390,1391],{"id":1152,"title":1153,"slug":1154},{"id":785,"title":786,"slug":787},"MynaUI – TailwindCSS, shadcn/ui, React & Figma",[1394,1395,1396],{"id":1160,"title":1161,"slug":1162},{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"TailwindCSS and shadcn/ui UI kit","Discover MynaUI – a customizable UI kit for Figma and React, built with TailwindCSS and shadcn/ui. Enjoy seamless design and development.",[484,488,865,493],[1152,785],[1160,506,26],"content:components:332.json","components/332.json","components/332",{"_path":1406,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1407,"type":49,"title":1408,"slug":1409,"published_at":1410,"order":1411,"created_at":1410,"updated_at":1412,"faqs":1413,"tags":1426,"color":1428,"cover":1429,"images":1430,"is_hot":6,"content":1431,"is_paid":6,"demo_url":1432,"features":1433,"seo_title":1434,"categories":1435,"target_url":1438,"description":1439,"is_featured":6,"is_free_listing":6,"seo_description":1440,"tags_ids":1441,"features_ids":1442,"categories_ids":1443,"_id":1444,"_type":19,"_source":20,"_file":1445,"_stem":1446,"_extension":19},"/components/2215",2215,"Spartan","spartan","2026-01-24 13:58:55",42,"2026-03-02 20:30:55",[1414,1417,1420,1423],{"title":1415,"content":1416},"Does Spartan UI work without the full-stack setup?","Yes, spartan/ui works with any Angular app; the full-stack “stack” is optional.",{"title":1418,"content":1419},"Is it pre-styled like Material or PrimeNG?","Not by default. It’s unstyled-first: you copy styles into your codebase so you can change everything.",{"title":1421,"content":1422},"Do I need Tailwind to use it?","Yes, Tailwind CSS is a prerequisite for spartan/ui’s setup.",{"title":1424,"content":1425},"What’s the easiest way to add components?","Use the Spartan CLI to add components and set up themes in Angular CLI or Nx projects.",[1427],{"id":954,"title":955,"slug":956},{"id":579,"title":580,"slug":580},"/spartan.png",[],"\u003Cblockquote>\u003Cp>Spartan is a \u003Cstrong>copy-paste friendly Angular UI toolkit\u003C/strong>: you install the accessible behavior, then \u003Cstrong>copy the styles into your own codebase\u003C/strong> so you can tweak everything without fighting a theme API.\u003C/p>\u003C/blockquote>\u003Cp>\u003Cbr>It also offers an optional full-stack “stack” setup if you want a bigger end-to-end starter.\u003C/p>\u003Ch2>\u003Cimg src=\"/cleanshot-2026-01-24-at-145315.png\" alt=\"Spartan UI - Accessible UI primitives for Angular\" title=\"Spartan UI primitives for Angular\" width=\"1527\" height=\"861\" loading=\"lazy\">What Is the Spartan UI?\u003C/h2>\u003Cp>Spartan UI is a set of \u003Cstrong>accessible UI primitives for Angular\u003C/strong> designed around “install behavior, copy styles.” That means the hard accessibility logic stays maintained upstream, while your styling lives in your repo where you can edit it freely.\u003C/p>\u003Ch2>What features does Spartan UI offer? ✨\u003C/h2>\u003Cp>It focuses on speed + control: you get solid behavior out of the box, without getting locked into a rigid theming system.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Accessible primitives for Angular (unstyled-first)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Brain + Helm\u003C/strong> split: install logic, copy styles\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>CLI\u003C/strong> to add components and set up a theme quickly\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind-first styling workflow\u003C/p>\u003C/li>\u003Cli>\u003Cp>SSR and “zoneless ready” positioning (great for modern Angular setups)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dark mode supported via CSS variables + a single \u003Ccode>dark\u003C/code> class\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What components are included? 📒\u003C/h2>\u003Cp>You get a pretty broad set of building blocks, covering the usual “app UI” needs.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Navigation and overlays: \u003Cstrong>Dialog, Dropdown Menu, Popover, Sheet, Sidebar, Tooltip\u003C/strong>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Inputs: \u003Cstrong>Input, Checkbox, Radio Group, Select, Textarea, Toggle Group\u003C/strong>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Data and layout: \u003Cstrong>Data Table, Pagination, Card, Tabs, Table, Resizable\u003C/strong>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dates: \u003Cstrong>Calendar, Date Picker\u003C/strong> (built using Popover + Calendar)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What are the pros and cons?\u003C/h2>\u003Cp>If you like owning your UI code and don’t want to wrestle a component library’s styling system, it’s a strong fit. If you want “install and forget” with tons of prebuilt themes and zero Tailwind, it may feel more hands-on.\u003C/p>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>You \u003Cstrong>own the styles\u003C/strong> (easy to tweak, no theming API battles)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Strong “modern Angular” angle (signals, SSR-friendly messaging)\u003C/p>\u003C/li>\u003Cli>\u003Cp>CLI makes adding components and themes much faster\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT licensed and open source\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Requires Tailwind CSS, so it’s not “CSS-framework neutral”\u003C/p>\u003C/li>\u003Cli>\u003Cp>Copy-paste ownership means \u003Cstrong>you\u003C/strong> maintain your local styling layer (by design)\u003C/p>\u003C/li>\u003Cli>\u003Cp>“Unstyled-first” can feel slower if you want fully designed components instantly\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How does Spartan UI integrate with your stack?\u003C/h2>\u003Cp>Integration is straightforward if you’re already in Angular + Tailwind land, and it supports both Angular CLI and Nx workflows.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Works with \u003Cstrong>Angular CLI\u003C/strong> and \u003Cstrong>Nx\u003C/strong>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tailwind is a prerequisite, and Spartan provides presets/styles you can copy and adjust\u003C/p>\u003C/li>\u003Cli>\u003Cp>Optional \u003Cstrong>spartan/stack\u003C/strong> for full-stack Angular with AnalogJs + Supabase + tRPC + Drizzle + Nx\u003C/p>\u003C/li>\u003Cli>\u003Cp>Icons default to Lucide via ng-icons (customizable)\u003C/p>\u003C/li>\u003C/ul>","https://spartan.ng/components/accordion",[],"Spartan - Unstyled Angular Components",[1436,1437],{"id":745,"title":746,"slug":747},{"id":26,"title":27,"slug":28},"https://spartan.ng/","Accessible Angular UI primitives, Tailwind ready","Accessible Angular UI primitives with Brain and Helm layers. Add via CLI, copy Tailwind styles, customize freely, SSR and zoneless ready.",[954],[],[745,26],"content:components:2215.json","components/2215.json","components/2215",{"_path":1448,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1449,"type":49,"title":1450,"slug":1451,"published_at":1452,"order":1453,"created_at":1452,"updated_at":1454,"faqs":1455,"tags":1456,"color":1457,"cover":1458,"images":1459,"is_hot":6,"content":1460,"is_paid":6,"demo_url":32,"features":1461,"seo_title":1450,"categories":1465,"target_url":32,"description":1468,"is_featured":48,"is_free_listing":6,"seo_description":1469,"tags_ids":1470,"features_ids":1471,"categories_ids":1472,"_id":1473,"_type":19,"_source":20,"_file":1474,"_stem":1475,"_extension":19},"/components/380",380,"Tailwind Background Snippets","tailwind-background-snippets","2023-09-11 09:24:40",44,"2026-03-02 20:15:58",[],[],{"id":1255,"title":309,"slug":309},"/tailwind-background-snippets-2.png",[],"\u003Cp>Tailwind Background Snippets offers 22 ready-to-use background patterns for your Tailwind CSS projects.\u003C/p>\u003Ch2>What Are Tailwind Background Snippets?\u003C/h2>\u003Cp>Tailwind Background Snippets are a collection of pre-made background patterns designed specifically for Tailwind CSS projects. These snippets offer a quick, copy-and-paste solution for adding engaging, visually appealing backgrounds to your designs. With 33 different graph, notebook, and gradient style backgrounds at your fingertips, you can choose the one that best fits your project’s vibe.\u003C/p>\u003Cp>\u003Cimg src=\"/tailwind-background-snippets-3.png\" alt=\"Tailwind Background Snippets - Copy & Paste\" title=\"Tailwind Background Snippets - Copy & Paste\" width=\"800\" height=\"617\">\u003C/p>\u003Ch3>Key Features:\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Dark Mode Support:\u003C/strong> Each snippet comes with an option for dark mode, ensuring that your design looks great no matter what theme your users prefer.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>JavaScript Plugin:\u003C/strong> For those who want extra functionality, a JavaScript plugin is available to enhance interactivity.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Copy & Paste Simplicity:\u003C/strong> Designed with ease-of-use in mind, you can quickly copy the code and integrate it into your project.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS v3 Compatible:\u003C/strong> These backgrounds are built using the latest features of Tailwind CSS v3, so they’re optimized for modern web development.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How to Use Tailwind Background Snippets in Your Projects\u003C/h2>\u003Cdiv data-native-video=\"true\" class=\"responsive\">\u003Cvideo autoplay=\"true\" loop=\"true\" src=\"https://packaged-media.redd.it/v4zqmyxt5qhe1/pb/m2-res_720p.mp4?m=DASHPlaylist.mpd&v=1&e=1739808000&s=3000dcfa41b2418cec1c81bae06c17cd2ef783be\" width=\"1600\" height=\"900\">\u003C/video>\u003C/div>\u003Cp>Integrating these background snippets into your project is as simple as copying the code and pasting it into your Tailwind CSS project. Here’s a quick walkthrough:\u003C/p>\u003Ch3>Step 1: Choose Your Background\u003C/h3>\u003Cp>Visit the Tailwind Background Snippets collection and browse through the 22 available options. The interface is straightforward—each background has a preview and a “Copy Code” button. Decide whether you want a light or dark version based on your project’s theme.\u003C/p>\u003Ch3>Step 2: Copy the Code\u003C/h3>\u003Cp>Once you’ve selected a background, click the “Copy Code” button. The snippet is now in your clipboard, ready to be inserted into your project.\u003C/p>\u003Ch3>Step 3: Integrate into Your HTML\u003C/h3>\u003Cp>Paste the code into your HTML where you want the background to appear. Typically, this might be in a container or a section that needs a distinctive look. For example:\u003C/p>\u003Cpre>\u003Ccode><div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 h-screen"> <!-- Your content goes here --> </div>\u003C/code>\u003C/pre>\u003Ch3>Step 4: Customize as Needed\u003C/h3>\u003Cp>Tailwind CSS is known for its flexibility. Feel free to modify the classes to better match your design. Change colors, adjust gradients, or even combine snippets for a layered effect.\u003C/p>\u003Ch3>Step 5: Test Across Themes\u003C/h3>\u003Cp>Make sure to test your background in both light and dark modes if applicable. This ensures that your design remains cohesive and accessible, regardless of the user’s settings.\u003C/p>\u003Ch2>Why Background Patterns Matter in Web Design\u003C/h2>\u003Cp>Backgrounds are more than just a filler; they’re a foundational element of web design. Here’s why they’re so important:\u003C/p>\u003Cp>\u003Cstrong>Setting the Mood and Tone\u003C/strong>\u003C/p>\u003Cp>A background can immediately set the emotional tone of your site. Whether you opt for a subtle gradient, a vibrant pattern, or a complex image, the background helps shape the first impression your visitors get.\u003C/p>\u003Cp>\u003Cstrong>Readability and Focus\u003C/strong>\u003C/p>\u003Cp>A well-chosen background can create a natural hierarchy on your page, drawing attention to key content areas while providing a pleasing aesthetic that doesn’t overwhelm the viewer.\u003C/p>\u003Cp>\u003Cstrong>Brand Identity\u003C/strong>\u003C/p>\u003Cp>Consistent background patterns and color schemes reinforce your brand’s identity. With Tailwind Background Snippets, you have a starting point to align your design with your brand’s unique style.\u003C/p>\u003Cp>\u003Cstrong>Speeding Up Development\u003C/strong>\u003C/p>\u003Cp>Designing custom backgrounds from scratch can be time-consuming. With these ready-made snippets, you save valuable time, allowing you to focus on other parts of your project.\u003C/p>",[1462,1463,1464],{"id":1008,"title":1009,"slug":187},{"id":1197,"title":1198,"slug":1199},{"id":785,"title":786,"slug":787},[1466,1467],{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"33 free to use background snippets","Discover 33 beautiful Tailwind CSS background patterns with dark mode support. Copy, paste, and customize for your next project.",[],[1008,1197,785],[506,26],"content:components:380.json","components/380.json","components/380",{"_path":1477,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1478,"type":49,"title":1479,"slug":1480,"published_at":1481,"order":1482,"created_at":1481,"updated_at":1483,"faqs":1484,"tags":1488,"color":1493,"cover":1494,"images":1495,"is_hot":6,"content":1496,"is_paid":6,"demo_url":1497,"features":1498,"seo_title":1509,"categories":1510,"target_url":1497,"description":1513,"is_featured":6,"is_free_listing":6,"seo_description":1514,"tags_ids":1515,"features_ids":1516,"categories_ids":1517,"_id":1518,"_type":19,"_source":20,"_file":1519,"_stem":1520,"_extension":19},"/components/1635",1635,"Bundui","bundui","2024-10-26 22:40:11",46,"2026-03-02 20:15:23",[1485],{"title":1486,"content":1487},"Can I customize Bundui components?","Yes, all components are customizable to suit your design needs.",[1489,1490,1491,1492],{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":693,"title":694,"slug":695},{"id":493,"title":158,"slug":159},{"id":579,"title":580,"slug":580},"/bundui.png",[],"\u003Ch2>What is Bundui?\u003C/h2>\u003Cp>Bundui offers pre-built, animated components using Tailwind CSS and Framer Motion, allowing designers and developers to easily integrate stunning animations.\u003C/p>\u003Ch2>Features\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Ready-to-use animated components\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built with Tailwind CSS and Framer Motion\u003C/p>\u003C/li>\u003Cli>\u003Cp>Easy copy-paste integration\u003C/p>\u003C/li>\u003Cli>\u003Cp>Fully customizable\u003C/p>\u003C/li>\u003Cli>\u003Cp>Open-source\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Cp>\u003Cstrong>Pros\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Beautifully designed animations\u003C/p>\u003C/li>\u003Cli>\u003Cp>Open-source and customizable\u003C/p>\u003C/li>\u003Cli>\u003Cp>Quick integration with Tailwind CSS\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Cons\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Limited component variety in beta\u003C/p>\u003C/li>\u003Cli>\u003Cp>Lacks extensive documentation for beginners\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Included Components\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Buttons\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Gradient Text\u003C/p>\u003C/li>\u003Cli>\u003Cp>Count Animation\u003C/p>\u003C/li>\u003Cli>\u003Cp>Floating Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Magnetic Button\u003C/p>\u003C/li>\u003Cli>\u003Cp>Text Gradient Scroll\u003C/p>\u003C/li>\u003Cli>\u003Cp>Scroll Progress Bar\u003C/p>\u003C/li>\u003Cli>\u003Cp>Marquee Effect\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pricing\u003C/h2>\u003Cp>Currently free in its beta version.\u003C/p>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Tailwind CSS\u003C/p>\u003C/li>\u003Cli>\u003Cp>Framer Motion\u003C/p>\u003C/li>\u003C/ul>","https://bundui.io/?aff=LPojk",[1499,1500,1504,1505],{"id":827,"title":828,"slug":829},{"id":1501,"title":1502,"slug":1503},209,"Custom config file","custom-config-file",{"id":785,"title":786,"slug":787},{"id":1506,"title":1507,"slug":1508},217,"Responsive","responsive","Bundui: Animated Tailwind CSS & Framer Motion Components",[1511,1512],{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"Animated Tailwind components using Framer Motion","Discover animated components made with Tailwind CSS and Framer Motion, perfect for developers and designers looking to enhance UI/UX.",[488,491,693,493],[827,1501,785,1506],[506,26],"content:components:1635.json","components/1635.json","components/1635",{"_path":1522,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1523,"type":49,"title":1524,"slug":1525,"published_at":1526,"order":1527,"created_at":1526,"updated_at":1528,"faqs":1529,"tags":1533,"color":1537,"cover":1538,"images":1539,"is_hot":6,"content":1542,"is_paid":6,"demo_url":1543,"features":1544,"seo_title":1545,"categories":1546,"target_url":1543,"description":1561,"is_featured":6,"is_free_listing":6,"seo_description":1562,"tags_ids":1563,"features_ids":1564,"categories_ids":1565,"_id":1566,"_type":19,"_source":20,"_file":1567,"_stem":1568,"_extension":19},"/components/1568",1568,"Motion Primitives","motion-primitives","2024-07-09 01:03:08",47,"2026-03-02 20:14:21",[1530],{"title":1531,"content":1532},"What is Motion-Primitives?","Motion-Primitives is a collection of animated components built with Framer Motion and Tailwind CSS.",[1534,1535,1536],{"id":865,"title":170,"slug":171},{"id":773,"title":774,"slug":775},{"id":693,"title":694,"slug":695},{"id":579,"title":580,"slug":580},"/motion-primitives.png",[1540],{"image":1541},"/motion-primitives-2.png","\u003Cp>A collection of reusable animated components built with Framer Motion and Tailwind CSS.\u003C/p>\u003Ch2>What is it?\u003C/h2>\u003Cp>Motion-Primitives is a set of open-source, customizable animated components designed with Framer Motion and Tailwind CSS for easy integration into web projects.\u003C/p>\u003Cblockquote>\u003Cp>premium version is also launched recently\u003C/p>\u003Cp>\u003Ca id=\"procta\" href=\"https://pro.motion-primitives.com/\" target=\"_blank\" rel=\"dofollow\" referrerpolicy=\"tailkits\" data-as-button=\"false\">\u003Cimg src=\"/motion-primitives-3.png\" alt=\"Motion-Primitives Pro\" title=\"Motion-Primitives Pro\" width=\"1200\" height=\"1402\">\u003C/a>\u003C/p>\u003C/blockquote>\u003Cp>\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Customizable animated components.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built with Framer Motion and Tailwind CSS.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Open-source and free to use.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Regular updates with new components.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Components 🌁\u003C/h2>\u003Ch3>Core Components\u003C/h3>\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;\">\u003Cul>\u003Cli>\u003Cp>Accordion\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Background\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Group\u003C/p>\u003C/li>\u003Cli>\u003Cp>Border Trail\u003C/p>\u003C/li>\u003Cli>\u003Cp>Carousel\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cursor\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Dialog\u003C/p>\u003C/li>\u003Cli>\u003Cp>Disclosure\u003C/p>\u003C/li>\u003Cli>\u003Cp>In View\u003C/p>\u003C/li>\u003Cli>\u003Cp>Infinite Slider\u003C/p>\u003C/li>\u003Cli>\u003Cp>Transition Panel\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch3>Text Effects\u003C/h3>\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;\">\u003Cul>\u003Cli>\u003Cp>Text Effect \u003Cem>(Updated)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Text Loop \u003Cem>(Updated)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Text Morph \u003Cem>(Updated)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Text Roll \u003Cem>(New)\u003C/em>\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Text Scramble\u003C/p>\u003C/li>\u003Cli>\u003Cp>Text Shimmer\u003C/p>\u003C/li>\u003Cli>\u003Cp>Text Shimmer Wave\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch3>Core Components\u003C/h3>\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;\">\u003Cul>\u003Cli>\u003Cp>Accordion\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Background\u003C/p>\u003C/li>\u003Cli>\u003Cp>Animated Group\u003C/p>\u003C/li>\u003Cli>\u003Cp>Border Trail\u003C/p>\u003C/li>\u003Cli>\u003Cp>Carousel\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cursor\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Dialog\u003C/p>\u003C/li>\u003Cli>\u003Cp>Disclosure\u003C/p>\u003C/li>\u003Cli>\u003Cp>In View\u003C/p>\u003C/li>\u003Cli>\u003Cp>Infinite Slider\u003C/p>\u003C/li>\u003Cli>\u003Cp>Transition Panel\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch3>Number Effects\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Animated Number\u003C/p>\u003C/li>\u003C/ul>\u003Cul>\u003Cli>\u003Cp>Sliding Number \u003Cem>(New)\u003C/em>\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>\u003Cstrong>Interactive Elements\u003C/strong>\u003C/h3>\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;\">\u003Cul>\u003Cli>\u003Cp>Dock\u003C/p>\u003C/li>\u003C/ul>\u003Cul>\u003Cli>\u003Cp>Glow Effect \u003Cem>(New)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Image Comparison\u003C/p>\u003C/li>\u003Cli>\u003Cp>Scroll Progress\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Cul>\u003Cli>\u003Cp>Spotlight\u003C/p>\u003C/li>\u003Cli>\u003Cp>Spinning Text\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tilt\u003C/p>\u003C/li>\u003C/ul>\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;\">\u003Ch3>\u003Cstrong>Toolbars\u003C/strong>\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Toolbar Dynamic\u003C/p>\u003C/li>\u003Cli>\u003Cp>Toolbar Expandable\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003Cdiv class=\"filament-tiptap-grid-builder__column\" data-col-span=\"1\" style=\"grid-column: span 1;\">\u003Ch3>\u003Cstrong>Advanced Effects\u003C/strong>\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Magnetic\u003C/p>\u003C/li>\u003Cli>\u003Cp>Morphing Dialog\u003C/p>\u003C/li>\u003Cli>\u003Cp>Morphing Popover \u003Cem>(New)\u003C/em>\u003C/p>\u003C/li>\u003Cli>\u003Cp>Progressive Blur \u003Cem>(New)\u003C/em>\u003C/p>\u003C/li>\u003C/ul>\u003C/div>\u003C/div>\u003Ch2>Integration 🧰\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Tailwind CSS\u003C/p>\u003C/li>\u003Cli>\u003Cp>Framer Motion\u003C/p>\u003C/li>\u003C/ul>","https://motion-primitives.com/",[],"Motion Primitives | Animate Interfaces Fast with Motion Primitives",[1547,1551,1555,1559,1560],{"id":1548,"title":1549,"slug":1550},168,"Card Component","card-component",{"id":1552,"title":1553,"slug":1554},177,"Button","button",{"id":1556,"title":1557,"slug":1558},158,"Call to Action","call-to-action",{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"Framer Motion components from ibelick","Discover Motion Primitives: a free, customizable UI kit built with Framer Motion and Tailwind CSS, designed to create beautiful, animated interfaces fast.",[865,773,693],[],[1548,1552,1556,506,26],"content:components:1568.json","components/1568.json","components/1568",{"_path":1570,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1571,"type":49,"title":1572,"slug":1573,"published_at":1574,"order":662,"created_at":1574,"updated_at":1575,"faqs":1576,"tags":1586,"color":1592,"cover":1593,"images":1594,"is_hot":6,"content":1597,"is_paid":6,"demo_url":1598,"features":1599,"seo_title":1603,"categories":1604,"target_url":1608,"description":1609,"is_featured":6,"is_free_listing":6,"seo_description":1610,"tags_ids":1611,"features_ids":1612,"categories_ids":1613,"_id":1614,"_type":19,"_source":20,"_file":1615,"_stem":1616,"_extension":19},"/components/1749",1749,"KokonutUI","kokonutui","2025-02-23 19:57:47","2026-03-02 20:13:57",[1577,1580,1583],{"title":1578,"content":1579},"Can I use KokonutUI in commercial projects?","Yes, both versions allow for commercial use, though the paid version comes with additional features that are especially beneficial for professional projects.",{"title":1581,"content":1582},"What is the main difference between the free and paid versions?","The free version offers a comprehensive set of open-source components, while the paid version provides premium components, exclusive templates, advanced animations, and dedicated support.",{"title":1584,"content":1585},"Do I need to know Tailwind CSS to use KokonutUI?","While familiarity with Tailwind CSS is helpful, the documentation is straightforward enough for beginners to pick up and start using the components.",[1587,1588,1589,1590,1591],{"id":488,"title":489,"slug":167},{"id":491,"title":249,"slug":250},{"id":773,"title":774,"slug":775},{"id":493,"title":158,"slug":159},{"id":693,"title":694,"slug":695},{"id":579,"title":580,"slug":580},"/kokonutui-6.png",[1595],{"image":1596},"/kokonutui-7.png","\u003Ch2>Open Source Version: KokonutUI Free\u003C/h2>\u003Cp>The free version of KokonutUI is available at \u003Ca id=\"free-version\" href=\"http://kokonutui.com\" target=\"_blank\" rel=\"nofollow\" referrerpolicy=\"tailkits\" data-as-button=\"false\">kokonutui.com\u003C/a>. It’s an open-source library packed with a robust collection of components built for React, Next.js, and styled using Tailwind CSS. If you’re on a budget or simply exploring different UI kits, the free version is a solid starting point.\u003C/p>\u003Cp>\u003Cimg src=\"/kokonutui.png\" alt=\"KokonutUI - Next.js UI Components\" title=\"KokonutUI - Next.js UI Components\" width=\"1200\" height=\"1552\" loading=\"lazy\">\u003C/p>\u003Ch3>What You Get for Free\u003C/h3>\u003Cp>KokonutUI’s open-source library gives you access to a variety of components that can be easily copy-pasted into your projects. The documentation is straightforward, which makes it easier for you to integrate components without any major hiccups.\u003C/p>\u003Cp>\u003Cstrong>Key Features:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Responsive Components:\u003C/strong> Each component is designed to work seamlessly on any device.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS Integration:\u003C/strong> Enjoy the benefits of a utility-first CSS framework, making customizations super easy.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>No Dependencies Hassle:\u003C/strong> The components are built to be standalone, meaning you can drop them into your project without the need for extra libraries.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Community Driven:\u003C/strong> With an active community behind it, updates and improvements are regularly contributed by fellow developers.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/kokonutui-2.png\" alt=\"KokonutUI UI Elements - React and Next.js Components\" title=\"KokonutUI UI Elements - React and Next.js Components\" width=\"1200\" height=\"1552\">\u003C/p>\u003Ch3>Free Version Features 🆓\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>100+ components\u003C/strong> designed for various aspects of UI.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Customizable elements\u003C/strong> that can be easily adapted to your project.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Simple integration\u003C/strong> with React and Next.js.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Built with Tailwind CSS\u003C/strong> for streamlined styling.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Active community support\u003C/strong> with ongoing updates.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>The free version is ideal if you want to test the waters or build a project without a hefty price tag. The components are easy to use, and the documentation at \u003Ca href=\"http://kokonutui.com/docs/components/\" target=\"_blank\" data-as-button=\"false\">kokonutui.com/docs/components/\u003C/a> is clear enough to guide you through the process.\u003C/p>\u003Chr>\u003Ch2>Paid Version: KokonutUI Pro\u003C/h2>\u003Cp>\u003Cimg src=\"/kokonutui-3.png\" alt=\"KokonutUI Dashboard Example\" title=\"KokonutUI Dashboard Example\" width=\"1250\" height=\"1552\">\u003C/p>\u003Cp>For those who need more robust features and a polished, professional look, KokonutUI Pro is worth considering. Accessible via \u003Ca href=\"http://kokonutui.pro\" target=\"_blank\" rel=\"dofollow\" referrerpolicy=\"tailkits\" data-as-button=\"false\">kokonutui.pro\u003C/a>, the paid version offers a premium set of UI components and templates that are regularly updated and packed with extra bells and whistles.\u003C/p>\u003Ch3>What Makes KokonutUI Pro Stand Out\u003C/h3>\u003Cp>KokonutUI Pro is all about giving you a head start when it comes to creating high-quality websites and applications. With a one-time payment option for lifetime access, you’re not stuck with recurring fees. Instead, you invest once and get continuous updates and premium support.\u003C/p>\u003Cp>\u003Cimg src=\"/kokonutui-4.png\" alt=\"Action Toolbar component\" title=\"Action Toolbar from KokonutUI\" width=\"1200\" height=\"360\">\u003C/p>\u003Cp>\u003Cstrong>Key Features:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>50+ premium components\u003C/strong> that are finely tuned for professional projects.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Exclusive templates:\u003C/strong> Kickstart your project with ready-made layouts that can be customized further.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS & Framer Motion:\u003C/strong> Enjoy smooth animations and modern designs that make your website pop.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Commercial Use:\u003C/strong> Use the components freely in your commercial projects without any extra hassle.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Lifetime Updates and Support:\u003C/strong> Benefit from free updates and priority support to help you out when needed.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cimg src=\"/kokonutui-5.png\" alt=\"Calendar Schedule with Animation\" title=\"Calendar Schedule Component - Tailwind CSS\" width=\"1200\" height=\"1554\">\u003C/p>\u003Ch3>Paid Version Features\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>50+ premium components\u003C/strong> for building advanced web pages.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>2+ professionally designed templates\u003C/strong> for quick project setup.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Integrated animations\u003C/strong> using Framer Motion for a refined touch.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Commercial license included,\u003C/strong> so you can use it in business projects.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Lifetime updates and priority support,\u003C/strong> ensuring your project stays current.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>The paid version is clearly geared toward developers and businesses that need a more polished toolkit and appreciate the benefits of a dedicated support system. It’s designed to save you time and reduce the hassle of building interfaces from scratch, allowing you to focus more on the functionality and content of your project.\u003C/p>\u003Ch2>Comparing the Free and Paid Versions\u003C/h2>\u003Cp>While both versions offer a great set of components, your choice might depend on your specific needs and the scale of your project. Here’s a quick rundown to help you decide:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Budget:\u003C/strong>\u003Cbr>If you’re just experimenting or working on a personal project, the free version is more than adequate. However, if you’re planning on launching a commercial project, the additional features and templates of KokonutUI Pro can be a game-changer.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Features and Customization:\u003C/strong>\u003Cbr>The free version gives you a solid foundation, but KokonutUI Pro goes a step further with premium components and integrated animations. The added polish can significantly enhance the user experience of your final product.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Support and Updates:\u003C/strong>\u003Cbr>With the free version, you rely on community support, which can be great but might not be as responsive as the priority support offered in the paid version. Also, regular updates in KokonutUI Pro ensure that you’re always on the cutting edge.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Ease of Use:\u003C/strong>\u003Cbr>Both versions are built with simplicity in mind, but the premium templates in the paid version can speed up the development process considerably, especially if you’re under a tight deadline.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Extra Benefits and Considerations\u003C/h2>\u003Cp>Both versions of KokonutUI come with their own perks. The free version is fantastic for learning and quick project prototypes, while the paid version is an investment in efficiency and quality. Here are some extra benefits you might want to consider:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Design Consistency:\u003C/strong> Using a unified component library ensures that your website or application has a consistent look and feel, which is crucial for branding.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Time Savings:\u003C/strong> Ready-to-use components mean you can focus on functionality rather than spending time on design details.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Scalability:\u003C/strong> Both versions are built to scale. As your project grows, the components can be easily extended or customized to meet new requirements.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Community and Support:\u003C/strong> The active community around the free version is a great resource, and the dedicated support in the paid version can help resolve issues faster.\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2>Final Thoughts\u003C/h2>\u003Cp>KokonutUI is an excellent resource whether you’re dipping your toes into web development or looking for a reliable toolkit for your commercial project.\u003C/p>\u003Cp>The free version provides a solid base to build beautiful websites, and it’s perfect if you’re just starting out or need a quick solution without any upfront costs. On the other hand, the paid version – KokonutUI Pro – takes things up a notch with premium components, professional templates, and enhanced animations that can give your project a competitive edge.\u003C/p>","https://kokonutui.com/preview/hero-geometric",[1600,1601,1602],{"id":827,"title":828,"slug":829},{"id":1197,"title":1198,"slug":1199},{"id":1506,"title":1507,"slug":1508},"KokonutUI: Free & Premium Tailwind UI Components",[1605,1606,1607],{"id":1160,"title":1161,"slug":1162},{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"https://kokonutui.com/","UI components built with Tailwind CSS for React and Next.js\n","Explore KokonutUI, a premium UI kit featuring 100+ customizable React/Next.js components and templates built with Tailwind CSS for stunning websites.",[488,491,773,493,693],[827,1197,1506],[1160,506,26],"content:components:1749.json","components/1749.json","components/1749",{"_path":1618,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1619,"type":49,"title":1620,"slug":1621,"published_at":1622,"order":1623,"created_at":1622,"updated_at":1624,"faqs":1625,"tags":1626,"color":1628,"cover":1629,"images":1630,"is_hot":6,"content":32,"is_paid":6,"demo_url":1631,"features":1632,"seo_title":1620,"categories":1634,"target_url":1637,"description":1638,"is_featured":6,"is_free_listing":6,"seo_description":1638,"tags_ids":1639,"features_ids":1640,"categories_ids":1641,"_id":1642,"_type":19,"_source":20,"_file":1643,"_stem":1644,"_extension":19},"/components/334",334,"Sailboat UI","sailboat-ui","2023-03-11 21:49:35",54,"2026-03-02 20:58:18",[],[1627],{"id":865,"title":170,"slug":171},{"id":579,"title":580,"slug":580},"/sailboat-ui.png",[],"https://sailboatui.com/docs/forms/radio/",[1633],{"id":785,"title":786,"slug":787},[1635,1636],{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"https://sailboatui.com/","50+ UI Components for Tailwind CSS",[865],[785],[506,26],"content:components:334.json","components/334.json","components/334",{"_path":1646,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1647,"type":49,"title":1648,"slug":1649,"published_at":1650,"order":1651,"created_at":1650,"updated_at":1652,"faqs":1653,"tags":1654,"color":1657,"cover":1658,"images":1659,"is_hot":6,"content":1660,"is_paid":6,"demo_url":1661,"features":1662,"seo_title":1664,"categories":1665,"target_url":1668,"description":1669,"is_featured":6,"is_free_listing":6,"seo_description":1670,"tags_ids":1671,"features_ids":1672,"categories_ids":1673,"_id":1674,"_type":19,"_source":20,"_file":1675,"_stem":1676,"_extension":19},"/components/349",349,"Tremor","tremor","2023-03-21 20:25:19",61,"2026-03-02 21:00:48",[],[1655,1656],{"id":484,"title":485,"slug":486},{"id":491,"title":249,"slug":250},{"id":579,"title":580,"slug":580},"/tremor-react-library.png",[],"\u003Cp>\u003Cstrong>Tremor by Vercel\u003C/strong> — a React-based library designed to make dashboard creation a breeze. This open-source tool is packed with components and features that help developers save time and focus on delivering impactful data visuals.\u003C/p>\u003Ch2>What Is Tremor?\u003C/h2>\u003Cp>Tremor is an open-source library developed by Vercel, the team behind some of the most popular tools in modern web development. Tailored for React, Tremor simplifies the process of building sleek, responsive dashboards. The library includes over 35 components and 300 blocks, all of which are designed to integrate seamlessly with Tailwind CSS.\u003C/p>\u003Cp>In big news, \u003Cstrong>Vercel recently \u003Ca href=\"https://vercel.com/blog/vercel-acquires-tremor\" target=\"_blank\" data-as-button=\"false\">acquired\u003C/a> Tremor! \u003C/strong>This move shows how serious they are about giving developers top-notch tools. With this backing, Tremor is set to get even better, with more resources poured into making it a powerhouse for dashboard building.\u003C/p>\u003Cp>Whether you’re working on your own or part of a team, Tremor has you covered. It’s light, super flexible, and built to deliver high performance without losing its stylish touch.\u003C/p>\u003Ch2>Why Choose Tremor?\u003C/h2>\u003Ch3>1. Pre-Built Components\u003C/h3>\u003Cp>Tremor comes with a wide range of ready-made components like tables, charts, cards, and forms. These building blocks are fully customizable and can be tailored to match your project’s branding and aesthetic. You no longer need to reinvent the wheel when building a dashboard from scratch.\u003C/p>\u003Ch3>2. Tailwind CSS Compatibility\u003C/h3>\u003Cp>Tailwind CSS is known for its flexibility and speed in building user interfaces. Tremor leverages this by offering components designed to work flawlessly with Tailwind. This means you can customize your dashboard to an incredible level of detail without writing endless lines of CSS.\u003C/p>\u003Ch3>3. \u003Cstrong>Open Source and Free\u003C/strong>\u003C/h3>\u003Cp>Open-source projects like Tremor are a breath of fresh air for developers. The fact that Tremor is free to use makes it accessible for individuals and teams alike. Plus, being open-source means you can contribute to its growth and even adapt it for your own unique use cases.\u003C/p>\u003Ch3>4. \u003Cstrong>Ease of Use\u003C/strong>\u003C/h3>\u003Cp>The library is developer-friendly, with clear documentation and examples that make onboarding a smooth process. Even if you’re relatively new to React, Tremor’s intuitive setup ensures you’ll get up and running in no time.\u003C/p>\u003Ch3>5. \u003Cstrong>Focus on Performance\u003C/strong>\u003C/h3>\u003Cp>Performance is critical for dashboards, especially when dealing with real-time data. Tremor’s components are optimized to handle large datasets and dynamic updates, ensuring smooth performance across devices.\u003C/p>\u003Ch2>Key Features of Tremor\u003C/h2>\u003Ch3>1. Charts and Visualizations\u003C/h3>\u003Cp>Tremor’s library includes stunning charts that are easy to implement. Whether you need bar graphs, line charts, or pie charts, you’ll find something that fits your needs. These charts are interactive, responsive, and customizable, making them perfect for any kind of data visualization.\u003C/p>\u003Ch3>2. \u003Cstrong>Data Integration\u003C/strong>\u003C/h3>\u003Cp>One of Tremor’s strengths is its ability to handle complex datasets. The components are designed to work with a variety of data sources, ensuring flexibility and adaptability for different projects.\u003C/p>\u003Ch3>3. Lightweight Design\u003C/h3>\u003Cp>Despite its rich feature set, Tremor remains lightweight. This ensures fast load times and smooth user experiences, even on devices with limited resources.\u003C/p>\u003Ch3>4. Customizable Themes\u003C/h3>\u003Cp>Tremor allows you to create themes that align with your brand’s identity. From color schemes to typography, you can adjust every aspect to ensure your dashboards look exactly the way you want.\u003C/p>\u003Ch3>5. Developer-Friendly API\u003C/h3>\u003Cp>The API is straightforward, allowing developers to create powerful dashboards without a steep learning curve. With clear documentation and examples, Tremor ensures that both beginners and experienced developers can use it effectively.\u003C/p>\u003Ch2>Real-World Use Cases\u003C/h2>\u003Cp>Tremor’s versatility makes it suitable for a wide range of applications. Here are just a few examples:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>E-Commerce Dashboards:\u003C/strong> Track sales, monitor inventory, and analyze customer behavior with ease.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Marketing Analytics:\u003C/strong> Visualize campaign performance, track KPIs, and monitor traffic sources.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Operations Management:\u003C/strong> Monitor supply chain logistics, employee productivity, and workflow efficiency.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Financial Tracking:\u003C/strong> Analyze revenue streams, expenses, and budget forecasts.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Whether you’re building a personal project or developing a product for thousands of users, Tremor’s adaptability ensures it can handle the task.\u003C/p>\u003Ch2>Getting Started with Tremor\u003C/h2>\u003Ch4>1. \u003Cstrong>Installation\u003C/strong>\u003C/h4>\u003Cp>Getting started with Tremor is as simple as running a few commands. Here’s how to install it in your React project:\u003C/p>\u003Cpre>\u003Ccode>npm install @tremor/react\u003C/code>\u003C/pre>\u003Ch4>2. \u003Cstrong>Import and Use Components\u003C/strong>\u003C/h4>\u003Cp>Once installed, you can begin importing components directly into your project. For example:\u003C/p>\u003Cpre>\u003Ccode>import { Card, BarChart } from "@tremor/react";\n\nfunction Dashboard() {\n  return (\n    <Card>\n      <BarChart data={data} options={options} />\n    </Card>\n  );\n}\u003C/code>\u003C/pre>\u003Ch4>3. \u003Cstrong>Customization\u003C/strong>\u003C/h4>\u003Cp>Tremor’s components are fully customizable, allowing you to tweak styles and functionality to meet your specific requirements. With Tailwind CSS, you have even more control over the appearance of your dashboards.\u003C/p>\u003Ch2>The Community and Support\u003C/h2>\u003Cp>One of the best things about open-source tools is the community behind them. Tremor is supported by Vercel’s ecosystem, which includes extensive documentation, forums, and community contributions. Whether you’re troubleshooting an issue or looking for inspiration, you’re never far from help.\u003C/p>\u003Cp>Additionally, the active development of Tremor means new features and improvements are continually being added. By choosing Tremor, you’re investing in a tool that’s built to grow with your needs.\u003C/p>\u003Ch3>Final Thoughts\u003C/h3>\u003Cp>Tremor by Vercel is more than just a library; it’s a game-changer for dashboard development. With its rich set of features, seamless integration with Tailwind CSS, and developer-friendly design, it’s a tool that makes creating dashboards enjoyable and efficient. Whether you’re an individual developer or part of a team, Tremor’s versatility and performance ensure it’s up to the task.\u003C/p>\u003Cp>So, if you’re tired of wrestling with complex setups and want to focus on what really matters — delivering actionable insights — give Tremor a try. You’ll be amazed at how much it can simplify your workflow!\u003C/p>","https://dashboard.tremor.so/overview",[1663],{"id":552,"title":553,"slug":554},"Tremor: Vercel's React Library for Dashboard Components",[1666,1667],{"id":1160,"title":1161,"slug":1162},{"id":26,"title":27,"slug":28},"https://www.tremor.so/","47+ React UI Components for Tailwind CSS","Discover Tremor by Vercel, an open-source React library with 35+ components and 300 blocks to streamline your dashboard development.",[484,491],[552],[1160,26],"content:components:349.json","components/349.json","components/349",{"_path":1678,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1679,"type":49,"title":1680,"slug":1681,"published_at":1682,"order":1683,"created_at":1682,"updated_at":1684,"faqs":1685,"tags":1686,"color":1697,"cover":1698,"images":1699,"is_hot":6,"content":32,"is_paid":48,"demo_url":1700,"features":1701,"seo_title":1680,"categories":1705,"target_url":1700,"description":1709,"is_featured":6,"is_free_listing":48,"seo_description":1709,"tags_ids":1710,"features_ids":1711,"categories_ids":1712,"_id":1713,"_type":19,"_source":20,"_file":1714,"_stem":1715,"_extension":19},"/components/329",329,"Flowbite","flowbite","2023-03-11 13:02:04",71,"2026-03-02 20:10:42",[],[1687,1688,1692,1693,1694,1695,1696],{"id":1043,"title":1044,"slug":1045},{"id":1689,"title":1690,"slug":1691},196,"Nuxt.js","nuxtjs",{"id":488,"title":489,"slug":167},{"id":954,"title":955,"slug":956},{"id":1048,"title":1049,"slug":1050},{"id":491,"title":249,"slug":250},{"id":865,"title":170,"slug":171},{"id":1139,"title":1140,"slug":1140},"/flowbite.png",[],"https://flowbite.com/",[1702,1703,1704],{"id":1008,"title":1009,"slug":187},{"id":1152,"title":1153,"slug":1154},{"id":785,"title":786,"slug":787},[1706,1707,1708],{"id":1160,"title":1161,"slug":1162},{"id":26,"title":27,"slug":28},{"id":506,"title":507,"slug":508},"450+ UI components for Tailwind CSS",[1043,1689,488,954,1048,491,865],[1008,1152,785],[1160,26,506],"content:components:329.json","components/329.json","components/329",{"_path":1717,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1718,"type":49,"title":1719,"slug":1720,"published_at":1721,"order":1722,"created_at":1721,"updated_at":1723,"faqs":1724,"tags":1725,"color":1727,"cover":1728,"images":1729,"is_hot":6,"content":1730,"is_paid":6,"demo_url":1731,"features":1732,"seo_title":1734,"categories":1735,"target_url":1731,"description":1739,"is_featured":6,"is_free_listing":6,"seo_description":1740,"tags_ids":1741,"features_ids":1742,"categories_ids":1743,"_id":1744,"_type":19,"_source":20,"_file":1745,"_stem":1746,"_extension":19},"/components/403",403,"buttons.ibelick","buttonsibelick","2024-02-01 23:01:07",91,"2026-03-02 21:03:18",[],[1726],{"id":865,"title":170,"slug":171},{"id":579,"title":580,"slug":580},"/tailwind-css-button-components.png",[],"\u003Cp>A collection of 52 Tailwind CSS buttons. Integrating them by copy-pasting is easy, no js required.\u003C/p>","https://buttons.ibelick.com/",[1733],{"id":785,"title":786,"slug":787},"buttons.ibelick | Tailwind Button Components",[1736,1737,1738],{"id":1552,"title":1553,"slug":1554},{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"52 Free to use Tailwind buttons","A collection of 52 Tailwind CSS buttons. Integrating them by copy-pasting is easy, no js required.",[865],[785],[1552,506,26],"content:components:403.json","components/403.json","components/403",{"_path":1748,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1749,"type":49,"title":1750,"slug":1751,"published_at":1752,"order":1753,"created_at":1752,"updated_at":1754,"faqs":1755,"tags":1756,"color":1761,"cover":1762,"images":1763,"is_hot":6,"content":1764,"is_paid":6,"demo_url":1765,"features":1766,"seo_title":1768,"categories":1769,"target_url":1765,"description":1772,"is_featured":6,"is_free_listing":6,"seo_description":1773,"tags_ids":1774,"features_ids":1775,"categories_ids":1776,"_id":1777,"_type":19,"_source":20,"_file":1778,"_stem":1779,"_extension":19},"/components/402",402,"David UI","david-ui","2024-02-01 22:43:46",92,"2026-03-02 21:09:26",[],[1757,1758,1759,1760],{"id":954,"title":955,"slug":956},{"id":1048,"title":1049,"slug":1050},{"id":491,"title":249,"slug":250},{"id":865,"title":170,"slug":171},{"id":579,"title":580,"slug":580},"/david-ui.png",[],"\u003Cp>\u003Cstrong>TL;DR:\u003C/strong> David UI is a free, MIT-licensed component library by Creative Tim. It ships 300+ Tailwind CSS components, 290+ pre-built UI blocks, an AI page generator, and Figma design files - all without a login. Copy-paste and go.\u003C/p>\u003Ch2>What Is David UI?\u003C/h2>\u003Cp>David UI is an open-source UI component library built on top of Tailwind CSS, created by Creative Tim - the team behind some of the most downloaded UI kits in the developer space (8.6M+ cumulative downloads). The library is fully free, requires no account, and comes under the MIT license.\u003C/p>\u003Cp>The core idea is simple: stop writing the same buttons, navbars, and forms from scratch. David UI gives you a catalog of ready-to-drop-in components and full UI sections, so you can focus on building the actual product. It currently supports HTML natively, with React, Next.js, Vue, and Angular support on the roadmap.\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>300+ Tailwind CSS Components\u003C/strong> - Buttons, modals, cards, navbars, forms, tables, and everything in between\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>290+ Pre-built UI Blocks\u003C/strong> - Complete sections (hero, pricing, dashboard, e-commerce) ready to drop into a page\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>AI Pages Generator\u003C/strong> - Generate full landing pages and dashboards with Tailwind CSS code via Creative AI\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma Integration\u003C/strong> - Full Figma library with design tokens, variables, and auto-layouts\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Copy-paste workflow\u003C/strong> - No CLI setup, no configuration. Grab the code, paste it, and ship\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Framework-agnostic\u003C/strong> - Works with HTML, React, Vue, Angular, and any Tailwind CSS setup\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>MIT License\u003C/strong> - Free for personal and commercial use with zero restrictions\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>TypeScript support\u003C/strong> - Components can be used programmatically with full TypeScript types\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>CDN available\u003C/strong> - Include via JSDelivr CDN or install via npm depending on your workflow\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Responsive by default\u003C/strong> - All components are built with mobile-first Tailwind classes\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cp>David UI currently ships 28+ component types across its HTML library, with more on the roadmap:\u003C/p>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Form elements:\u003C/strong> Input, Textarea, Checkbox, Radio Button, Switch\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Navigation:\u003C/strong> Navbar, Sidebar, Breadcrumbs, Pagination, Tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Feedback:\u003C/strong> Alerts, Spinner, Progress Bar, Rating Bar, Tooltip, Popover\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Layout:\u003C/strong> Cards, Accordion, List, Table, Timeline, Footer\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Interactive:\u003C/strong> Buttons, Button Group, Icon Button, Stepper, Chips/Badges, Avatar\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Media:\u003C/strong> Image, Video\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Typography:\u003C/strong> Full heading hierarchy (H1-H6), body text, lead text, small text with color variants\u003C/p>\u003C/li>\u003C/ul>\u003Cp>The PRO tier (David UI PRO via Creative AI) adds marketing blocks, e-commerce UI, and application blocks beyond the free set.\u003C/p>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Completely free, forever - no paywall, no freemium tricks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Huge component coverage for a free library (300+ components is genuinely impressive)\u003C/p>\u003C/li>\u003Cli>\u003Cp>AI page generator is a standout feature not seen in most free libraries\u003C/p>\u003C/li>\u003Cli>\u003Cp>Figma files included - great for design-developer handoff\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT license means you can use it in client work and commercial products without worrying\u003C/p>\u003C/li>\u003Cli>\u003Cp>Clean, modern aesthetics that don't look like generic boilerplate\u003C/p>\u003C/li>\u003Cli>\u003Cp>CDN option lowers the barrier to entry for HTML-only projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>Backed by Creative Tim's reputation and a community of 2.6M+ developers\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>React, Next.js, Vue, and Angular support is still "Coming Soon" as of early 2025\u003C/p>\u003C/li>\u003Cli>\u003Cp>The AI generator is a separate tool (Creative AI), not embedded directly into the component docs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dark mode is also still on the roadmap, not available yet\u003C/p>\u003C/li>\u003Cli>\u003Cp>Fewer interactive JavaScript-heavy components compared to more mature libraries like Flowbite or daisyUI\u003C/p>\u003C/li>\u003Cli>\u003Cp>Documentation, while clean, is still maturing compared to long-established alternatives\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>HTML\u003C/strong> - Native support via copy-paste or CDN script tag\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>npm\u003C/strong> - Install \u003Ccode>david-ai\u003C/code> package for modular ESM imports\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>React\u003C/strong> - Planned (coming soon via roadmap)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Vue / Angular\u003C/strong> - Planned in a future roadmap step\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Next.js\u003C/strong> - Planned, listed in framework integrations\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS v3\u003C/strong> - Required as a peer dependency; all components use Tailwind utility classes\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Figma\u003C/strong> - Full design library available on Figma Community\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>TypeScript\u003C/strong> - Full TypeScript support for programmatic component initialization\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>CDN (JSDelivr)\u003C/strong> - Drop-in script tag for zero-build workflows\u003C/p>\u003C/li>\u003C/ul>","https://www.creative-tim.com/david-ui",[1767],{"id":785,"title":786,"slug":787},"David UI | 300+ Free Tailwind CSS Components",[1770,1771],{"id":1160,"title":1161,"slug":1162},{"id":26,"title":27,"slug":28},"300+ copy-paste Tailwind CSS UI components","Build faster with David UI, 300+ Tailwind CSS components, 290+ UI blocks, Figma files, and MIT license. Free forever, no signup needed.",[954,1048,491,865],[785],[1160,26],"content:components:402.json","components/402.json","components/402",{"_path":1781,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1782,"type":49,"title":1783,"slug":1784,"published_at":1785,"order":1786,"created_at":1785,"updated_at":1787,"faqs":1788,"tags":1800,"color":1803,"cover":1804,"images":1805,"is_hot":6,"content":1806,"is_paid":6,"demo_url":1807,"features":1808,"seo_title":1812,"categories":1813,"target_url":1807,"description":1817,"is_featured":6,"is_free_listing":6,"seo_description":1818,"tags_ids":1819,"features_ids":1820,"categories_ids":1821,"_id":1822,"_type":19,"_source":20,"_file":1823,"_stem":1824,"_extension":19},"/components/317",317,"Headless UI","headless-ui","2023-03-09 20:20:47",94,"2026-03-02 21:41:06",[1789,1792,1794,1797],{"title":1790,"content":1791},"What makes Headless UI different from other libraries?","It separates logic from styling, giving you full control over the markup and CSS while handling accessibility under the hood.",{"title":150,"content":1793},"Official packages exist for React (@headlessui/react) and Vue (@headlessui/vue)",{"title":1795,"content":1796},"How do I style Headless UI components?","You write your own CSS or Tailwind utility classes around the unstyled primitives provided.",{"title":1798,"content":1799},"Is Headless UI production-ready?","Yes—it's battle-tested by Tailwind Labs with thousands of users and regular updates.",[1801,1802],{"id":1048,"title":1049,"slug":1050},{"id":491,"title":249,"slug":250},{"id":662,"title":663,"slug":663},"/headless-ui.jpg",[],"\u003Cp>\u003Cimg src=\"/headless-ui-dropdown-menu-2.png\" alt=\"Headless UI Dropdown Menu\">\u003C/p>\u003Ch2>What Is Headless UI?\u003C/h2>\u003Cp>Headless UI is a library of completely unstyled, fully accessible UI components designed to give you the interaction logic without imposing any styles. You bring your own HTML and CSS (often Tailwind), and Headless UI handles focus management, keyboard interactions, and ARIA attributes.\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Zero Styling Out of the Box\u003C/strong>: Components ship without CSS, so you control every pixel.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Built-in Accessibility\u003C/strong>: Implements WAI-ARIA roles and keyboard navigation by default.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>React & Vue Support\u003C/strong>: Official packages for both frameworks keep APIs consistent.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Seamless Tailwind CSS Integration\u003C/strong>: Designed to pair perfectly with Tailwind utility classes.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Lightweight & Modular\u003C/strong>: Import only the components you need to minimize bundle size.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Components 📒\u003C/h2>\u003Cp>Headless UI provides a suite of core primitives, including:\u003C/p>\u003Cul>\u003Cli>\u003Cp>Menu (Dropdown)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Listbox (Select)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Combobox (Autocomplete)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dialog (Modal)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Popover\u003C/p>\u003C/li>\u003Cli>\u003Cp>Switch (Toggle)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Disclosure (Accordion)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Radio Group\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Transition (Animation helper)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Cp>\u003Cstrong>Pros ✅\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Full control over styling and markup.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Accessibility concerns handled for you.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Consistent API across React and Vue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Small, focused packages minimize overhead.\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Cons ⚠️\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>No built-in theme or design—beginners must write all CSS.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Learning curve for accessibility-focused props.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Limited to the components provided—less comprehensive than full UI kits.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Integration\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Install\u003C/strong>: \u003Ccode>npm install @headlessui/react\u003C/code> or \u003Ccode>@headlessui/vue\u003C/code>.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Import\u003C/strong>: Bring in only the primitives you need (e.g., \u003Ccode>import { Menu } from '@headlessui/react'\u003C/code>).\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>HTML Structure\u003C/strong>: Build your own markup and apply Tailwind classes.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Accessibility Props\u003C/strong>: Use provided hooks/props (e.g., \u003Ccode>Menu.Button\u003C/code>, \u003Ccode>Menu.Items\u003C/code>) for ARIA roles.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Customization\u003C/strong>: Extend behaviors with custom transitions or utility-first classes\u003C/p>\u003C/li>\u003C/ul>","https://headlessui.com/",[1809,1810,1811],{"id":552,"title":553,"slug":554},{"id":785,"title":786,"slug":787},{"id":789,"title":190,"slug":191},"Headless UI: Tailwind-Ready UI Primitives",[1814,1815,1816],{"id":506,"title":507,"slug":508},{"id":745,"title":746,"slug":747},{"id":26,"title":27,"slug":28},"16 React & Vue UI components","Completely unstyled, fully accessible UI components that integrate seamlessly with Tailwind CSS for React and Vue applications.",[1048,491],[552,785,789],[506,745,26],"content:components:317.json","components/317.json","components/317",{"_path":1826,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1827,"type":49,"title":1828,"slug":1829,"published_at":1830,"order":1831,"created_at":1830,"updated_at":1832,"faqs":1833,"tags":1834,"color":1835,"cover":1836,"images":1837,"is_hot":6,"content":1838,"is_paid":6,"demo_url":1839,"features":1840,"seo_title":1849,"categories":1850,"target_url":1853,"description":1854,"is_featured":6,"is_free_listing":6,"seo_description":1855,"tags_ids":1856,"features_ids":1857,"categories_ids":1858,"_id":1859,"_type":19,"_source":20,"_file":1860,"_stem":1861,"_extension":19},"/components/384",384,"Meraki UI","meraki-ui","2023-09-30 12:23:50",104,"2026-03-02 21:39:04",[],[],{"id":579,"title":580,"slug":580},"/meraki-ui.webp",[],"\u003Ch2>Meraki Tailwind CSS Components\u003C/h2>\u003Cp>Free Tailwind CSS Alert, Heroes, features, sign up forms, CTA, and everything you need to build your websites fast with RTL Languages Support.\u003C/p>\u003Ch2>Application UI Components\u003C/h2>\u003Col>\u003Cli>\u003Cp>Alerts\u003C/p>\u003C/li>\u003Cli>\u003Cp>Avatars\u003C/p>\u003C/li>\u003Cli>\u003Cp>Breadcrumbs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Buttons\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cards\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cookies\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dropdowns\u003C/p>\u003C/li>\u003Cli>\u003Cp>Forms\u003C/p>\u003C/li>\u003Cli>\u003Cp>Inputs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Modals\u003C/p>\u003C/li>\u003Cli>\u003Cp>Navbars\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pagination\u003C/p>\u003C/li>\u003Cli>\u003Cp>Sidebar\u003C/p>\u003C/li>\u003Cli>\u003Cp>Sign in and Registration\u003C/p>\u003C/li>\u003Cli>\u003Cp>Skeleton\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tables\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tooltip\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Marketing UI Components\u003C/h2>\u003Col>\u003Cli>\u003Cp>404 Pages\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blog\u003C/p>\u003C/li>\u003Cli>\u003Cp>CTA\u003C/p>\u003C/li>\u003Cli>\u003Cp>Contact\u003C/p>\u003C/li>\u003Cli>\u003Cp>Email Templates\u003C/p>\u003C/li>\u003Cli>\u003Cp>FAQ\u003C/p>\u003C/li>\u003Cli>\u003Cp>Features\u003C/p>\u003C/li>\u003Cli>\u003Cp>Footers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Heros\u003C/p>\u003C/li>\u003Cli>\u003Cp>Portfolio\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pricing\u003C/p>\u003C/li>\u003Cli>\u003Cp>Teams\u003C/p>\u003C/li>\u003Cli>\u003Cp>Testimonials\u003C/p>\u003C/li>\u003C/ol>","https://merakiui.com/components/application-ui/cards",[1841,1845,1846,1847,1848],{"id":1842,"title":1843,"slug":1844},206,"RTL support","rtl-support",{"id":1008,"title":1009,"slug":187},{"id":827,"title":828,"slug":829},{"id":785,"title":786,"slug":787},{"id":1506,"title":1507,"slug":1508},"Meraki UI Tailwind CSS Components",[1851,1852],{"id":1160,"title":1161,"slug":1162},{"id":26,"title":27,"slug":28},"https://merakiui.com/","250+ Free Application and Marketing Tailwind CSS UI Components","Meraki UI is a collection of responsive Tailwind CSS components that enhance the user experience of your website. with support for RTL languages, and a sleek Dark Mode.",[],[1842,1008,827,785,1506],[1160,26],"content:components:384.json","components/384.json","components/384",{"_path":1863,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1864,"type":49,"title":1865,"slug":1866,"published_at":1867,"order":1868,"created_at":1867,"updated_at":1869,"faqs":1870,"tags":1871,"color":1874,"cover":1875,"images":1876,"is_hot":6,"content":1877,"is_paid":6,"demo_url":1878,"features":1879,"seo_title":1883,"categories":1884,"target_url":1887,"description":1888,"is_featured":6,"is_free_listing":6,"seo_description":1889,"tags_ids":1890,"features_ids":1891,"categories_ids":1892,"_id":1893,"_type":19,"_source":20,"_file":1894,"_stem":1895,"_extension":19},"/components/377",377,"Pines","pines","2023-07-24 11:52:14",105,"2026-03-02 21:40:31",[],[1872,1873],{"id":1185,"title":1186,"slug":1187},{"id":865,"title":170,"slug":171},{"id":579,"title":580,"slug":580},"/pines-alpine-ui-library.png",[],"\u003Ch2>Introduction\u003C/h2>\u003Cp>27+ UI elements and components built on top of Alpine.js and Tailwind CSS to create lightweight and clean websites and web applications.\u003C/p>\u003Ch2>Features\u003C/h2>\u003Cp>Pines UI Library offers the following features:\u003C/p>\u003Col>\u003Cli>\u003Cp>27+ UI Elements with Tailwind CSS and Alpine.js included\u003C/p>\u003C/li>\u003Cli>\u003Cp>80+ HTML sections and components\u003C/p>\u003C/li>\u003Cli>\u003Cp>One Click Copy & Paste feature\u003C/p>\u003C/li>\u003Cli>\u003Cp>Free to use\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Included Elements\u003C/h2>\u003Cp>Pines is a versatile library consisting of animations, sliders, tooltips, accordions, modals, and various other UI elements. It offers a collection of ready-to-use components that can be easily integrated into any Alpine and Tailwind projects with simple copy and paste functionality.\u003C/p>\u003Col>\u003Cli>\u003Cp>accordion\u003C/p>\u003C/li>\u003Cli>\u003Cp>alert\u003C/p>\u003C/li>\u003Cli>\u003Cp>badge\u003C/p>\u003C/li>\u003Cli>\u003Cp>banner\u003C/p>\u003C/li>\u003Cli>\u003Cp>breadcrumbs\u003C/p>\u003C/li>\u003Cli>\u003Cp>button\u003C/p>\u003C/li>\u003Cli>\u003Cp>card\u003C/p>\u003C/li>\u003Cli>\u003Cp>checkbox\u003C/p>\u003C/li>\u003Cli>\u003Cp>command\u003C/p>\u003C/li>\u003Cli>\u003Cp>context-menu\u003C/p>\u003C/li>\u003Cli>\u003Cp>copy-to-clipboard\u003C/p>\u003C/li>\u003Cli>\u003Cp>date-picker\u003C/p>\u003C/li>\u003Cli>\u003Cp>dropdown-menu\u003C/p>\u003C/li>\u003Cli>\u003Cp>full-screen-modal\u003C/p>\u003C/li>\u003Cli>\u003Cp>hover-card\u003C/p>\u003C/li>\u003Cli>\u003Cp>image-gallery\u003C/p>\u003C/li>\u003Cli>\u003Cp>menubar\u003C/p>\u003C/li>\u003Cli>\u003Cp>modal\u003C/p>\u003C/li>\u003Cli>\u003Cp>monaco-editor\u003C/p>\u003C/li>\u003Cli>\u003Cp>navigation-menu\u003C/p>\u003C/li>\u003Cli>\u003Cp>pagination\u003C/p>\u003C/li>\u003Cli>\u003Cp>popover\u003C/p>\u003C/li>\u003Cli>\u003Cp>progress\u003C/p>\u003C/li>\u003Cli>\u003Cp>quotes\u003C/p>\u003C/li>\u003Cli>\u003Cp>radio-group\u003C/p>\u003C/li>\u003Cli>\u003Cp>range-slider\u003C/p>\u003C/li>\u003Cli>\u003Cp>select\u003C/p>\u003C/li>\u003Cli>\u003Cp>slide-over\u003C/p>\u003C/li>\u003Cli>\u003Cp>switch\u003C/p>\u003C/li>\u003Cli>\u003Cp>table\u003C/p>\u003C/li>\u003Cli>\u003Cp>tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>text-animation\u003C/p>\u003C/li>\u003Cli>\u003Cp>text-input\u003C/p>\u003C/li>\u003Cli>\u003Cp>textarea\u003C/p>\u003C/li>\u003Cli>\u003Cp>textarea-auto-resize\u003C/p>\u003C/li>\u003Cli>\u003Cp>tooltip\u003C/p>\u003C/li>\u003Cli>\u003Cp>typing-effect\u003C/p>\u003C/li>\u003Cli>\u003Cp>video\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Col>\u003Cli>\u003Cp>If you are willing to pay $15/month you also get access to Tailwind Page Builder and extend Component Library\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pre-built UI elements is working great.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pre-built UI components if you willing to pay extra\u003C/p>\u003C/li>\u003Cli>\u003Cp>Seamless AlpineJS integration\u003C/p>\u003C/li>\u003C/ol>\u003Ch3>Cons ⛔️\u003C/h3>\u003Col>\u003Cli>\u003Cp>Image Gallery components is not working properly.\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Who is Pines UI Library UI Kit for?\u003C/h2>\u003Cp>The Pines UI Library offers an outstanding value proposition, especially for individuals who prefer lightweight frameworks like Alpine.js for quicker project delivery and effortless editing capabilities. It empowers developers with a rich set of UI components, enabling them to streamline their workflow and create responsive and dynamic web projects efficiently.\u003C/p>\u003Ch2>What do people say?\u003C/h2>\u003Cp>The developers behind the Pines UI library could have chosen to place it behind a paywall, and it's evident that such a decision could have been profitable. However, I deeply admire and respect their choice to make the library publicly accessible to all. It reflects their commitment to the development community and their willingness to contribute to the broader advancement of web development.\u003C/p>\u003Cp>Yucel Faruk Sahan / maker of Tailkits.com and Landing Page FYI\u003C/p>","https://devdojo.com/pines/docs/accordion",[1880,1881,1882],{"id":827,"title":828,"slug":829},{"id":1197,"title":1198,"slug":1199},{"id":785,"title":786,"slug":787},"Pines Alpine Tailwind UI Library",[1885,1886],{"id":1160,"title":1161,"slug":1162},{"id":26,"title":27,"slug":28},"https://devdojo.com/pines","Free Tailwind & Alpine component library","Pines is a versatile library consisting of animations, sliders, tooltips, accordions, modals, and various other UI elements. It offers a collection of ready-to-use components that can be easily integrated into any Alpine and Tailwind projects with simple copy and paste functionality.",[1185,865],[827,1197,785],[1160,26],"content:components:377.json","components/377.json","components/377",{"_path":1897,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1898,"type":49,"title":1899,"slug":1900,"published_at":1901,"order":1902,"created_at":1901,"updated_at":1903,"faqs":1904,"tags":1905,"color":1907,"cover":1908,"images":1909,"is_hot":6,"content":32,"is_paid":6,"demo_url":1910,"features":1911,"seo_title":1914,"categories":1915,"target_url":1910,"description":1919,"is_featured":6,"is_free_listing":6,"seo_description":1919,"tags_ids":1920,"features_ids":1921,"categories_ids":1922,"_id":1923,"_type":19,"_source":20,"_file":1924,"_stem":1925,"_extension":19},"/components/376",376,"ui.ibelick","uiibelick","2023-07-03 22:34:44",106,"2026-03-02 21:44:14",[],[1906],{"id":491,"title":249,"slug":250},{"id":1383,"title":1384,"slug":1384},"/uiibelick-tailwind-css-components.png",[],"https://ui.ibelick.com/",[1912,1913],{"id":1008,"title":1009,"slug":187},{"id":785,"title":786,"slug":787},"ui.ibelick Tailwind CSS Components",[1916,1917,1918],{"id":1548,"title":1549,"slug":1550},{"id":1552,"title":1553,"slug":1554},{"id":26,"title":27,"slug":28},"18+ free React & Tailwind CSS UI Components",[491],[1008,785],[1548,1552,26],"content:components:376.json","components/376.json","components/376",{"_path":1927,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1928,"type":49,"title":1929,"slug":1930,"published_at":1931,"order":1932,"created_at":1931,"updated_at":1933,"faqs":1934,"tags":1935,"color":1939,"cover":1940,"images":1941,"is_hot":6,"content":1942,"is_paid":6,"demo_url":1943,"features":1944,"seo_title":1946,"categories":1947,"target_url":1949,"description":1950,"is_featured":6,"is_free_listing":6,"seo_description":1951,"tags_ids":1952,"features_ids":1953,"categories_ids":1954,"_id":1955,"_type":19,"_source":20,"_file":1956,"_stem":1957,"_extension":19},"/components/1820",1820,"Kometa","kometa","2025-05-14 13:05:37",111,"2026-03-02 21:01:19",[],[1936,1937,1938],{"id":1048,"title":1049,"slug":1050},{"id":491,"title":249,"slug":250},{"id":865,"title":170,"slug":171},{"id":579,"title":580,"slug":580},"/kometa.png",[],"\u003Ch2>What Is the Kometa UI Kit?\u003C/h2>\u003Cp>Kometa UI Kit is a free collection of over 130 pre-designed UI sections built with Tailwind CSS. It supports HTML, VueJS, and React, making it versatile for various web development projects. All components are fully responsive and can be used in unlimited personal and commercial projects.\u003C/p>\u003Cp>\u003Cimg src=\"/kometa-2.png\" alt=\"Kometa UI Kit - HERO\" title=\"Kometa UI Kit - Hero Section\" width=\"974\" height=\"474\">\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>130+ pre-built UI sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Fully responsive design\u003C/p>\u003C/li>\u003Cli>\u003Cp>Available in HTML, VueJS, and React\u003C/p>\u003C/li>\u003Cli>\u003Cp>Customizable Tailwind configuration\u003C/p>\u003C/li>\u003Cli>\u003Cp>Free for personal and commercial use\u003C/p>\u003C/li>\u003Cli>\u003Cp>No attribution required\u003C/p>\u003C/li>\u003Cli>\u003Cp>Modern and clean design\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Hero sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Feature highlights\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pricing tables\u003C/p>\u003C/li>\u003Cli>\u003Cp>Testimonials\u003C/p>\u003C/li>\u003Cli>\u003Cp>Call-to-action sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Contact forms\u003C/p>\u003C/li>\u003Cli>\u003Cp>Footers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Navigation bars\u003C/p>\u003C/li>\u003Cli>\u003Cp>FAQ sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blog\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Cp>\u003Cstrong>Pros ✅\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Completely free with no licensing fees\u003C/p>\u003C/li>\u003Cli>\u003Cp>Supports multiple frameworks (HTML, VueJS, React)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Easy to integrate and customize\u003C/p>\u003C/li>\u003Cli>\u003Cp>Suitable for a wide range of projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>Regular updates and community support\u003C/p>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>Cons ⚠️\u003C/strong>\u003C/p>\u003Cul>\u003Cli>\u003Cp>Built on Tailwind CSS v1.4.1, which may lack some newer features\u003C/p>\u003C/li>\u003Cli>\u003Cp>Not compatible with Internet Explorer 11\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cannot be used to create derivative UI kits or templates\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>HTML\u003C/strong>: Directly use the provided HTML snippets in your projects.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>VueJS\u003C/strong>: Integrate components as Vue single-file components.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>React\u003C/strong>: Utilize JSX versions of the components for React applications.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind Config\u003C/strong>: Customize the design by modifying the Tailwind configuration, including colors, fonts, and spacing.\u003C/p>\u003C/li>\u003C/ul>","https://kitwind.io/products/kometa/components/headers",[1945],{"id":785,"title":786,"slug":787},"Kometa: 130+ Tailwind UI Sections in HTML, Vue & React",[1948],{"id":26,"title":27,"slug":28},"https://kitwind.io/products/kometa","130+ Free Tailwind UI Sections","Kometa offers 130+ responsive UI sections for Tailwind CSS, available in HTML, Vue, and React. Ideal for personal and commercial projects.",[1048,491,865],[785],[26],"content:components:1820.json","components/1820.json","components/1820",{"_path":1959,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1960,"type":49,"title":1961,"slug":1962,"published_at":1963,"order":1964,"created_at":1963,"updated_at":1965,"faqs":1966,"tags":1967,"color":1971,"cover":1973,"images":1974,"is_hot":6,"content":1975,"is_paid":6,"demo_url":1976,"features":1977,"seo_title":1980,"categories":1981,"target_url":1976,"description":1984,"is_featured":6,"is_free_listing":6,"seo_description":1985,"tags_ids":1986,"features_ids":1987,"categories_ids":1988,"_id":1989,"_type":19,"_source":20,"_file":1990,"_stem":1991,"_extension":19},"/components/333",333,"Konsta UI","konsta-ui","2023-03-11 15:09:31",114,"2026-03-02 21:51:32",[],[1968,1969,1970],{"id":1043,"title":1044,"slug":1045},{"id":1048,"title":1049,"slug":1050},{"id":491,"title":249,"slug":250},{"id":1119,"title":1972,"slug":1972},"orange","/konsta-ui.png",[],"\u003Cdiv data-native-video=\"true\" class=\"responsive\">\u003Cvideo autoplay=\"true\" loop=\"true\" src=\"https://ik.imagekit.io/xtnuf7dvs/CleanShot%202025-11-27%20at%2001.50.41.mp4\" width=\"1600\" height=\"900\">\u003C/video>\u003C/div>\u003Ch2>TL;DR\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>What it is:\u003C/strong> Mobile focused UI component kit built with Tailwind CSS\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Frameworks:\u003C/strong> React, Vue, Svelte\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Themes:\u003C/strong> iOS 26 and Material Design 2025, light and dark modes\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Version:\u003C/strong> \u003Cstrong>v5.0.5\u003C/strong>, released \u003Cstrong>November 24, 2025\u003C/strong>\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>License:\u003C/strong> \u003Cstrong>MIT\u003C/strong>, free for commercial projects\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Best for:\u003C/strong> Teams building mobile apps with Ionic, Framework7, Capacitor or Cordova who want native like screens without designing from scratch\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>What is Konsta UI?\u003C/h2>\u003Cp>Konsta UI delivers ready-to-use mobile UI building blocks (buttons, navbars, lists, modals, etc.) for React, Vue and Svelte — styled in iOS or Material themes. It saves you from writing custom styles while keeping full Tailwind-based customization.\u003C/p>\u003Ch2>Key features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Pixel-perfect iOS and Material Design themes.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Built entirely with Tailwind CSS — easy to customize.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Support for React, Vue, and Svelte.\u003C/p>\u003C/li>\u003Cli>\u003Cp>MIT license — free for commercial use.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ready to integrate with hybrid app shells (e.g. Ionic or Framework7) — ideal for mobile apps with native feel.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros ✅\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Gives a native-like mobile UI out of the box.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Works across major JS frameworks (React / Vue / Svelte).\u003C/p>\u003C/li>\u003Cli>\u003Cp>Highly customizable via Tailwind.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Free and open-source under MIT license.\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2>Cons ⚠️\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Best suited for mobile — not ideal for desktop or marketing sites.\u003C/p>\u003C/li>\u003Cli>\u003Cp>It’s not a full app framework — you still need a shell (routing, navigation, native APIs) if you aim for a full mobile app.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Requires familiarity with Tailwind and your chosen JS framework.\u003C/p>\u003C/li>\u003C/ul>\u003Chr>\u003Ch2>Integration at a glance\u003C/h2>\u003Col start=\"1\">\u003Cli>\u003Cp>Install using npm: \u003Ccode>npm i konsta\u003C/code>.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Import components (React, Vue or Svelte) as needed.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Use with a framework/shell like Ionic or Framework7 for navigation & native APIs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Optionally, wrap with tools like Capacitor or Cordova to build real iOS/Android apps.\u003C/p>\u003C/li>\u003C/ol>","https://konstaui.com/",[1978,1979],{"id":552,"title":553,"slug":554},{"id":785,"title":786,"slug":787},"Konsta UI - iOS and Material Tailwind Mobile Kit",[1982,1983],{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"Mobile first Tailwind UI kit for React, Vue & Svelte","Konsta UI is a free Tailwind CSS library for pixel perfect iOS and Material mobile layouts in React, Vue and Svelte, ready for Ionic, Capacitor and Framework7. ",[1043,1048,491],[552,785],[506,26],"content:components:333.json","components/333.json","components/333",{"_path":1993,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":1994,"type":49,"title":1995,"slug":1996,"published_at":1997,"order":1998,"created_at":1997,"updated_at":1999,"faqs":2000,"tags":2001,"color":2004,"cover":2005,"images":2006,"is_hot":6,"content":2007,"is_paid":6,"demo_url":2008,"features":2009,"seo_title":2013,"categories":2014,"target_url":2016,"description":2017,"is_featured":6,"is_free_listing":6,"seo_description":2018,"tags_ids":2019,"features_ids":2020,"categories_ids":2021,"_id":2022,"_type":19,"_source":20,"_file":2023,"_stem":2024,"_extension":19},"/components/331",331,"Kutty","kutty","2023-03-11 13:24:11",115,"2026-03-02 21:51:52",[],[2002,2003],{"id":1048,"title":1049,"slug":1050},{"id":865,"title":170,"slug":171},{"id":579,"title":580,"slug":580},"/kutty-components.png",[],"\u003Ch2>What Is the Kutty?\u003C/h2>\u003Cp>Kutty is a Tailwind CSS plugin that provides a collection of accessible, reusable components for building web applications. It seamlessly integrates with Tailwind CSS v3+ and uses Alpine.js for any reactive behavior\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Wide Component Library:\u003C/strong> Ready-made elements like alerts, buttons, cards, modals, dropdowns, and more.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS Plugin:\u003C/strong> Simply add \u003Ccode>require("kutty")\u003C/code> to your \u003Ccode>tailwind.config.js\u003C/code>.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Alpine.js Bundled:\u003C/strong> Includes AlpineJS v2.8.0 for controllers, dropdowns, and dialogs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Fully Responsive & Accessible:\u003C/strong> Built with Tailwind’s utility classes to ensure mobile-first design and ARIA support.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cp>Kutty’s suite covers:\u003C/p>\u003Cul>\u003Cli>\u003Cp>Layouts & Navigation: Breadcrumbs, pagination, tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Feedback & Indicators: Alerts, toasts, spinners, progress bars\u003C/p>\u003C/li>\u003Cli>\u003Cp>Data & Forms: Forms, file inputs, lists, skeleton loaders\u003C/p>\u003C/li>\u003Cli>\u003Cp>Interactive Elements: Dialogs, drawers, dropdowns, tooltips\u003C/p>\u003C/li>\u003Cli>\u003Cp>UI Essentials: Buttons, cards, badges, avatars, typography .\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch4>Pros ✅\u003C/h4>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Lightweight & Modular:\u003C/strong> Installs via \u003Ccode>npm install kutty --save\u003C/code> and tree-shakes unused parts.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Accessible by Default:\u003C/strong> Follows ARIA guidelines and keyboard navigation.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Open Source & Free:\u003C/strong> 841 ⭐ on GitHub, MIT-licensed.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Easy Integration:\u003C/strong> Works with vanilla HTML, Alpine.js, and can be adapted for Vue with \u003Ccode>x-on:click\u003C/code> syntax.\u003C/p>\u003C/li>\u003C/ul>\u003Ch4>Cons ⚠️\u003C/h4>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Outdated:\u003C/strong> Last release (0.6.0) was on December 22, 2021, so the plugin hasn’t seen recent updates.\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Integration\u003C/h3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Install:\u003C/strong> \u003Ccode>npm install kutty --save\u003C/code> .\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Configure:\u003C/strong> Add to \u003Ccode>tailwind.config.js\u003C/code>:\u003C/p>\u003Cpre>\u003Ccode>\u003Ccode>plugins: [require("kutty")],\u003C/code>\u003C/code>\u003C/pre>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Add Scripts:\u003C/strong>\u003C/p>\u003Cpre>\u003Ccode>\u003Ccode><script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js"></script>\u003C/code>\u003C/code>\u003C/pre>\u003Cp>For single components, include AlpineJS then the component’s JS .\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Vue Usage:\u003C/strong> Rename \u003Ccode>@click\u003C/code> bindings to \u003Ccode>x-on:click\u003C/code> to avoid conflicts.\u003C/p>\u003C/li>\u003C/ul>","https://kutty.netlify.app/components/",[2010,2011,2012],{"id":552,"title":553,"slug":554},{"id":1152,"title":1153,"slug":1154},{"id":785,"title":786,"slug":787},"Kutty: Reusable Tailwind Plugin Library",[2015],{"id":26,"title":27,"slug":28},"https://kutty.netlify.app/","Accessible, responsive UI components for Tailwind projects\n","Integrate Kutty’s lightweight Tailwind plugin to access a library of responsive, accessible UI components for modern web apps.",[1048,865],[552,1152,785],[26],"content:components:331.json","components/331.json","components/331",{"_path":2026,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":2027,"type":49,"title":2028,"slug":2029,"published_at":2030,"order":2031,"created_at":2030,"updated_at":2032,"faqs":2033,"tags":2034,"color":2036,"cover":2037,"images":2038,"is_hot":6,"content":2039,"is_paid":6,"demo_url":2040,"features":2041,"seo_title":2043,"categories":2044,"target_url":2046,"description":2047,"is_featured":6,"is_free_listing":6,"seo_description":2048,"tags_ids":2049,"features_ids":2050,"categories_ids":2051,"_id":2052,"_type":19,"_source":20,"_file":2053,"_stem":2054,"_extension":19},"/components/324",324,"Flowrift","flowrift","2023-03-10 20:00:03",116,"2026-03-02 21:54:52",[],[2035],{"id":865,"title":170,"slug":171},{"id":579,"title":580,"slug":580},"/flowrift-ui-blocks.png",[],"\u003Ch2>What Is the Flowrift?\u003C/h2>\u003Cp>Flowrift is a curated library of beautifully designed Tailwind CSS UI blocks. It bundles everything from headers to footers into a streamlined web app where you can preview, copy, and customize each block in seconds.\u003C/p>\u003Ch2>Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Pre-Built Blocks:\u003C/strong> 80+ modular UI sections—from heroes and features to pricing and testimonials.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Default-Config Ready:\u003C/strong> Works out of the box with Tailwind CSS’s default setup.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Live Preview & Code View:\u003C/strong> Toggle between responsive preview and clean HTML code.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>One-Click Copy:\u003C/strong> Copy block markup instantly, then paste into your project.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Keyboard Shortcuts & Randomizer:\u003C/strong> Navigate blocks and discover new layouts with ease.\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Included Components 📒\u003C/h2>\u003Cul>\u003Cli>\u003Cp>Hero sections & banners\u003C/p>\u003C/li>\u003Cli>\u003Cp>Feature grids & icon lists\u003C/p>\u003C/li>\u003Cli>\u003Cp>Testimonials & team showcases\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pricing tables & comparison charts\u003C/p>\u003C/li>\u003Cli>\u003Cp>Contact forms & call-to-action modules\u003C/p>\u003C/li>\u003Cli>\u003Cp>Navbars, footers, and blog layouts\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch3>Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Extensive collection of versatile UI blocks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Fast, intuitive web app interface\u003C/p>\u003C/li>\u003Cli>\u003Cp>Zero setup—uses Tailwind’s default config\u003C/p>\u003C/li>\u003Cli>\u003Cp>Instant copy/paste workflow\u003C/p>\u003C/li>\u003Cli>\u003Cp>Responsive previews with dark/light support\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⚠️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Only HTML/vanilla CSS—no native React/Vue components\u003C/p>\u003C/li>\u003Cli>\u003Cp>Premium blocks require subscription\u003C/p>\u003C/li>\u003Cli>\u003Cp>Limited theming beyond Tailwind’s default palette\u003C/p>\u003C/li>\u003Cli>\u003Cp>No built-in state or interactivity (JS needed)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Integration\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Tailwind CSS:\u003C/strong> Simply include Tailwind and paste the HTML.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Frameworks:\u003C/strong> Adapt HTML into React, Vue, Svelte, or Next.js components.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Build Tools:\u003C/strong> Works with any bundler or CDN setup.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Design Systems:\u003C/strong> Layer Flowrift blocks into your own design tokens and theming.\u003C/p>\u003C/li>\u003C/ul>","https://flowrift.com/c/pricing/7ucMY?view=preview",[2042],{"id":785,"title":786,"slug":787},"Flowrift: Tailwind CSS UI Blocks Library",[2045],{"id":26,"title":27,"slug":28},"https://flowrift.com/c/footer","80+ ready-made Tailwind CSS components","Access Flowrift’s versatile Tailwind CSS UI kit with 80+ blocks, responsive previews, and one-click copy/paste for faster web development.",[865],[785],[26],"content:components:324.json","components/324.json","components/324",{"_path":2056,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":2057,"type":49,"title":2058,"slug":2059,"published_at":2060,"order":2061,"created_at":2060,"updated_at":2062,"faqs":2063,"tags":2076,"color":2078,"cover":2081,"images":2082,"is_hot":6,"content":2083,"is_paid":6,"demo_url":2084,"features":2085,"seo_title":2088,"categories":2089,"target_url":2084,"description":2091,"is_featured":6,"is_free_listing":6,"seo_description":2092,"tags_ids":2093,"features_ids":2094,"categories_ids":2095,"_id":2096,"_type":19,"_source":20,"_file":2097,"_stem":2098,"_extension":19},"/components/323",323,"Tailblocks","tailblocks","2023-03-10 19:51:53",117,"2026-03-02 21:55:02",[2064,2067,2070,2073],{"title":2065,"content":2066},"What is Tailblocks?","Tailblocks is a free collection of over 60 ready-to-use Tailwind CSS blocks that help speed up web development by providing prebuilt UI components.",{"title":2068,"content":2069},"How do I use Tailblocks?","Simply visit the Tailblocks website, choose a block you like, customize it with color and mode options, then copy and paste the provided HTML into your project.",{"title":2071,"content":2072},"What are the main benefits of Tailblocks?","It accelerates development, offers responsive design, is easy to integrate, and is completely free, making it ideal for quick prototyping and production.",{"title":2074,"content":2075},"Are there any limitations to Tailblocks?","Yes, the repository hasn’t been updated in several years, and it offers static HTML blocks without built-in interactivity, which might require extra customization for more complex projects.",[2077],{"id":865,"title":170,"slug":171},{"id":2079,"title":2080,"slug":2080},31,"sky","/tailblocks-5.png",[],"\u003Ch2>What Is Tailblocks?\u003C/h2>\u003Cp>\u003Cimg src=\"/tailblocks-2.png\" alt=\"Tailblocks Hero Component\" title=\"Tailblocks Hero Component\" width=\"900\" height=\"952\">\u003C/p>\u003Cp>Tailblocks is essentially a free collection of 60+ ready-to-use blocks built using Tailwind CSS. These blocks cover different parts of a typical website—everything from hero sections and testimonials to feature lists and footers. The idea is simple: instead of spending hours coding your layouts from scratch, you can simply choose a block you like, copy the HTML, and paste it into your project.\u003C/p>\u003Cp>One of the first things you notice about Tailblocks is its simplicity. The interface is straightforward, making navigating through the different blocks easy for anyone—even beginners.\u003C/p>\u003Ch2>Features\u003C/h2>\u003Cul>\u003Cli>\u003Cp>60+ Tailwind CSS Blocks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Customization Options Galore\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ready-to-Use Code\u003C/p>\u003C/li>\u003Cli>\u003Cp>Mobile-First and Responsive Design\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>How to use Tailblocks?\u003C/h2>\u003Cp>\u003Cimg src=\"/tailblocks-3.png\" alt=\"Tailblocks Hero Component Dark Mode\" title=\"Dark Mode Hero Component\" width=\"900\" height=\"947\">\u003C/p>\u003Cp>Let’s talk about the practical side of using Tailblocks. The process is as simple as it sounds:\u003C/p>\u003Col>\u003Cli>\u003Cp>\u003Cstrong>Visit the Website:\u003C/strong> Head over to the Tailblocks website where all the available blocks are showcased.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Choose a Block:\u003C/strong> Browse through the categories and pick the block that best fits your current design needs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Customize:\u003C/strong> Use the built-in options to adjust the color scheme and toggle between light and dark modes.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Copy and Paste:\u003C/strong> Click on the “View Code” button to reveal the HTML code, then copy it to your clipboard and paste it into your project.\u003C/p>\u003C/li>\u003C/ol>\u003Cp>This workflow is especially helpful for designers or developers who are looking to prototype ideas quickly. Instead of reinventing the wheel for every project, you can use Tailblocks as a starting point, then tweak the design as needed.\u003C/p>\u003Ch2>Pros and Cons\u003C/h2>\u003Cp>\u003Cimg src=\"/tailblocks-4.png\" alt=\"Tailblocks Pricing Component\" title=\"Tailblocks Pricing Component\" width=\"900\" height=\"958\">\u003C/p>\u003Ch3 id=\"pros\">Pros ✅\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Speeds up development with ready-made UI blocks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Free to use and simple to integrate\u003C/p>\u003C/li>\u003Cli>\u003Cp>Responsive design with mobile-first approach\u003C/p>\u003C/li>\u003Cli>\u003Cp>Offers multiple color options and dark/light mode support\u003C/p>\u003C/li>\u003Cli>\u003Cp>Clean, utility-first code based on Tailwind CSS\u003C/p>\u003C/li>\u003C/ul>\u003Ch3>Cons ⛔️\u003C/h3>\u003Cul>\u003Cli>\u003Cp>Last update made over 3 years ago\u003C/p>\u003C/li>\u003Cli>\u003Cp>Limited to static HTML blocks without built-in interactivity\u003C/p>\u003C/li>\u003Cli>\u003Cp>Not a complete web framework—requires additional integration for advanced features\u003C/p>\u003C/li>\u003Cli>\u003Cp>Customization may require extra effort beyond the provided blocks\u003C/p>\u003C/li>\u003Cli>\u003Cp>Inactive repository with some unresolved issues reported by users\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Final Thoughts\u003C/h2>\u003Cp>Tailblocks strikes a nice balance between simplicity and functionality. It’s not a magic bullet that solves every problem, but it certainly takes away a lot of the initial pain associated with web development.\u003C/p>","https://tailblocks.cc/",[2086,2087],{"id":1008,"title":1009,"slug":187},{"id":785,"title":786,"slug":787},"Tailblocks: 60+ Tailwind CSS Blocks",[2090],{"id":26,"title":27,"slug":28},"60+ customizable Tailwind CSS blocks","Discover Tailblocks – a free collection of 60+ responsive, customizable Tailwind CSS blocks for fast landing page creation and production-ready design.",[865],[1008,785],[26],"content:components:323.json","components/323.json","components/323",{"_path":2100,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":2101,"type":49,"title":2102,"slug":2103,"published_at":2104,"order":2105,"created_at":2104,"updated_at":2106,"faqs":2107,"tags":2120,"color":2122,"cover":2123,"images":2124,"is_hot":6,"content":2125,"is_paid":6,"demo_url":2126,"features":2127,"seo_title":2130,"categories":2131,"target_url":2133,"description":2134,"is_featured":6,"is_free_listing":6,"seo_description":2135,"tags_ids":2136,"features_ids":2137,"categories_ids":2138,"_id":2139,"_type":19,"_source":20,"_file":2140,"_stem":2141,"_extension":19},"/components/316",316,"daisyUI components","daisyui-components","2023-03-09 19:31:02",118,"2026-03-02 21:55:20",[2108,2111,2114,2117],{"title":2109,"content":2110},"What exactly is daisyUI?","It’s a free, open-source component library built on Tailwind CSS that offers pre-made, semantic classes.\n\n",{"title":2112,"content":2113},"How does daisyUI speed up development?","It cuts down on repetitive utility classes, leading to cleaner HTML and quicker prototyping.",{"title":2115,"content":2116},"Can I easily customize the components?","Yes, you can tailor styles using Tailwind’s utilities and a built-in theme generator.",{"title":2118,"content":2119},"Is it compatible with various frameworks?","Absolutely—it works with any framework or even plain HTML since it’s pure CSS.",[2121],{"id":865,"title":170,"slug":171},{"id":1255,"title":309,"slug":309},"/daisyui-components-3.png",[],"\u003Ch2>What Is daisyUI?\u003C/h2>\u003Cp>If you’ve ever felt overwhelmed by the endless list of utility classes in Tailwind CSS, daisyUI might be the solution you’ve been searching for. It’s a free, open-source library that builds on Tailwind CSS by offering a set of pre-defined, semantic class names for common UI components. Instead of manually writing 100 utility classes for every element, you can now use a simple class like \u003Ccode>btn\u003C/code> to create a button that not only looks good but is also easy to customize.\u003C/p>\u003Cp>daisyUI makes your HTML cleaner and your development process faster. The philosophy behind it is simple: let’s not re-invent the wheel for every project. Instead, leverage well-crafted components that you can adapt to your needs. Whether you’re working on a personal project or a larger commercial application, daisyUI provides the building blocks that help you focus on the unique parts of your design.\u003C/p>\u003Cdetails>\u003Csummary>Example Tailwind classes\u003C/summary>\u003Cdiv data-type=\"details-content\">\u003Cpre>\u003Ccode>\u003C/code>\u003C/pre>\u003Cdetails>\u003Csummary>\u003C/summary>\u003Cdiv data-type=\"details-content\">\u003Cpre>\u003Ccode>\u003Ccode><div class="w-80 rounded-2xl bg-gray-100">\n  <div class="flex flex-col gap-2 p-8">\n    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />\n    <label class="flex cursor-pointer items-center justify-between p-1">\n      Accept terms of use\n      <div class="relative inline-block">\n        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />\n        <span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>\n      </div>\n    </label>\n    <label class="flex cursor-pointer items-center justify-between p-1">\n      Submit to newsletter\n      <div class="relative inline-block">\n        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />\n        <span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>\n      </div>\n    </label>\n    <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Save</button>\n  </div>\n</div>\u003C/code>\u003C/code>\u003C/pre>\u003C/div>\u003C/details>\u003Cdetails>\u003Csummary>Example dasyUI classes\u003C/summary>\u003Cdiv data-type=\"details-content\">\u003Cpre>\u003Ccode>\u003Ccode><div class="card bg-base-200 w-80">\n  <div class="card-body">\n    <input placeholder="Email" class="input input-bordered" />\n    <label class="label cursor-pointer">\n      Accept terms of use\n      <input type="checkbox" class="toggle" />\n    </label>\n    <label class="label cursor-pointer">\n      Submit to newsletter\n      <input type="checkbox" class="toggle" />\n    </label>\n    <button class="btn btn-neutral">Save</button>\n  </div>\n</div>\u003C/code>\u003C/code>\u003C/pre>\u003C/div>\u003C/details>\u003C/div>\u003C/details>\u003Ch2>Why It Stands Out\u003C/h2>\u003Cp>One of the biggest pain points in front-end development is repetitive coding. With traditional Tailwind CSS, you’re often required to write numerous utility classes for each element, which can clutter your HTML and slow down development. daisyUI tackles this by offering over 55 pre-made components and more than 500 utility classes—all designed to work seamlessly with Tailwind.\u003C/p>\u003Cp>\u003Cimg src=\"/daisyui-components-2.png\" alt=\"HTML Size - Tailwind vs daisyUI\" title=\"HTML Size - Tailwind vs daisyUI\" width=\"900\" height=\"534\">\u003C/p>\u003Cp>This approach not only reduces the amount of code you write (some claim up to 80% fewer class names) but also results in a smaller DOM size. Cleaner code means easier maintenance, faster load times, and a more enjoyable coding experience.\u003C/p>\u003Ch2>Key Features and Benefits\u003C/h2>\u003Ch3>1. \u003Cstrong>Speedy Development\u003C/strong>\u003C/h3>\u003Cp>daisyUI is all about saving you time. With pre-defined classes like \u003Ccode>btn\u003C/code>, \u003Ccode>card\u003C/code>, and \u003Ccode>toggle\u003C/code>, you can prototype your interface in minutes instead of hours. The reduction in class names means you spend less time debugging and more time actually building out your application.\u003C/p>\u003Ch3>2. \u003Cstrong>Cleaner, Semantic HTML\u003C/strong>\u003C/h3>\u003Cp>The library promotes a more readable structure by replacing long strings of Tailwind utility classes with concise, semantic names. This makes your HTML easier to read, which is especially valuable when you or someone else revisits the code after some time.\u003C/p>\u003Ch3>3. \u003Cstrong>Easy Customization and Theming\u003C/strong>\u003C/h3>\u003Cp>Built on top of Tailwind, daisyUI lets you harness all the power of Tailwind’s utility classes. Want to round the corners of a button? Just add an extra utility class like \u003Ccode>rounded-full\u003C/code> on top of the base component. Moreover, daisyUI comes with a theme generator that allows you to define custom themes in seconds. This means you can easily change the overall look and feel of your website without rewriting large portions of your CSS.\u003C/p>\u003Ch3>4. \u003Cstrong>Pure CSS and Framework Agnostic\u003C/strong>\u003C/h3>\u003Cp>Unlike some libraries that come with hefty JavaScript bundles, daisyUI is a pure CSS plugin. It works seamlessly with any JavaScript framework—or even with plain HTML. This makes it incredibly lightweight and versatile, ensuring compatibility no matter what tech stack you’re using.\u003C/p>\u003Ch2>Installation and Setup\u003C/h2>\u003Cp>Getting started with daisyUI is a breeze. If you already have a Tailwind CSS project, you can simply install the library as a development dependency using npm:\u003C/p>\u003Cpre>\u003Ccode>npm i -D daisyui\u003C/code>\u003C/pre>\u003Cp>Once installed, add it to your Tailwind configuration, and you’re all set. The simplicity of the setup is one of the many reasons developers appreciate daisyUI—it integrates into your existing workflow without requiring a steep learning curve.\u003C/p>\u003Ch2>Customization and Theming in Detail\u003C/h2>\u003Cp>One of the major draws of daisyUI is how easy it is to customize. Because the components are built with Tailwind’s utility classes at their core, you have full control over how they appear. Need to adjust the padding, change the background color, or modify the border radius? Just add or override the utility classes as needed.\u003C/p>\u003Cp>The theme generator is another standout feature. It lets you pick your color palette and apply it across all components instantly. This built-in theming support ensures that every element on your website maintains a consistent look—whether you’re aiming for a modern, minimalist design or something more vibrant and bold.\u003C/p>\u003Cp>For instance, you might start with a default theme and then quickly switch to a custom scheme by modifying just a few color variables. This flexibility is invaluable when you’re working on projects with evolving design requirements or when you need to adhere to strict branding guidelines.\u003C/p>\u003Ch2>Real-World Use Cases\u003C/h2>\u003Ch3>Rapid Prototyping\u003C/h3>\u003Cp>For developers who need to get a project off the ground quickly, daisyUI offers a huge advantage. By reducing the amount of code you have to write, it allows you to create prototypes faster. This is particularly useful for startups or freelancers who need to iterate on their designs rapidly.\u003C/p>\u003Ch3>Production-Quality Websites\u003C/h3>\u003Cp>Even though it’s fantastic for prototypes, daisyUI isn’t just a temporary tool. Its well-crafted components are robust enough for production. Many developers have successfully used it to build landing pages, dashboards, and even full-scale web applications. The library’s emphasis on clean, semantic HTML makes it easier to scale your projects as they grow in complexity.\u003C/p>\u003Ch3>Educational Purposes\u003C/h3>\u003Cp>For those learning front-end development, daisyUI provides a great starting point. It offers an easy way to understand how components can be structured without getting lost in a sea of utility classes. As you grow more comfortable, you can gradually explore Tailwind’s more advanced features and even customize the provided components to better suit your needs.\u003C/p>\u003Ch2>Performance and Efficiency\u003C/h2>\u003Cp>A key benefit of daisyUI is its impact on performance. Since the library helps reduce the overall number of class names in your HTML, the resulting file size is smaller. Some developers report that their HTML becomes up to 70% smaller, which can lead to faster page load times and better overall performance.\u003C/p>\u003Cp>Moreover, because daisyUI is pure CSS with no JavaScript dependencies, there’s no extra overhead that might slow down your site. This lightweight approach ensures that your pages remain snappy, even as they become more complex.\u003C/p>\u003Ch2>Community and Support\u003C/h2>\u003Cp>One of the strongest aspects of daisyUI is its vibrant community. With tens of thousands of stars on GitHub, a growing number of open-source projects using it, and active discussion channels on platforms like Discord, you’re never far from support. The community is friendly and always eager to help—whether you’re troubleshooting an issue or looking for inspiration on how to customize a component.\u003C/p>\u003Cp>The library is frequently updated, and its roadmap is transparent. Many users appreciate the continuous improvements and the responsiveness of the maintainers, which contributes to a positive overall experience.\u003C/p>\u003Ch2>Comparison to Other Options\u003C/h2>\u003Cp>While there are many component libraries out there, daisyUI has carved its own niche by focusing on simplicity and flexibility. For instance, traditional frameworks like Bootstrap offer pre-styled components but can be rigid in terms of customization. In contrast, daisyUI leverages the power of Tailwind CSS, giving you the best of both worlds: pre-built components that are easy to use, yet fully customizable with Tailwind’s utility classes.\u003C/p>\u003Cp>Other Tailwind-based libraries might offer similar benefits, but daisyUI stands out for its semantic class names and integrated theming capabilities. It strikes a balance between ease of use and control—a combination that many developers find incredibly appealing.\u003C/p>\u003Ch2>Limitations and Considerations\u003C/h2>\u003Cp>No tool is perfect, and daisyUI is no exception. While its pre-built components cover a wide range of use cases, there might be times when you need to create something entirely unique. In those cases, you might still have to rely on raw Tailwind CSS to craft custom solutions. Additionally, because it builds on top of Tailwind, you’ll need a basic understanding of Tailwind’s utility classes to fully harness the power of daisyUI.\u003C/p>\u003Cp>Another point to consider is that while daisyUI helps keep your HTML clean, there can be a learning curve when it comes to customizing themes and components beyond the default settings. However, the extensive documentation and active community help mitigate these challenges.\u003C/p>","https://daisyui.com/components/",[2128,2129],{"id":785,"title":786,"slug":787},{"id":791,"title":792,"slug":793},"daisyUI – Customizable Tailwind Components",[2132],{"id":26,"title":27,"slug":28},"https://daisyui.com/","55 themeable components for rapid web design.","Discover daisyUI, a free Tailwind CSS component library that speeds up development with 55+ pre-built, customizable UI elements.",[865],[785,791],[26],"content:components:316.json","components/316.json","components/316",{"_path":2143,"_dir":49,"_draft":6,"_partial":6,"_locale":7,"id":2144,"type":49,"title":2145,"slug":2146,"published_at":2147,"order":2148,"created_at":2147,"updated_at":2149,"faqs":2150,"tags":2169,"color":2171,"cover":2174,"images":2175,"is_hot":6,"content":2176,"is_paid":6,"demo_url":2177,"features":2178,"seo_title":2182,"categories":2183,"target_url":2191,"description":2192,"is_featured":6,"is_free_listing":6,"seo_description":2193,"tags_ids":2194,"features_ids":2195,"categories_ids":2196,"_id":2197,"_type":19,"_source":20,"_file":2198,"_stem":2199,"_extension":19},"/components/314",314,"HyperUI","hyperui","2023-03-04 23:43:42",119,"2026-03-02 21:59:20",[2151,2154,2157,2160,2163,2166],{"title":2152,"content":2153},"What is HyperUI?","HyperUI is a free library of 226 Tailwind CSS components designed for building web applications, e-commerce stores, and landing pages with ease.",{"title":2155,"content":2156},"Does HyperUI support RTL layouts?","Yes, HyperUI supports Right-to-Left (RTL) layouts, making it suitable for projects that cater to languages like Arabic and Hebrew.",{"title":2158,"content":2159},"Is HyperUI really free for commercial work?","Yes—released under the permissive MIT license.",{"title":2161,"content":2162},"Is HyperUI suitable for beginners?","Yes, HyperUI is beginner-friendly, with clean HTML components that are easy to use and integrate, even for those new to web development.",{"title":2164,"content":2165},"Does it support Tailwind CSS v4?","The site’s components are already upgraded to v4 classes. ",{"title":2167,"content":2168},"Does HyperUI ship any JavaScript?","No; you decide how to add behavior with Alpine, React, or plain JS.",[2170],{"id":865,"title":170,"slug":171},{"id":2172,"title":2173,"slug":2173},29,"teal","/hyperui.png",[],"\u003Cp>HyperUI is a free, open-source library of 226 Tailwind CSS components that helps you design beautiful and functional user interfaces effortlessly. Let’s dive into what makes HyperUI so amazing and why it should be your go-to resource for web development.\u003C/p>\u003Ch2>What is HyperUI?\u003C/h2>\u003Cp>\u003Cimg src=\"/hyperui-2.png\" alt=\"Hyper UI - Free CTA Component Example\" title=\"Hyper UI - Free CTA Component Example\" width=\"800\" height=\"488\" loading=\"lazy\">\u003C/p>\u003Cp>HyperUI is a collection of ready-made HTML components built with Tailwind CSS. Whether you’re working on a web application, an e-commerce store, or a sleek landing page, HyperUI has you covered. And the best part? It’s completely free! Not only does it provide stunning pre-designed components, but it also supports Right-to-Left (RTL) layouts, making it accessible to a global audience.\u003C/p>\u003Ch2>HyperUI Features ✨\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Zero setup:\u003C/strong> just copy, paste, ship\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>MIT-licensed & open source\u003C/strong> on GitHub (11 k⭐)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>RTL layouts\u003C/strong> for Arabic, Hebrew, etc.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Dark-mode variants\u003C/strong> for many components\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Marketing, e-commerce & application sections\u003C/strong> included\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>No JavaScript payload\u003C/strong> (HTML + CSS only)\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Frequent updates\u003C/strong> (~570 commits since 2021)\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Why Choose HyperUI?\u003C/h2>\u003Cp>If you’ve ever struggled with designing a cohesive UI or spent hours tweaking small details, HyperUI is here to save the day. Let’s look at why it’s a must-have for developers and designers alike:\u003C/p>\u003Ch3>Save Time and Effort\u003C/h3>\u003Cp>Instead of creating components from scratch, HyperUI provides a treasure trove of pre-designed options. Whether you need a sleek navbar or an engaging hero section, you can simply pick a component and drop it into your project. This speeds up development without compromising on quality.\u003C/p>\u003Ch3>Easy to Use\u003C/h3>\u003Cp>You don’t need to be a design expert to use HyperUI. The components are straightforward to implement and come with clean, readable HTML. Even beginners will feel at home with this library.\u003C/p>\u003Ch3>Seamless Integration\u003C/h3>\u003Cp>HyperUI’s components are optimized for Tailwind CSS, ensuring a seamless experience. If you’re already familiar with Tailwind, you’ll find it easy to customize and extend these components to suit your project’s needs.\u003C/p>\u003Ch2>Integration ✳️\u003C/h2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>React / Next.js / Remix\u003C/strong> – paste HTML into components\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Vue / Nuxt\u003C/strong> – works with \u003Ccode><template>\u003C/code> blocks\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Astro / Svelte / Solid\u003C/strong> – no dependencies, so universal\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Laravel / Rails / Django\u003C/strong> – drop into Blade/ERB/Jinja templates\u003C/p>\u003C/li>\u003Cli>\u003Cp>Compatible with \u003Cstrong>Alpine JS\u003C/strong> for interactivity if needed\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Exploring the Component Categories\u003C/h2>\u003Cp>HyperUI organizes its components into useful categories, making it simple to find what you need. Here’s a quick overview:\u003C/p>\u003Cp>\u003Cimg src=\"/hyperui-3.png\" alt=\"HyperUI Free Admin & Dashboard Components\" title=\"HyperUI Free Admin & Dashboard Components\" width=\"800\" height=\"725\" loading=\"lazy\">\u003C/p>\u003Ch3>Navigation\u003C/h3>\u003Cp>Menus and navigation bars are essential for any site. HyperUI offers clean, responsive designs that fit a variety of styles. From minimalistic top bars to complex dropdown menus, you’ll find a component that matches your vision.\u003C/p>\u003Ch3>Hero Sections\u003C/h3>\u003Cp>First impressions matter, and HyperUI’s hero components ensure your site makes a splash. These sections are designed to grab attention with bold headlines, engaging CTAs, and eye-catching visuals.\u003C/p>\u003Cp>\u003Cimg src=\"/hyperui-4.png\" alt=\"HyperUI Free Marketing Components\" title=\"HyperUI Free Marketing Components\" width=\"800\" height=\"525\" loading=\"lazy\">\u003C/p>\u003Ch3>Product Cards\u003C/h3>\u003Cp>For e-commerce stores, product cards are a must-have. HyperUI’s designs are modern, functional, and ready to showcase your items in style. You can highlight product features, display prices, and include quick-action buttons.\u003C/p>\u003Ch3>Forms\u003C/h3>\u003Cp>From login forms to newsletter sign-ups, HyperUI provides a range of polished form components. These forms are both functional and aesthetically pleasing, ensuring a smooth user experience.\u003C/p>\u003Ch3>Buttons\u003C/h3>\u003Cp>Buttons might seem simple, but they play a huge role in guiding user interaction. HyperUI offers buttons in various styles, sizes, and states to fit any context.\u003C/p>\u003Ch3>Pricing Tables\u003C/h3>\u003Cp>Need to display subscription plans or package options? HyperUI’s pricing tables are clean, organized, and designed to convert visitors into customers.\u003C/p>\u003Ch2>Included Components\u003C/h2>\u003Cp>HyperUI includes everything from banners, cards, and button group components to more complex elements.\u003C/p>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Ch3>Application UI\u003C/h3>\u003C/th>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Ch3>Marketing UI\u003C/h3>\u003C/th>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Ch3>E-Commerce UI\u003C/h3>\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cul>\u003Cli>\u003Cp>Alerts\u003C/p>\u003C/li>\u003Cli>\u003Cp>Badges\u003C/p>\u003C/li>\u003Cli>\u003Cp>Breadcrumbs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Button Groups\u003C/p>\u003C/li>\u003Cli>\u003Cp>Dropdown\u003C/p>\u003C/li>\u003Cli>\u003Cp>Error Pages\u003C/p>\u003C/li>\u003Cli>\u003Cp>Header\u003C/p>\u003C/li>\u003Cli>\u003Cp>Inputs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Login/Register Forms\u003C/p>\u003C/li>\u003Cli>\u003Cp>Pagination\u003C/p>\u003C/li>\u003Cli>\u003Cp>Progress\u003C/p>\u003C/li>\u003Cli>\u003Cp>Radio Groups\u003C/p>\u003C/li>\u003Cli>\u003Cp>Side Menu\u003C/p>\u003C/li>\u003Cli>\u003Cp>Stats\u003C/p>\u003C/li>\u003Cli>\u003Cp>Steps\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tables\u003C/p>\u003C/li>\u003Cli>\u003Cp>Toggles\u003C/p>\u003C/li>\u003Cli>\u003Cp>Vertical Menu\u003C/p>\u003C/li>\u003C/ul>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cul>\u003Cli>\u003Cp>Announcements\u003C/p>\u003C/li>\u003Cli>\u003Cp>Banners\u003C/p>\u003C/li>\u003Cli>\u003Cp>Blog Cards\u003C/p>\u003C/li>\u003Cli>\u003Cp>Buttons\u003C/p>\u003C/li>\u003Cli>\u003Cp>Cards\u003C/p>\u003C/li>\u003Cli>\u003Cp>CTAs\u003C/p>\u003C/li>\u003Cli>\u003Cp>FAQs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Footers\u003C/p>\u003C/li>\u003Cli>\u003Cp>Forms\u003C/p>\u003C/li>\u003Cli>\u003Cp>Navigation\u003C/p>\u003C/li>\u003Cli>\u003Cp>Popups\u003C/p>\u003C/li>\u003Cli>\u003Cp>Sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Stats\u003C/p>\u003C/li>\u003Cli>\u003Cp>Tabs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Testimonials\u003C/p>\u003C/li>\u003C/ul>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cul>\u003Cli>\u003Cp>Carts\u003C/p>\u003C/li>\u003Cli>\u003Cp>Checkouts\u003C/p>\u003C/li>\u003Cli>\u003Cp>Collection Cards\u003C/p>\u003C/li>\u003Cli>\u003Cp>Collection Filters\u003C/p>\u003C/li>\u003Cli>\u003Cp>Featured Sections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Product Cards\u003C/p>\u003C/li>\u003Cli>\u003Cp>Product Collections\u003C/p>\u003C/li>\u003Cli>\u003Cp>Products\u003C/p>\u003C/li>\u003Cli>\u003Cp>Quantity Inputs\u003C/p>\u003C/li>\u003Cli>\u003Cp>Reviews\u003C/p>\u003C/li>\u003C/ul>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003C/p>\u003C/td>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003C/p>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ch2>Pros and Cons\u003C/h2>\u003Ch4>Pros ✅\u003C/h4>\u003Cul>\u003Cli>\u003Cp>Completely free & open source\u003C/p>\u003C/li>\u003Cli>\u003Cp>Huge variety (400 + components, 40 + categories)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Copy-paste workflow speeds prototypes\u003C/p>\u003C/li>\u003Cli>\u003Cp>RTL and dark-mode ready\u003C/p>\u003C/li>\u003Cli>\u003Cp>Zero JS: framework-agnostic, tiny bundle\u003C/p>\u003C/li>\u003C/ul>\u003Ch4>Cons ⚠️\u003C/h4>\u003Cul>\u003Cli>\u003Cp>Manual copy-paste can be repetitive\u003C/p>\u003C/li>\u003Cli>\u003Cp>Requires basic Tailwind knowledge\u003C/p>\u003C/li>\u003Cli>\u003Cp>No runtime theming (must edit classes)\u003C/p>\u003C/li>\u003Cli>\u003Cp>Not every component has dark-mode styling\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>Who Can Benefit from HyperUI?\u003C/h2>\u003Cp>HyperUI is perfect for:\u003C/p>\u003Col start=\"1\">\u003Cli>\u003Cp>\u003Cstrong>Freelancers\u003C/strong>: Impress clients with quick turnarounds and stunning designs.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Startups\u003C/strong>: Launch MVPs faster without worrying about extensive UI design.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Students and Hobbyists\u003C/strong>: Learn by using professional-grade components in your projects.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Teams\u003C/strong>: Save time and standardize design elements across projects.\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>How to Get Started with HyperUI\u003C/h2>\u003Cp>Getting started with HyperUI is a breeze. Follow these steps to incorporate it into your workflow:\u003C/p>\u003Col start=\"1\">\u003Cli>\u003Cp>\u003Cstrong>Visit the Official Site\u003C/strong>: Head over to HyperUI to explore the library.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Browse Components\u003C/strong>: Use the categorized menu to find the components you need.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Copy and Paste\u003C/strong>: Grab the HTML code for your chosen component and paste it into your project.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Customize\u003C/strong>: Tailor the styles using Tailwind CSS classes to align with your design.\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Tips for Making the Most of HyperUI\u003C/h2>\u003Col start=\"1\">\u003Cli>\u003Cp>\u003Cstrong>Plan Your Design\u003C/strong>: Before diving in, sketch out a rough layout of your project. This will help you choose the right components and maintain a consistent design.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Learn Tailwind CSS\u003C/strong>: While you can use HyperUI without deep Tailwind knowledge, understanding the basics will help you customize components more effectively.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Combine Components\u003C/strong>: Don’t be afraid to mix and match components to create unique layouts.\u003C/p>\u003C/li>\u003Cli>\u003Cp>\u003Cstrong>Test Responsiveness\u003C/strong>: Ensure your designs look great on all devices by testing them on different screen sizes.\u003C/p>\u003C/li>\u003C/ol>\u003Ch2>Final Thoughts\u003C/h2>\u003Cp>HyperUI is a fantastic resource for developers and designers looking to build stunning UIs quickly and effortlessly. With its extensive library of components, responsive designs, and seamless Tailwind CSS integration, it’s a tool that belongs in every web developer’s arsenal. Whether you’re working on a small personal project or a large-scale application, HyperUI has something to offer.\u003C/p>","https://www.hyperui.dev/components/marketing/buttons",[2179,2180,2181],{"id":785,"title":786,"slug":787},{"id":789,"title":190,"slug":191},{"id":1506,"title":1507,"slug":1508},"HyperUI: 226 Free Tailwind CSS Components",[2184,2188,2189,2190],{"id":2185,"title":2186,"slug":2187},156,"E-commerce","e-commerce",{"id":1160,"title":1161,"slug":1162},{"id":506,"title":507,"slug":508},{"id":26,"title":27,"slug":28},"https://www.hyperui.dev/","226 Free & Open Source Tailwind CSS Components","Discover 400+ copy-paste Tailwind CSS components in HyperUI. Build dashboards, e-commerce pages & marketing sites fast with RTL and dark-mode support.",[865],[785,789,1506],[2185,1160,506,26],"content:components:314.json","components/314.json","components/314",{"_path":2201,"_dir":2202,"_draft":6,"_partial":6,"_locale":7,"id":2203,"type":2202,"title":2204,"slug":2202,"published_at":2205,"order":12,"created_at":2205,"updated_at":2206,"faqs":2207,"seo_content":2226,"featured_title":2227,"page_seo_title":2228,"page_hero_title":2229,"featured_description":2230,"page_seo_description":2231,"_id":2232,"_type":19,"_source":20,"_file":2233,"_stem":2234,"_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",[2208,2211,2214,2217,2220,2223],{"title":2209,"content":2210},"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":2212,"content":2213},"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":2215,"content":2216},"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":2218,"content":2219},"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":2221,"content":2222},"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":2224,"content":2225},"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",{"_path":437,"_dir":438,"_draft":6,"_partial":6,"_locale":7,"id":439,"type":438,"title":440,"slug":441,"published_at":442,"order":12,"created_at":442,"updated_at":443,"color":2236,"cover":447,"is_hot":48,"is_enabled":48,"target_url":448,"button_text":449,"large_badge_text":450,"small_badge_text":451,"large_description":452,"small_description":453,"_id":454,"_type":19,"_source":20,"_file":455,"_stem":456,"_extension":19},{"id":445,"title":446,"slug":446},1773750212852]