Komponentová knihovna
Aktualizováno 22. 9. 2026
Komponentová knihovna je sada znovupoužitelných prvků rozhraní (tlačítka, formuláře, produktové karty) připravených ve Figmě nebo v kódu. Je praktickou, „stavební" částí design systému.
Rychlá fakta
- Typ
- sada znovupoužitelných UI komponent (design i kód)
- Cena
- Storybook je open source (licence MIT) a zdarma; sdílené knihovny ve Figmě vyžadují placený tarif (k 9/2026, aktuální ceník ověřte u poskytovatele)
- Nástroje
- Figma (knihovny komponent), Storybook — stabilní řada 10, verze 11 v přípravě (k 9/2026)
- Časová náročnost zavedení
- řádově týdny pro základní sadu (tlačítka, formuláře, karty), průběžně další komponenty
- Náročnost zavedení
- střední — vyžaduje komponentový frontend (React, Vue, Svelte, Web Components)
Co to je
Komponentová knihovna je katalog hotových dílů rozhraní. Tlačítko, pole formuláře, výběr varianty, produktová karta, drobečková navigace, modální okno. Každý díl má definované stavy (výchozí, najetí myší, fokus, neaktivní, chyba) a jasná pravidla použití.
Knihovna existuje obvykle ve dvou podobách:
- Designová ve Figmě — komponenty, ze kterých designér skládá návrhy stránek.
- Kódová ve frontendu — skutečné komponenty (React, Vue, Svelte, Web Components), ze kterých vývojář skládá e-shop.
Ideální stav je, když si obě podoby odpovídají jedna k jedné: stejné názvy, stejné varianty, stejné design tokeny.
Rozdíl proti design systému
Pojmy se často zaměňují. Knihovna je jen jedna část celku.
| Komponentová knihovna | Design systém | |
|---|---|---|
| Co obsahuje | hotové UI komponenty | principy, tokeny, komponenty, vzory, dokumentaci, pravidla |
| Otázka, kterou řeší | „Z čeho stránku poskládám?" | „Jak a proč rozhraní navrhujeme?" |
| Kdo ji používá | hlavně designéři a vývojáři | celý tým včetně produktu, obsahu a marketingu |
| Může existovat samostatně | ano | ne — knihovnu potřebuje |
Knihovna bez design systému funguje, ale postupně se rozrůstá o podobné varianty, protože chybí pravidla, kdy kterou použít.
Klíčové nástroje
Figma knihovny. Komponenty, styly a proměnné z jednoho souboru se publikují jako knihovna a používají v dalších souborech. Změna v knihovně se nabídne k aktualizaci všude. Podle nápovědy Figmy je publikování knihoven dostupné jen v placených tarifech (k 9/2026, aktuální ceník ověřte u poskytovatele).
Storybook. Open-source nástroj (licence MIT) pro vývoj, dokumentaci a testování komponent v izolaci, mimo samotný e-shop. Každá komponenta má „stories" — ukázky jednotlivých stavů. Podporuje React, Vue, Angular, Svelte i Web Components a rozšiřuje se doplňky (dokumentace, testy přístupnosti, vizuální testy). K září 2026 je stabilní řada 10 (vydána v říjnu 2025, jen ESM) a ve vývoji je verze 11.
Výhody a limity
Výhody
- Nová stránka nebo landing page se skládá z ověřených dílů, ne od nuly.
- Oprava chyby (třeba chybějící fokus u tlačítka) se udělá jednou a platí všude.
- Storybook slouží jako živá dokumentace — designér, tester i klient vidí všechny stavy bez klikání po e-shopu.
- Snazší testování přístupnosti na úrovni jednotlivých komponent.
Limity
- Potřebuje komponentový frontend. Na krabicové šabloně, kde upravujete HTML a CSS vložením kódu, knihovnu v kódu nevyužijete.
- Údržba: každá změna designu znamená úpravu ve Figmě i v kódu.
- Hrozí „knihovna pro knihovnu" — desítky komponent, které se na webu nepoužívají.
Checklist dobré komponenty
- Má všechny stavy: výchozí, hover, fokus, aktivní, neaktivní, chyba, načítání.
- Používá jen tokeny, žádné natvrdo zapsané barvy a odstupy.
- Funguje z klávesnice a má viditelný fokus.
- Má ukázku ve Storybooku a odpovídající komponentu ve Figmě se stejným názvem.
- Je popsané, kdy ji použít a kdy ne.
Jak to řešíme v Převeďshopu
Komponentovou knihovnu stavíme jako součást služby Design systém nebo při vývoji nového e-shopu. Začínáme komponentami, které mají největší dopad na prodej: produktová karta, výběr varianty, košík a formuláře checkoutu. Ve Figmě připravíme knihovnu, ve frontendu odpovídající komponenty a dokumentaci ve Storybooku. Rozsah a cenu připravíme po konzultaci podle toho, na jaké platformě e-shop běží.