멋진 shadcn 라이브러리

You can’t miss

Hello and welcome to the new blog

It’s 2026, and AI can certainly make our website, and the only problem the AI agents have is building creative websites.

Creative websites need storytelling, state management, and almost perfect eye-pleasing theme and colour coordination.

I 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.

Shadcn is the most used UI library with 100k+ Github stars, if you haven’t tried shadcn them, you are missing something on the table.

I 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.

The demo video has been added below, showing the CSS customisation example using shadcn as the UI library.

Go to this link and click on the top right colour palette icon, it will open a drawer to edit the CSS of the entire website UI elements.

Shadcn UI Library

Shadcn 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.

This 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.

This also brings an opportunity for everyone to create shadow-based repositories and submit to directories to let other developers install your code or UI element with just one CLI command.

Most 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.

Why Shadcn?

Every 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.

We 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.

Cool and Top Shadcn Libraries

Sharing some cool latest top-shadcn libraries or UI components, I’ve witnessed.

Rare UI

Shadcn paper shaders for backgrounds

TweakCN: I love the idea of customisation that comes from it

Smoothui: Smooth animated UI elements

Threecn: 3D-based WebGL elements using Shadcn

componentry.dev: Components from Shadcn

Shoogle.dev: Explore and search all Shadcn-based libraries

Morphin.dev: Premium UI elements

ShadcnStudio: Studio for shadcn builders

Shadcnuikit: UI kits for solo developers

Ruixen: UI components and premium templates

Shadcnspace: Shadcn-based UI components

Bklit UI: Shadcn charts and data components

ReUI: Shadcn blocks with the MCP server

Cuelume: Interaction sound for web components

I think that would be enough for today

See you at the next one

Cheers

Shrey