shadcn.io: de beste plek om nieuwe blocks voor shadcn/ui te vinden

Als je bouwt met shadcn/ui, ken je de magie al: de code is van jou. Er is geen blackbox-afhankelijkheid om tegen te vechten, je kopieert een component erin, en het is van jou om vorm te geven.

Maar componenten zijn de kleine stukjes. Een knop, een input, een card. De echte tijdvreter is die stukjes samenvoegen tot blocks: een prijssectie, het geraamte van een dashboard, een auth-scherm, een feature-grid. Daar gebeurt het meeste werk (en het meeste kopiëren-plakken uit oude projecten).

Precies die leemte vult shadcn.io, en daarom is het onze eerste keuze geworden.

Wat is shadcn.io?

shadcn.io is een groot, actief groeiend register van blocks gebouwd op shadcn/ui: complete, al samengestelde secties die je op een pagina laat vallen en uitbrengt. Geen primitives, maar de lay-outs waar je anders een hele middag aan zou zitten om ze zelf aan elkaar te knopen.

Elk block volgt dezelfde filosofie als shadcn/ui zelf: het is gewone code die van jou is, gestyled met Tailwind, zonder runtime-binding. Je installeert het, en het wordt deel van je codebase.

Waarom het de beste plek is om nieuwe blocks te vinden

Een paar dingen tillen het uit boven de rest:

• De breedte. Marketingsecties, dashboards, tabellen, auth-flows, prijzen, testimonials: de catalogus dekt de pagina's die echte producten echt nodig hebben, niet een handvol demo's.
• Het is fris. Er komen regelmatig nieuwe blocks bij, dus je bouwt met actuele patronen in plaats van iets dat een jaar geleden voor het laatst is aangeraakt.
• Kopiëren-plakken, geen installeren-en-bidden. Omdat blocks uit shadcn/ui-primitives zijn samengesteld, lezen ze als code die je zelf had geschreven: makkelijk aan te passen, makkelijk te themen.
• Het speelt fijn samen met het register. Blocks passen in dezelfde shadcn-workflow die je al gebruikt, dus er is niets nieuws te leren.

Hoe wij het gebruiken

Onze eigen flow is simpel: begin een pagina met een shadcn.io-block dat voor 80% klaar is, en buig daarna de resterende 20% om zodat het bij het merk past. Omdat de code van jou is, is die laatste 20% een fluitje van een cent: verwissel de tokens, pas de spacing aan, klaar. Zo verandert „een prijspagina ontwerpen” van een dag in een uur.

Neobrutalism ♥ shadcn.io

We zijn trots op de samenwerking met shadcn.io. Als je de neobrutalistische lezing houdt die Neobrutalism van shadcn/ui maakt, voel je je meteen thuis in hun block-bibliotheek: hetzelfde eigendomsmodel voor de code, hetzelfde Tailwind-fundament, veel meer bestreken terrein.

Blader door de collectie op shadcn.io en zie hoe snel een pagina in elkaar valt wanneer de blocks al klaar zijn.