> ## Documentation Index > Fetch the complete documentation index at: https://docs.twenty.com/llms.txt > Use this file to discover all available pages before exploring further. # Componenti > Preset di progettazione condivisi e blocchi di base riutilizzabili per la creazione di app composti da primitive Twenty UI. ## Panoramica I componenti combinano le [primitive](https://docs.twenty.com/it/ui/primitives/overview) in preset di progettazione ricorrenti e blocchi di base riutilizzabili per la creazione di app. Come le primitive, ricevono dati e callback dalla tua applicazione. Usa l'importazione della famiglia corrispondente mostrata di seguito. Rimane disponibile anche la voce aggregata `twenty-ui/components`. L'editor di codice ha il proprio punto di ingresso, `twenty-ui/components/code-editor`, perché richiede Monaco. Consulta [Guida introduttiva](https://docs.twenty.com/it/ui/getting-started.md) per l'installazione e la configurazione del tema. ## Input Importa da `twenty-ui/components/input`. | Component | Scopo | | - | - | | [MainButton](https://docs.twenty.com/it/ui/components/input/main-button.md) | Azioni principali con superficie piena, elevazione e testo semigrassetto. | | [LightButton](https://docs.twenty.com/it/ui/components/input/light-button.md) | Azioni leggere con enfasi standard o discreta. | | [IconButton](https://docs.twenty.com/it/ui/components/input/icon-button.md) | Azioni icona quadrate o rotonde basate su Button. | | [LightIconButton](https://docs.twenty.com/it/ui/components/input/light-icon-button.md) | Azioni icona leggere con enfasi standard o discreta. | | [Pulsante di reazione](https://docs.twenty.com/it/ui/components/input/reaction-button.md) | Reazioni emoji con conteggio e stato di pressione controllato. | | [PhoneCountryPicker](https://docs.twenty.com/it/ui/components/input/phone-country-picker.md) | Bandiere dei paesi ricercabili e selezione del prefisso internazionale. | | [NumberStepper](https://docs.twenty.com/it/ui/components/input/number-stepper.md) | Input numerico compatto con pulsanti di incremento/decremento opzionali. | | [SearchInput](https://docs.twenty.com/it/ui/components/input/search-input.md) | Testo di ricerca e controlli filtro facoltativi. | | [CountrySelect](https://docs.twenty.com/it/ui/components/input/country-select.md) | Opzioni dei paesi ricercabili, bandiere e una selezione vuota esplicita. | | [CurrencyPicker](https://docs.twenty.com/it/ui/components/input/currency-picker.md) | Opzioni di valuta ricercabili con formattazione esplicita. | | [ImageInput](https://docs.twenty.com/it/ui/components/input/image-input.md) | Selezione e anteprima delle immagini con caricamenti di proprietà del chiamante. | | [Controllo segmentato](https://docs.twenty.com/it/ui/components/input/segmented-control.md) | Scelta radio compatta con opzioni di testo o icona unite. | ## Navigazione Importa da `twenty-ui/components/navigation`. | Component | Scopo | | - | - | | [Pulsante elemento elenco](https://docs.twenty.com/it/ui/components/navigation/list-item-button.md) | Pulsanti di azione nativi con stile delle righe dell'elenco. | | [Dropdown](https://docs.twenty.com/it/ui/components/navigation/dropdown.md) | Menu di azioni, selettori ricercabili e pannelli di moduli. | | [TabButton](https://docs.twenty.com/it/ui/components/navigation/tab-button.md) | Collega percorsi e azioni adiacenti con lo stesso aspetto delle schede. | ## Dati visualizzati Importa da `twenty-ui/components/data-display`. | Component | Scopo | | - | - | | [Riga dei dettagli](https://docs.twenty.com/it/ui/components/data-display/details-row.md) | Etichette allineate, valori su più righe e azioni facoltative. | | [MetricRow](https://docs.twenty.com/it/ui/components/data-display/metric-row.md) | Etichette e valori formattati con avanzamento determinato opzionale. | | [AvatarGroup](https://docs.twenty.com/it/ui/components/data-display/avatar-group.md) | Avatar sovrapposti e conteggi di overflow. | | [CommandBlock](https://docs.twenty.com/it/ui/components/data-display/command-block.md) | Testo del comando con un'azione di copia facoltativa. | | [JsonTree](https://docs.twenty.com/it/ui/components/data-display/json-tree.md) | Valori JSON espandibili e voci denominate. | | [StackIcon](https://docs.twenty.com/it/ui/components/data-display/stack-icon.md) | Icone con un elemento più piccolo sovrapposto nell'angolo in basso a destra. | | [TintedIconTile](https://docs.twenty.com/it/ui/components/data-display/tinted-icon-tile.md) | Icone su riquadri colorati in base al tema. | ## Feedback Importa da `twenty-ui/components/feedback`. | Component | Scopo | | - | - | | [Toast](https://docs.twenty.com/it/ui/components/feedback/toast.md) | Notifiche, gestione della coda e chiusura. | | [Callout](https://docs.twenty.com/it/ui/components/feedback/callout.md) | Messaggi semantici con azioni e chiusura. | | [InlineBanner](https://docs.twenty.com/it/ui/components/feedback/inline-banner.md) | Banner compatti con azioni facoltative. | | [ToastProvider e Toaster](https://docs.twenty.com/it/ui/components/feedback/toast.md#application-notifications) | Archivi delle notifiche, limiti della coda e rendering. | ## Layout Importa da `twenty-ui/components/layout`. | Component | Scopo | | - | - | | [Section](https://docs.twenty.com/it/ui/components/layout/section.md) | Contenuti correlati con un'intestazione, una descrizione e un'azione facoltativa. | | [AnimatedIconCrossfade](https://docs.twenty.com/it/ui/components/layout/animated-icon-crossfade.md) | Transizioni delle icone basate sullo stato. | | [OverflowingList](https://docs.twenty.com/it/ui/components/layout/overflowing-list.md) | Adatta gli elementi visibili e raccoglie quelli in eccesso. | ## Impostazioni Importa da `twenty-ui/components/settings`. | Component | Scopo | | - | - | | [SettingsRow](https://docs.twenty.com/it/ui/components/settings/settings-row.md) | Interruttori etichettati per impostazioni e filtri. | ## Editor di Codice Importa da `twenty-ui/components/code-editor`. | Component | Scopo | | - | - | | [CodeEditor](https://docs.twenty.com/it/ui/components/code-editor/code-editor.md) | Modifica del codice con Monaco, un'intestazione facoltativa e il tema Twenty. | Il routing, la formattazione dei record, i segnaposto di prodotto e lo stato dell'applicazione appartengono all'applicazione host. I componenti condivisi espongono prop di dati, callback e di rendering per tali integrazioni. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.