unknown

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.

Just Fucking Use Shadcn

Join the Horde. ⚔️

We dig into tech, software engineering life, and solid best practices.

TypeScript is our weapon of choice, frontend, backend, we handle it all.

Jump in.

Horde

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.

Normal people with common sense who are not afraid of a little bit CSS
<pre><code class="language-html">&lt;label class=&quot;check-box&quot;&gt;
&lt;input type=&quot;checkbox&quot; /&gt;
&lt;span&gt;Social Media&lt;/span&gt;
&lt;/label&gt;
</code></pre>
JuSt uSE sHadCn (try to debug this shit)
<pre><code class="language-html">&lt;label
 class=&quot;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-[&amp;gt;[data-slot=field]]:w-full has-[&amp;gt;[data-slot=field]]:flex-col has-[&amp;gt;[data-slot=field]]:rounded-md has-[&amp;gt;[data-slot=field]]:border [&amp;amp;&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&quot;&gt;
 &lt;div
 class=&quot;group/field flex w-full data-[invalid=true]:text-destructive flex-row items-center [&amp;amp;&amp;gt;[data-slot=field-label]]:flex-auto has-[&amp;gt;[data-slot=field-content]]:items-start has-[&amp;gt;[data-slot=field-content]]:[&amp;amp;&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&quot;&gt;
 &lt;button
 class=&quot;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&quot;&gt;
 &lt;span
 class=&quot;grid place-content-center text-current transition-none&quot;
 style=&quot;pointer-events: none&quot;&gt;
 &lt;svg
 xmlns=&quot;http://www.w3.org/2000/svg&quot;
 width=&quot;24&quot;
 height=&quot;24&quot;
 viewBox=&quot;0 0 24 24&quot;
 fill=&quot;none&quot;
 stroke=&quot;currentColor&quot;
 stroke-width=&quot;2&quot;
 stroke-linecap=&quot;round&quot;
 stroke-linejoin=&quot;round&quot;
 class=&quot;lucide lucide-check size-3.5&quot;&gt;
 &lt;path d=&quot;M20 6 9 17l-5-5&quot;&gt;&lt;/path&gt;
 &lt;/svg&gt;
 &lt;/span&gt;
 &lt;/button&gt;
 &lt;input
 type=&quot;&quot;
 checkbox=&quot;&quot;
 style=&quot;
 position: absolute;
 pointer-events: none;
 opacity: 0;
 margin: 0px;
 transform: translateX(-100%);
 width: 16px;
 height: 16px;
 &quot;
 checked=&quot;&quot;
 value=&quot;social-media&quot; /&gt;
 &lt;div
 class=&quot;flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50&quot;&gt;
 Social Media
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/label&gt;
</code></pre>
if THIS is more customizeable and maintainable and understandable than just simple CSS then you are out of your mind
Tailwind with the <code>@apply</code> 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 <code>@apply</code> 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 …
<h1>seriously</h1>
just watch some kevin powell on youtube and write some good ol css

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.

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