--- title: Just Fucking Use Shadcn | daily.dev description: shadcn/ui is a component collection you copy-paste into your React project rather than installing as a dependency. Built on Radix UI or Base UI primitives with... canonical: https://daily.dev/posts/y2lngmtvb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Just Fucking Use Shadcn | daily.dev og:description: shadcn/ui is a component collection you copy-paste into your React project rather than installing as a dependency. Built on Radix UI or Base UI primitives with... og:url: https://daily.dev/posts/y2lngmtvb og:image: https://api.daily.dev/og/posts/y2lnGMTvB.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Just Fucking Use Shadcn **[Horde](https://daily.dev/sources/horde)** · [@orcdev](https://daily.dev/orcdev) · 365 upvotes · 79 comments ## Summary shadcn/ui is a component collection you copy-paste into your React project rather than installing as a dependency. Built on Radix UI or Base UI primitives with Tailwind CSS styling, it provides accessible, themeable components you fully own and control. The ecosystem includes a registry system for sharing custom components and numerous community registries for specialized use cases. AI tools are well-trained on shadcn patterns, making it efficient for AI-assisted development. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@confidentcoding** · 31 upvotes >  **@mikesniegovsky** · 14 upvotes > Shadcn is good for inspiration only. For me it's a better idea to install BaseUI and style it using pure CSS. > > Please... Just fucking learn CSS. **@markojr** · 14 upvotes > Normal people with common sense who are not afraid of a little bit CSS > > ```html > > > Social Media > > ``` > > JuSt uSE sHadCn (try to debug this shit) > > ```html > class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full... **@elmarchavez** · 10 upvotes > Actually considering jumping to shadcn after I build a couple of React + Tailwind projects this month. The idea of just using a code that's customizable is the hook for me. **@kyoukhana** · 9 upvotes > shadcn is great but it sits on top of tailwind, I believe if the team removed tailwind and build their own would be even better ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#accessibility](https://daily.dev/tags/accessibility), [#shadcn](https://daily.dev/tags/shadcn) [View this post on daily.dev](https://daily.dev/posts/y2lngmtvb) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/y2lngmtvb","headline":"Just Fucking Use Shadcn","text":"Shared: Just Fucking Use Shadcn","url":"https://daily.dev/posts/y2lngmtvb","datePublished":"2026-01-15T08:48:34.114Z","dateModified":"2026-01-15T08:49:42.112Z","author":{"@type":"Person","name":"OrcDev","url":"https://daily.dev/orcdev","image":"https://avatars.githubusercontent.com/u/7549148?v=4","description":"YouTube Creator @OrcDev","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":56820}},"image":"https://media.daily.dev/image/upload/s--2-1xRawN--/f_auto/v1722860399/public/Placeholder%2011","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":365},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":79}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/WDzNvuefb"},"comment":[{"@type":"Comment","text":"","datePublished":"2026-01-15T14:33:21.347Z","url":"https://daily.dev/posts/y2lnGMTvB#c-faUZipBol","author":{"@type":"Person","name":"Lars Faye | Confident Coding","url":"https://daily.dev/confidentcoding","image":"https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":31}},{"@type":"Comment","text":"Shadcn is good for inspiration only. For me it’s a better idea to install BaseUI and style it using pure CSS.\nPlease… Just fucking learn CSS.","datePublished":"2026-01-16T10:27:59.867Z","url":"https://daily.dev/posts/y2lnGMTvB#c-WFDxANJ0M","author":{"@type":"Person","name":"Michał","url":"https://daily.dev/mikesniegovsky","image":"https://avatars.githubusercontent.com/u/25125099?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":14}},{"@type":"Comment","text":"Normal people with common sense who are not afraid of a little bit CSS\n<label class="check-box">\n<input type="checkbox" />\n<span>Social Media</span>\n</label>\n\nJuSt uSE sHadCn (try to debug this shit)\n<label\n class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10 !w-fit">\n <div\n class="group/field flex w-full data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px gap-1.5 overflow-hidden !px-3 !py-1.5 transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:!px-2">\n <button\n class="peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 border shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 -ml-6 -translate-x-1 rounded-full transition-all duration-100 ease-linear data-[state=checked]:ml-0 data-[state=checked]:translate-x-0">\n <span\n class="grid place-content-center text-current transition-none"\n style="pointer-events: none">\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n class="lucide lucide-check size-3.5">\n <path d="M20 6 9 17l-5-5"></path>\n </svg>\n </span>\n </button>\n <input\n type=""\n checkbox=""\n style="\n position: absolute;\n pointer-events: none;\n opacity: 0;\n margin: 0px;\n transform: translateX(-100%);\n width: 16px;\n height: 16px;\n "\n checked=""\n value="social-media" />\n <div\n class="flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50">\n Social Media\n </div>\n </div>\n</label>\n\nif THIS is more customizeable and maintainable and understandable than just simple CSS then you are out of your mind\nTailwind with the @apply directive is a gamechanger because now you have proper and documented design-tokens which are exactly the same as your utility classes … However all those “great” Tailwind-React frameworks are just bad because they don’t use @apply to build their components but instead they use all the crazy JS-Bloat to put a metric crap-ton of utility classes on an stupid button just to make it change color differently on hover when active …\nseriously\njust watch some kevin powell on youtube and write some good ol css","datePublished":"2026-01-18T20:42:43.001Z","dateModified":"2026-01-18T20:43:22.584Z","url":"https://daily.dev/posts/y2lnGMTvB#c-m9pNniCNn","author":{"@type":"Person","name":"Marko Jozic-Reyes","url":"https://daily.dev/markojr","image":"https://media.daily.dev/image/upload/s--TvIfWcng--/f_auto/v1769558803/avatars/avatar_x9cfuU5ai02W3BPEbroGK?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":14}},{"@type":"Comment","text":"Actually considering jumping to shadcn after I build a couple of React + Tailwind projects this month. The idea of just using a code that’s customizable is the hook for me.","datePublished":"2026-01-15T10:27:31.000Z","url":"https://daily.dev/posts/y2lnGMTvB#c-18Hhai9hd","author":{"@type":"Person","name":"Elmar Chavez","url":"https://daily.dev/elmarchavez","image":"https://media.daily.dev/image/upload/s--7PjH979T--/f_auto/v1780994221/avatars/avatar_bK85rJb2OXXID2LX2wi5y?_a=BAMAMiWQ0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10}},{"@type":"Comment","text":"shadcn is great but it sits on top of tailwind, I believe if the team removed tailwind and build their own would be even better","datePublished":"2026-01-15T15:40:42.195Z","url":"https://daily.dev/posts/y2lnGMTvB#c-eFNJUPZwb","author":{"@type":"Person","name":"Kevin","url":"https://daily.dev/kyoukhana","image":"https://avatars2.githubusercontent.com/u/756849?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":9}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/horde","name":"Horde"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Horde","item":"https://daily.dev/squads/horde"},{"@type":"ListItem","position":3,"name":"Just Fucking Use Shadcn"}]} ```