{"slug": "cool-shadcn-libraries", "title": "Cool shadcn libraries", "summary": "A developer highlights shadcn, a headless UI library with over 100k GitHub stars, as a powerful tool for building creative, animated websites with minimal JavaScript and extensive CSS customization. The post showcases several shadcn-based libraries and tools, including TweakCN for theme editing and Smoothui for animated components.", "body_md": "You can't miss\n\nHello and welcome to the new blog\n\nIt's 2026, and AI can certainly make our website, and the only problem the AI agents have is building creative websites.\n\nCreative websites need storytelling, state management, and almost perfect eye-pleasing theme and colour coordination.\n\nI almost found myself itchy when building a creative website with full of animations, highly performant, less use of useEffect hooks, more of CSS than JavaScript, better colour themes and palletes with proper depth and hierarchy to manage among the DOM elements in design theory.\n\nShadcn is the most used UI library with 100k+ Github stars, if you haven't tried shadcn them, you are missing something on the table.\n\nI love how shadcn easily handles customisation. We provide a context provider for theme customisation to toggle and switch the themes, extending to deeply nested children.\n\nThe demo video has been added below, showing the CSS customisation example using shadcn as the UI library.\n\nGo to this [link](https://saascrm.site/demo) and click on the top right colour palette icon, it will open a drawer to edit the CSS of the entire website UI elements.\n\nShadcn is a headless UI library that brings one CLI command to add the source code instead of adding the entire UI library inside node_modules.\n\nThis concept makes it interesting; one CLI can update my UI element within the entire repository and can add more UI elements using one CLI command.\n\nThis also brings an opportunity for everyone to create shadow-based repositories and [submit to directories](https://ui.shadcn.com/docs/directory?ref=ihatereading.in) to let other developers install your code or UI element with just one CLI command.\n\nMost of the time, I don't even use the CLI; I prefer adding the shadcn UI code directory by copy-pasting inside the lib/ui folder in my repository.\n\nEvery time we developers build UI elements, we add the same animation source code, add the same pattern of colour palletes and CSS. Shadcn eased the pain of redoing it; it's like a bootstrap of early 2010.\n\nWe have a bunch of React UI elements ready as fundamental elements and can build more complex states and animated UI components on top of it.\n\nSharing some cool latest top-shadcn libraries or UI components, I've witnessed.\n\n[Shadcn paper shaders for backgrounds](https://shaders.paper.design/?ref=ihatereading.in)\n\n[TweakCN](https://tweakcn.com/editor/theme?ref=ihatereading.in): I love the idea of customisation that comes from it\n\n[Smoothui](https://smoothui.dev/?ref=ihatereading.in): Smooth animated UI elements\n\n[Threecn](https://threecn.dev/?ref=ihatereading.in): 3D-based WebGL elements using Shadcn\n\n[componentry.dev](https://componentry.dev/?ref=ihatereading.in): Components from Shadcn\n\n[Shoogle.dev](https://shoogle.dev/?ref=ihatereading.in): Explore and search all Shadcn-based libraries\n\n[Morphin.dev](https://morphin.dev/?ref=ihatereading.in): Premium UI elements\n\n[ShadcnStudio](http://shadcnstudio.com/?ref=ihatereading.in): Studio for shadcn builders\n\n[Shadcnuikit](https://shadcnuikit.com/?ref=ihatereading.in): UI kits for solo developers\n\n[Ruixen](https://ruixen.com/?ref=ihatereading.in): UI components and premium templates\n\n[Shadcnspace](https://shadcnspace.com/?ref=ihatereading.in): Shadcn-based UI components\n\n[Bklit UI](https://bklit.com/?ref=ihatereading.in): Shadcn charts and data components\n\n[ReUI](https://reui.io/?ref=ihatereading.in): Shadcn blocks with the MCP server\n\n[Cuelume:](https://cuelume-site.pages.dev/) Interaction sound for web components\n\nI think that would be enough for today\n\nSee you at the next one\n\nCheers\n\nShrey", "url": "https://wpnews.pro/news/cool-shadcn-libraries", "canonical_source": "https://dev.to/shreyvijayvargiya/cool-shadcn-libraries-b36", "published_at": "2026-07-23 08:50:44+00:00", "updated_at": "2026-07-23 09:00:12.930344+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["shadcn", "TweakCN", "Smoothui", "Threecn", "componentry.dev", "Shoogle.dev", "Morphin.dev", "ShadcnStudio"], "alternates": {"html": "https://wpnews.pro/news/cool-shadcn-libraries", "markdown": "https://wpnews.pro/news/cool-shadcn-libraries.md", "text": "https://wpnews.pro/news/cool-shadcn-libraries.txt", "jsonld": "https://wpnews.pro/news/cool-shadcn-libraries.jsonld"}}