Otto blocchi shadcn/ui costruiti con i componenti standard, ognuno con anteprima dal vivo e codice da copiare: card di accesso, statistiche, selettore dei prezzi, impostazioni, tab, conferma di eliminazione, stato vuoto ed elenco del team.
shadcn/ui è un insieme di componenti React che copi nel tuo progetto con la sua CLI invece di installarli come dipendenza. Sono costruiti sulle primitive Radix e stilizzati con Tailwind. Il valore sta nel combinarli: qui sotto trovi otto blocchi di uso quotidiano, come una card di accesso, un selettore dei prezzi e una conferma di eliminazione, ognuno dal vivo con il codice.
Cosa ottieni
Le anteprime girano su questa pagina con le nostre copie degli stessi componenti, con i nostri colori, quindi pulsanti e angoli sono un po' diversi dal tema standard. Il codice è shadcn/ui puro e funziona dopo il comando add mostrato per primo.
Sì. shadcn/ui è open source con licenza MIT, quindi puoi usare e modificare i componenti in progetti commerciali.
Non nel senso consueto. Non c'è un pacchetto di componenti da aggiornare; la CLI copia il sorgente nel tuo progetto e da quel momento è tuo. Questo rende facili le modifiche, ma significa che gli aggiornamenti sono manuali.
Sì. Funziona in qualsiasi configurazione React con Tailwind, compresi Vite, React Router e Astro con React. La CLI ti chiede quale framework usi durante init.
Il sito ufficiale ha una serie di blocchi, e molti template della community costruiscono pagine complete a partire da essi. Per partire in fretta, componi in una pagina sezioni come quelle qui, oppure usa un website builder per il sito di marketing e tieni shadcn/ui per l'app.
shadcn/ui non è un pacchetto che importi da npm. La CLI copia il sorgente di ogni componente nel tuo progetto, così è tuo e puoi modificarlo.
Quali componenti usa ogni blocco
Card, Label, Input e Button. Ogni input ha una label visibile collegata con htmlFor; il link secondario sta accanto alla label a cui si riferisce.
Tre card in una griglia responsive. tabular-nums evita che le cifre saltino quando cambiano.
Uno Switch alterna i prezzi mensili e annuali. La label è cliccabile e il cambio di prezzo viene annunciato perché si trova in una regione aria-live.
Ogni riga abbina una Label e una descrizione a uno Switch. Usare Label con htmlFor rende cliccabile tutto il testo, non solo il piccolo interruttore.
Le Tabs di shadcn sono costruite su Radix, quindi frecce, Home e End funzionano già e i ruoli ARIA sono impostati per te.
Dialog gestisce il focus trap, il tasto Escape e il ritorno del focus al trigger. Fai in modo che il pulsante distruttivo dica esattamente cosa succederà.
Uno stato vuoto amichevole dice cosa apparirà qui e offre l'unica azione che lo riempie.
Avatar mostra la foto e ripiega sulle iniziali quando manca o sta ancora caricando. L'immagine ha bisogno di un testo alt con il nome della persona.
Stai costruendo un form o una tabella di dati? Guarda
Invia un'email ai clienti il giorno prima.
Chiedi una recensione dopo ogni visita.
Titolare
Stilista
Accedi
Usa l'email con cui hai prenotato.
Password
Dimenticata?
Pagamento annuale
Studio
Scegli Studio
Notifiche
Profilo
Fatturazione
Il tuo nome, la tua foto e la tua bio.
Il tuo piano e le tue fatture.
Elimina pagina
Eliminare "Chi siamo"?
Rimuove la pagina e il suo link nel menu. Non puoi annullare l'operazione.
Mantieni la pagina
Eliminata (solo demo, non è stato rimosso nulla).
Ancora nessuna prenotazione
Condividi il tuo link di prenotazione e le nuove prenotazioni compariranno qui.
Copia il link di prenotazione
Aggiungine una a mano
Inizia gratis · Nessuna carta di credito richiesta