Osiem bloków shadcn/ui zbudowanych ze standardowych komponentów, każdy z podglądem na żywo i kodem do skopiowania: karta logowania, statystyki, przełącznik cennika, ustawienia, karty, potwierdzenie usunięcia, pusty stan i lista zespołu.
shadcn/ui to zestaw komponentów React, które kopiujesz do projektu za pomocą CLI, zamiast instalować je jako zależność. Są zbudowane na prymitywach Radix i stylowane Tailwindem. Ich wartość ujawnia się przy łączeniu: poniżej znajdziesz osiem codziennych bloków, takich jak karta logowania, przełącznik cennika i potwierdzenie usunięcia, każdy na żywo z kodem.
Co dostajesz
Podglądy działają na tej stronie na naszych własnych kopiach tych samych komponentów, w naszych kolorach, więc przyciski i narożniki wyglądają nieco inaczej niż w standardowym motywie. Kod to czysty shadcn/ui i działa po uruchomieniu pokazanego najpierw polecenia add.
Tak. shadcn/ui jest open source na licencji MIT, więc możesz używać i zmieniać komponenty w projektach komercyjnych.
Nie w zwykłym sensie. Nie ma pakietu komponentów do aktualizowania; CLI kopiuje kod źródłowy do Twojego projektu i od tej chwili należy on do Ciebie. To ułatwia zmiany, ale oznacza, że aktualizacje są ręczne.
Tak. Działa w każdej konfiguracji React z Tailwind, w tym z Vite, React Router i Astro z React. CLI pyta podczas init, którego frameworka używasz.
Oficjalna strona ma zestaw bloków, a wiele szablonów społeczności buduje z nich całe strony. Na szybki start złóż sekcje podobne do tych tutaj w stronę albo użyj kreatora stron do witryny marketingowej, a shadcn/ui zostaw dla aplikacji.
shadcn/ui nie jest pakietem importowanym z npm. CLI kopiuje kod źródłowy każdego komponentu do Twojego projektu, więc należy on do Ciebie i możesz go edytować.
Których komponentów używa każdy blok
Card, Label, Input i Button. Każde pole ma widoczną etykietę powiązaną z nim przez htmlFor; dodatkowy link znajduje się obok etykiety, której dotyczy.
Trzy karty w responsywnej siatce. tabular-nums sprawia, że liczby nie skaczą, gdy się zmieniają.
Switch przełącza ceny miesięczne i roczne. Etykieta jest klikalna, a zmiana ceny jest odczytywana, ponieważ znajduje się w regionie aria-live.
Każdy wiersz łączy Label i opis ze Switch. Użycie Label htmlFor sprawia, że klikalny jest cały tekst, a nie tylko mały przełącznik.
Tabs w shadcn są zbudowane na Radix, więc strzałki, Home i End już działają, a role ARIA są ustawione za Ciebie.
Dialog obsługuje zatrzymanie fokusu, Escape i powrót fokusu do triggera. Niech przycisk destrukcyjny mówi dokładnie, co się stanie.
Przyjazny pusty stan mówi, co się tu pojawi, i oferuje jedną akcję, która go wypełni.
Avatar pokazuje zdjęcie, a gdy go brakuje lub wciąż się wczytuje, wyświetla inicjały. Obraz potrzebuje tekstu alt z imieniem osoby.
Budujesz formularz lub tabelę danych? Zobacz
Wyślij klientom e-mail dzień wcześniej.
Poproś o opinię po każdej wizycie.
Właścicielka
Stylista
Zaloguj się
Użyj adresu e-mail, którego użyłeś przy rezerwacji.
Hasło
Nie pamiętasz?
Płać rocznie
Studio
Wybierz Studio
Powiadomienia
Profil
Płatności
Twoje imię, zdjęcie i bio.
Twój plan i faktury.
Usuń stronę
Usunąć "O nas"?
To usuwa stronę i jej link w menu. Nie można tego cofnąć.
Zachowaj stronę
Usunięto (tylko demo, nic nie zostało usunięte).
Brak rezerwacji
Udostępnij link do rezerwacji, a nowe rezerwacje pojawią się tutaj.
Kopiuj link do rezerwacji
Dodaj ręcznie
Zacznij za darmo · Bez karty kredytowej