21st dev jest to zbiór komponentów przygotowanych pod wygodne przeglądanie i filtrowanie aby łatwo znaleźć te, których właśnie potrzebujemy lub czujemy, że będą pasować do naszego projektu.

Wprowadzamy je przez gotowe prompty, które są dostępne do skopiowania przy każdym komponencie. Ten sposób sprawia, że możemy łatwo dodać dodatkowe instrukcje aby był on dopasowany do naszego layoutu i współgrał z elementami które już mamy stworzone.

Każdy prompt zaczyna się od:

You are given a task to integrate an existing React component in the codebase The codebase should support: - shadcn project structure - Tailwind CSS - Typescript If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Dlatego najlepiej, żeby AI nie zmieniało za dużo, abyśmy mieli już je skonfigurowane albo zaczynali od początku.

Jak używać

Wchodzimy na stronę 21 dev i wybieramy kategorię elementów która nas interesuje. W każdej z nich zobaczymy po kilka propozycji z których możemy wybierać. Kiedy najedziemy na nie myszką większość z nich ma przygotowany filmik z tego jak działa dany komponent i zostanie on odtworzony na miniaturce, co znacznie usprawnia przeszukiwania.

Kiedy któryś z komponentów nam się spodoba to klikamy na niego, otwieramy jego podgląd i wybieramy “copy prompt”.

Przechodzimy do naszego projektu i wklejamy go do naszego asystenta kodowania. Jeżeli czegoś potrzebujemy, trzymamy komponenty w jakimś specyficznym folderze, chcemy dać to w jakimś konkretnym miejscu lub użyć naszych kolorów to dopiszmy to do promptu. Wkleiłem prompt na mojej stronie testowej i dopisałem “Wklej ten komponent jako tło sekcji hero”.

Wynik wyszedł idealny

Shader działa płynnie a struktura na tym nie ucierpiała. Aby jeszcze bardziej dopasować to do mojego stylu poprosiłem aby animacja na shaderze była bardziej niebieska - bardzo niekonkretnie… ale na moje wyszło oko wyszło jeszcze lepiej

Na tyle lepiej, że chyba wrzucę go na swoją stronę 😎

Co jeszcze znajdziemy na 21dev

Magic chat

Zanim wrzucimy nasz wybrany komponent do naszej aplikacji możemy go wrzucić jeszcze do Magic Chata. Pozwala on na dostosowanie komponentu z AI jeszcze w przeglądarce. Po przerobieniu możemy tak samo skopiować prompt i przenieść się do swojego środowiska już z wprowadzonymi zmianami.

Niestety jak ja to testowałem to nie działało to za bardzo dobrze a wynik był “rozjechany”. O wiele lepiej zmiany wprowadzało mi się w Cursorze.

Inspiracje

Na tej stronie możemy wyszukać jak wyglądają elementy, których szukamy, na innych stronach. Do wyboru mamy możliwość szukania za aplikacjami albo komponentami. Przy wyszukiwaniu aplikacji możemy wpisać na przykład “SaaS” i pojawią nam się ich Landingi.

Kiedy wybierzemy jeden z nich to możemy przeglądać poszczególne fragmenty strony.

Wyszukiwanie komponentów działa praktycznie tak samo, tylko że szuka tych poszczególnych części stron (aplikacji)

Kreatorzy

Tutaj możemy przeszukiwać komponenty po ich twórcach. Pozwala to również na filtrowanie komponentów po ich zbiorach, na przykład Shadcn czy Aceternity UI.

To będzie na tyle z tej strony. Liczę, że przyda Ci się w Twoich projektach. Zapraszam do obserwacji lub kontaktu na Linkedin i widzimy się w następnych postach.