Acht shadcn/ui-blokken gebouwd uit de standaardcomponenten, elk met een live voorbeeld en code om te kopiëren: inlogkaart, cijfers, prijsschakelaar, instellingen, tabs, verwijderbevestiging, lege staat en teamlijst.
shadcn/ui is een set React-componenten die u met de CLI in uw project kopieert in plaats van ze als dependency te installeren. Ze zijn gebouwd op Radix-primitives en gestyled met Tailwind. De waarde zit in het combineren: hieronder staan acht alledaagse blokken, zoals een inlogkaart, prijsschakelaar en verwijderbevestiging, elk live met code.
Wat u krijgt
De voorbeelden draaien op deze pagina met onze eigen kopieën van dezelfde componenten, in onze kleuren, dus knoppen en hoeken zien er iets anders uit dan in het standaardthema. De code is gewone shadcn/ui en werkt na het add-commando dat als eerste wordt getoond.
Ja. shadcn/ui is open source onder de MIT-licentie, dus u kunt de componenten gebruiken en aanpassen in commerciële projecten.
Niet in de gebruikelijke zin. Er is geen pakket met componenten om bij te werken; de CLI kopieert de broncode naar uw project en vanaf dan is die van u. Dat maakt aanpassen makkelijk, maar updates gaan met de hand.
Ja. Het werkt in elke React-opzet met Tailwind, waaronder Vite, React Router en Astro met React. De CLI vraagt tijdens init welk framework u gebruikt.
De officiële site heeft een set blokken, en veel communitytemplates bouwen daar volledige pagina's mee. Voor een snelle start combineert u secties zoals deze tot een pagina, of gebruikt u een websitebouwer voor de marketingsite en houdt u shadcn/ui voor de app.
shadcn/ui is geen pakket dat u uit npm importeert. De CLI kopieert de broncode van elke component naar uw project, zodat die van u is en u hem kunt aanpassen.
Welke componenten elk blok gebruikt
Card, Label, Input en Button. Elk invoerveld heeft een zichtbaar label dat er met htmlFor aan gekoppeld is; de secundaire link staat naast het label waar hij bij hoort.
Drie kaarten in een responsive grid. tabular-nums voorkomt dat de cijfers verspringen wanneer ze veranderen.
Een Switch wisselt tussen maand- en jaarprijzen. Het label is klikbaar en de prijswijziging wordt voorgelezen omdat die in een aria-live-regio staat.
Elke rij combineert een Label en beschrijving met een Switch. Door Label htmlFor te gebruiken, is de hele tekst klikbaar en niet alleen de kleine schakelaar.
shadcn Tabs zijn gebouwd op Radix, dus pijltoetsen, Home en End werken al en de ARIA-rollen zijn voor u ingesteld.
Dialog regelt het vasthouden van de focus, Escape en het terugzetten van de focus naar de trigger. Laat de destructieve knop precies zeggen wat er gaat gebeuren.
Een vriendelijke lege staat vertelt wat hier zal verschijnen en biedt de ene actie die hem vult.
Avatar toont de foto en valt terug op initialen wanneer die ontbreekt of nog laadt. De afbeelding heeft alt-tekst met de naam van de persoon nodig.
Bouwt u een formulier of een datatabel? Bekijk
Mail klanten een dag van tevoren.
Vraag na elk bezoek om een review.
Eigenaar
Stylist
Inloggen
Gebruik het e-mailadres waarmee u hebt geboekt.
Wachtwoord
Vergeten?
Jaarlijks betalen
Studio
Kies Studio
Meldingen
Profiel
Facturering
Uw naam, foto en bio.
Uw abonnement en facturen.
Pagina verwijderen
"Over ons" verwijderen?
Dit verwijdert de pagina en de menulink. U kunt dit niet ongedaan maken.
Pagina behouden
Verwijderd (alleen demo, er is niets verwijderd).
Nog geen boekingen
Deel uw boekingslink en nieuwe boekingen verschijnen hier.
Boekingslink kopiëren
Voeg er handmatig een toe
Gratis beginnen · Geen creditcard nodig