# Copy-paste or headless: which approach to choose for your UI

Copy-paste gives you the code, headless gives you the behaviour. The choice decides who updates the components and what the bundle weighs.

> Page: https://ui.eneawork.it/blog/copy-paste-vs-headless
> Markdown: https://ui.eneawork.it/blog/copy-paste-vs-headless.md

*2026-10-31*

La prima decisione non è quale libreria installare. È dove vive il codice del componente. Da quella risposta dipendono aggiornamenti, bundle, accessibilità e costo di uscita.

## Due modelli, non due gusti

## Quando conviene il copy-paste

Conviene quando il design è specifico, il componente è semplice e il team vuole possedere ogni riga. Un bottone, una card, un badge: il copy-paste elimina una dipendenza e lascia visibile ciò che succede.

Conviene meno quando il componente è complesso. Un dialog accessibile fatto a mano richiede focus trap, ripristino del focus, scroll lock, gestione di Escape e ARIA corrette. Copiare 400 righe che non capisci non è possesso: è debito con una data di scadenza.

## Quando conviene l’headless

Conviene quando il comportamento è difficile e lo stile è tuo. Le primitive headless separano le due cose: tu scrivi l’aspetto, loro garantiscono tastiera, focus e ARIA.

Comportamento difficile → headless. Aspetto specifico → copy-paste. Se il componente ha sia comportamento difficile sia aspetto specifico, combina: primitiva headless più stili tuoi.

## Il test che smaschera la scelta sbagliata

# Quanti file copiati contengono logica di focus o tastiera? rg -l "focus|keydown|aria-" src/components/ui | wc -l # Quante dipendenze entrano per un solo componente? npx depcheck

Se i file copiati contengono gestione di focus e tastiera, stai mantenendo un comportamento che nessuno ha progettato per essere mantenuto. Quella è la zona dove l’headless vince.

## La via di mezzo, spiegata bene

Il modello shadcn/ui è copy-paste di componenti che usano primitive headless. Il codice è tuo, il comportamento difficile resta delegato. Funziona perché il confine è chiaro: tu possiedi lo stile, la primitiva possiede l’interazione.

## Cosa dicono i numeri del catalogo

EneUI indicizza 111.985 componenti da 1.472 librerie (31 ottobre 2026). Il catalogo è utile proprio qui: mostra quanti modelli diversi convivono, con fonte, licenza e dipendenze per ogni record, invece di presentare un solo modello come universale.

## FAQ

### Copy-paste è meglio di una libreria?

Non in assoluto. È meglio quando vuoi possedere lo stile e il componente è semplice. È peggio quando copi comportamento complesso che non sapresti mantenere.

### L’headless è accessibile per definizione?

No. La primitiva gestisce il comportamento, ma tu puoi rompere l’accessibilità con markup, ordine di tabulazione o stili che nascondono il focus.

### Il copy-paste aumenta il bundle?

Spesso lo riduce, perché non installi il resto della libreria. Ma se copi componenti che importano utility pesanti, il risparmio sparisce.

### Come aggiorno componenti copiati?

Tieni nota della versione di origine e confronta i file, non sovrascrivere. Gli aggiornamenti manuali sono il costo reale del modello.

### Posso mixare i due approcci?

Sì, ed è la scelta più comune. Tieni il confine esplicito: headless per l’interazione, copy-paste per l’aspetto.