Przy budowaniu nowego projektu mamy kilka możliwości jak podejść do tematu User Interface (UI).

Pierwszą opcją jest pozwolić AI samemu budować komponenty, natomiast kiedy nie zachowamy przy tym dyscypliny to szybko elementy mogą zacząć nam się różnić między stronami (Jeżeli nie jest to celowy zabieg to lepiej zadbać aby wyglądały w ten sam sposób by nie mylić użytkownika).

Możemy też tworzyć komponenty i stylizować je samemu, co jest oczywiście dobre ale za to czasochłonne iii … to nie o tym na tym blogu.

Nastomiast aby znacznie ułatwić sobie życie możemy wykorzystać gotowe biblioteki komponentów. Większość z nich wygląda zazwyczaj bardzo estetycznie i wystarczy, że odpowiednio je tylko dobierzemy do naszego projektu. Minusem takiego rozwiązania jest to że tracimy wtedy na unikalności. Z takich Bibliotek nie będziemy korzystać tylko my.

W tym poście skupię się na bibliotece Shadcn ponieważ:

• Jest doskonale rozumiana przez AI, co znacznie ułatwia pracę

• Ma przygotowane MCP, które dodatkowo usprawnia integrację z AI

• To MCP można łatwo rozbudować o kolejne rejestry komponentów takie jak Aceternity UI czy Animate UI - pełną listę znajdziesz tutaj

  https://ui.shadcn.com/r/registries.json

• Jest do niej stworzony bardzo ciekawy dodatek, który pokażę na końcu posta…

Instalacja

Zaczniemy od przygotowania bazowego projektu z Shadcn, na którym będziemy mogli działać. Aby to zrobić najłatwiej jest użyć tej komenty w terminalu.

npx shadcn@latest init

Aby móc ją wykonać trzeba mieć zainstalowany node.js na komputerze.

Po wywołaniu komendy odpowiedz na parę pytań, które system zada i cały fundament projektu zostanie automatycznie utworzony. Teraz aby odpalić i sprawdzić czy wszystko działa wpisz kolejno.

cd <nazwa-twojego-nowego-projektu> npm run dev

Po poprawnym zainstalowaniu powinieneś zobaczyć taką piękną minimalistyczną stronę główną z drobną reklamą

Jak mamy już bazę to przejdźmy do dodania MCP. Dokładną instalację można znaleźć tutaj https://ui.shadcn.com/docs/mcp. Natomiast poniżej znajdziesz, instalację dla Cursora i Claude Code, których używam.

Do Cursora dodasz go wchodząc w ustawienia → MCP i wrzucając tam ten JSON

{ "mcpServers": { "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] } } }

Jeżeli wszystko jest poprawnie powinieneś zobaczyć go na liście

Do Claude Code dodasz tworząc plik .mcp.json w głównym katalogu i wklejając do niego ten sam JSON co jest powyżej.

Zrestartuj Claude Code a potem wywołaj komendę “/mcp”. Jeżeli działa to zobaczysz.

Działanie

Aby użyć teraz nowo zainstalowanego MCP musimy użyć w prompcie zwrot Shadcn i nasz model sam zacznie szukać za elementami pasującymi do naszego designu. W tym celu użyję poniższą instrukcję i będę działał na jej wyniku.

W rezultacie dostaliśmy prosty i minimalistyczny dashboard związany z finansami

Aby porównać jak wyglądałby taki dashboard bez MCP i shadcn utworzyłem nowy projekt i użyłem dokładnie to samo polecenie ale bez ostatniego zdania. Wynikowy dashboard prezentuje się tak

Pod względem rozłożenia są bardzo podobne natomiast możemy zobaczy różnice w stylistycznych detalach. Komponenty z Shadcn są bardziej minimalistyczne i kompaktowe dzięki czemu więcej będziemy w stanie zmieścić nie przytłaczając użytkownika. Do tego wydaje się że tekst w opisach i na wykresie jest zrobiony w ten sam sposób co też wygląda o wiele lepiej. Używając Shadcn na pewno będzie nam również o wiele łatwiej tworzyć kolejne strony w tym samym stylu.

Ale teraz pora na ciekawy bonus, który sprawia, że jeszcze lepiej pracuje się z tą biblioteką.

Bonus

Tweakcn jest to strona, która pozwala nam bardzo prosto dostosować kolorystykę naszego projektu, który zbudowaliśmy na komponentach z Shadcn. Na tej stronie https://tweakcn.com/editor/theme możesz wybrać jeden z przygotowanych motywów albo dostosować go samemu. Od razu widzisz jego podgląd a żeby go dodać w swoim projekcie używasz tylko jeden linijki kodu, którą możesz wziąć prosto ze strony klikając przycisk Code w prawym rogu ekranu.

Ja wybrałem motyw Mocha Mousee i aby go dodać u siebie wpisuję

npx shadcn@latest add <https://tweakcn.com/r/themes/mocha-mousse.json>

I gotowe. Dashboard ma już kolorystykę, którą sobie wybrałem

Dzięki za przeczytanie! Na ten moment nie ma jeszcze newsletterów, zapisów więc nie mam czym cię katować ;). Zapraszam natomiast do obserwacji lub kontaktu na Linkedin

Shadcn

Jest to jedna z częściej używanych bibliotek w aplikacjach

https://ui.shadcn.com

https://tweakcn.com

Aceternity

https://ui.aceternity.com

Ant design

https://ant.design/components/tour

21 Dev

https://21st.dev/home