Co znát kolem
shadcn/ui
Nejpopulárnější sbírka hotových komponent pro hezké appky. Její fígl: kód si zkopírujete přímo k sobě do projektu a patří vám.
Autor: Jindřich Fáborský · 17 let v marketingu · 2 000+ hodin vibe codingu · 180+ projektů
shadcn/ui
Komponenty, které vlastníte.
Rychlá odpověď
Co je tedy shadcn/ui?
shadcn/ui je sbírka hotových a hezkých komponent rozhraní pro appky: tlačítka, formuláře, dialogy, tabulky. Používají ji lidé, co staví weby a appky přes vibe coding, aby jejich výsledek vypadal dobře.
Není to ale klasická knihovna, kterou nainstalujete a schováte. Sami autoři říkají: „tohle není knihovna komponent, tohle je způsob, jak si tu svou postavíte.“ Kód komponenty se jedním příkazem zkopíruje přímo k vám do projektu. Od té chvíle je váš: upravíte si ho a Claude Code ho vidí a umí měnit.
Je zdarma (licence MIT) a je to nejpopulárnější komponentová knihovna vůbec: na GitHubu má přes 118 tisíc hvězd.
K čemu se hodí
Co vám shadcn/ui reálně dá
Proč po něm vibe codeři sahají, i když jim AI umí napsat komponentu od nuly.
Hezké UI hned, bez designéra
Tlačítka, formuláře, dialogy i tabulky vypadají dobře a jsou přístupné od první chvíle. Appka z vibe codingu tak nevypadá jako z roku 2005.
AI ten kód vidí a umí ho měnit
Komponenta leží přímo ve vašem projektu, ne schovaná v závislostech. Claude Code ji tak přečte a upraví. shadcn tenhle přístup sám nazývá „AI-Ready“.
Jeden konzistentní vzhled
Všechny komponenty k sobě ladí a sladíte je se svou značkou (barvy, zaoblení) jednou. Appka pak drží pohromadě, i když roste.
Ten prostřední bod je klíč: protože kód komponenty leží ve vašem projektu, je podle oficiální dokumentace přímo „připravený pro AI“. Agent na něj vidí a umí ho měnit, na rozdíl od zabalené knihovny.
Jak na to
Jak ho rozjedete v Claude Code
Tři cesty, jak se komponenta dostane do vašeho projektu. Proklikejte si je.
Claude Code umí ovládat terminál, takže tyhle dva příkazy pouští sám, když ho o komponentu požádáte.
npx shadcn@latest init
npx shadcn@latest add buttonCo se stane
init jednou nastaví projekt, add pak vloží zdrojový soubor komponenty (třeba components/ui/button.tsx) rovnou k vám do projektu. Od té chvíle je to váš soubor: barvu, zaoblení i chování si upravíte, jak potřebujete.
Na co si dát pozor
Jaké to má nevýhody
Aby to nebylo jen chvála. Čtyři věci, které je fér vědět dopředu.
Updaty si hlídáte sami
Kód je váš, takže nová verze komponenty není npm update. Vylepšení si natáhnete ručně a přepis vám může přemazat vlastní úpravy.
Chce React a Tailwind
shadcn běží na Reactu a Tailwind CSS. Na statický web bez frameworku nebo v jiném jazyce ho nevyužijete.
Spíš appky než landing page
Na jednoduchý marketingový web je to zbytečná režie. Vyplatí se, když stavíte appku nebo dashboard s víc obrazovkami a jednotným vzhledem.
Bez úprav vypadá „jako každá AI appka“
Hezký default je i past. Sladit ho se svou značkou je na vás. Naštěstí kód vlastníte, takže to jde do detailu.
Kde přesně jsou hranice vibe codingu, rozebírá průvodce kdy se vibe coding nehodí.
Chcete stavět weby a appky s funkčním UI?
V kurzu AI First vás vibe coding naučím od nuly: jak zadávat, jak napojit shadcn a design knihovny a jak appku dotáhnout v Claude Code do konce. Práci s hezkým UI probírám v samostatné lekci o stavbě celých aplikací.
21 hodin praktických videí · 1 800+ absolventů · parťák s 2 000+ hodinami praxe a 180+ projekty
FAQ
Časté otázky
Co je shadcn/ui jednoduše?+
shadcn/ui je sbírka hotových, hezkých a přístupných komponent rozhraní (tlačítka, formuláře, dialogy, tabulky) pro React. Zvláštní je tím, že komponenty neinstalujete jako běžnou knihovnu. Jedním příkazem si jejich zdrojový kód zkopírujete přímo do projektu a od té chvíle je váš a upravíte si ho.
Je shadcn/ui zdarma?+
Ano. Je open-source pod licencí MIT a zdarma i pro komerční projekty. Není to placený UI kit, jak si někteří myslí. Samotné komponenty nic nestojí, platíte jen běžné věci kolem svého projektu, třeba hosting.
Jak shadcn/ui nainstaluju a rozjedu v Claude Code?+
Dvěma příkazy: „npx shadcn@latest init“ nastaví projekt a „npx shadcn@latest add button“ vloží komponentu přímo k vám. Claude Code umí ovládat terminál, takže je pouští sám, když ho o komponentu požádáte. Ještě pohodlnější je oficiální MCP server, přes který si AI komponenty tahá z registru sama.
Má shadcn/ui MCP server?+
Ano, oficiální. Přidáte ho do Claude Code (nebo Cursoru) jako každý jiný MCP server a agent přes něj prochází registr komponent a instaluje je do projektu na základě věty, třeba „udělej přihlašovací formulář z shadcn“. Přesný postup je v dokumentaci shadcn.
shadcn/ui vs Radix a Tailwind, v čem se liší?+
Nejsou to konkurenti, shadcn na nich stojí. Tailwind CSS řeší styly (vzhled), Radix UI dodává přístupnostní základ (chování a ovládání klávesnicí). shadcn to spojí do hotových komponent, které si zkopírujete k sobě. „shadcn vs Tailwind“ je tak trochu jako „auto vs motor“.
Čím se liší od knihovny jako MUI nebo Chakra?+
U klasické knihovny (MUI, Chakra, Mantine) komponentu naimportujete a její kód zůstává schovaný v závislostech projektu. U shadcn ho máte přímo v projektu jako svůj soubor: upravíte ho do detailu a AI ho vidí a umí měnit. Daň za to je, že si updaty komponent hlídáte sami.
Kdy shadcn/ui nepoužívat?+
Na úplně jednoduchý web nebo jednorázový prototyp bez formulářů je to zbytečná režie. Nehodí se ani mimo React (statický web, PHP, Python). A na čistě marketingovou landing page se často víc hodí originální design na míru než stavebnice hotových komponent. Vyniká u appek a dashboardů s víc obrazovkami.
Používá shadcn/ui nástroj v0 od Vercelu?+
Ano. v0 generuje UI rovnou v shadcn, napsal ho totiž stejný člověk, co stojí za v0. Výstup z v0 přenesete do projektu přes shadcn a dotáhnete ho v Claude Code. Víc v našem samostatném průvodci o v0.