> ## 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. # Componente > Preconfigurări de design partajate și blocuri reutilizabile pentru construirea aplicațiilor, alcătuite din primitivele Twenty UI. ## Prezentare generală Componentele combină [primitivele](https://docs.twenty.com/ro/ui/primitives/overview) în preconfigurări de design recurente și blocuri reutilizabile pentru construirea aplicațiilor. La fel ca primitivele, acestea primesc date și callback-uri de la aplicația dvs. Utilizați importul familiei corespunzătoare afișat mai jos. Punctul de intrare agregat `twenty-ui/components` rămâne, de asemenea, disponibil. Editorul de cod are propriul punct de intrare, `twenty-ui/components/code-editor`, deoarece necesită Monaco. Consultați [Noțiuni introductive](https://docs.twenty.com/ro/ui/getting-started.md) pentru instalare și configurarea temei. ## Intrare Importați din `twenty-ui/components/input`. | Component | Scop | | - | - | | [MainButton](https://docs.twenty.com/ro/ui/components/input/main-button.md) | Acțiuni proeminente cu o suprafață solidă, elevație și text semiîngroșat. | | [LightButton](https://docs.twenty.com/ro/ui/components/input/light-button.md) | Acțiuni ușoare cu accent standard sau subtil. | | [Buton pictogramă](https://docs.twenty.com/ro/ui/components/input/icon-button.md) | Acțiuni cu pictograme pătrate sau rotunde, bazate pe Button. | | [LightIconButton](https://docs.twenty.com/ro/ui/components/input/light-icon-button.md) | Acțiuni cu pictograme ușoare, cu accent standard sau subtil. | | [Buton de reacție](https://docs.twenty.com/ro/ui/components/input/reaction-button.md) | Reacții emoji cu un număr și o stare de apăsare controlată. | | [PhoneCountryPicker](https://docs.twenty.com/ro/ui/components/input/phone-country-picker.md) | Steaguri de țară care pot fi căutate și selectarea codului de apelare. | | [NumberStepper](https://docs.twenty.com/ro/ui/components/input/number-stepper.md) | Introducere numerică compactă cu butoane de incrementare opționale. | | [SearchInput](https://docs.twenty.com/ro/ui/components/input/search-input.md) | Text de căutare și controale opționale de filtrare. | | [CountrySelect](https://docs.twenty.com/ro/ui/components/input/country-select.md) | Opțiuni de țări în care se poate căuta, steaguri și o selecție goală explicită. | | [CurrencyPicker](https://docs.twenty.com/ro/ui/components/input/currency-picker.md) | Opțiuni de monedă în care se poate căuta, cu formatare explicită. | | [ImageInput](https://docs.twenty.com/ro/ui/components/input/image-input.md) | Selectarea și previzualizarea imaginilor cu încărcări deținute de apelant. | | [Control segmentat](https://docs.twenty.com/ro/ui/components/input/segmented-control.md) | Opțiune radio compactă cu opțiuni de text sau pictograme alăturate. | ## Navigare Importați din `twenty-ui/components/navigation`. | Component | Scop | | - | - | | [Buton element listă](https://docs.twenty.com/ro/ui/components/navigation/list-item-button.md) | Butoane de acțiune native cu stil de rând de listă. | | [Dropdown](https://docs.twenty.com/ro/ui/components/navigation/dropdown.md) | Meniuri de acțiuni, selectoare cu căutare și panouri de formular. | | [TabButton](https://docs.twenty.com/ro/ui/components/navigation/tab-button.md) | Linkuri de rută și acțiuni adiacente cu același aspect ca filele. | ## Date afișate Importați din `twenty-ui/components/data-display`. | Component | Scop | | - | - | | [Rând cu detalii](https://docs.twenty.com/ro/ui/components/data-display/details-row.md) | Etichete aliniate, valori cu încadrare pe mai multe rânduri și acțiuni opționale. | | [MetricRow](https://docs.twenty.com/ro/ui/components/data-display/metric-row.md) | Etichete și valori formatate cu progres determinat opțional. | | [AvatarGroup](https://docs.twenty.com/ro/ui/components/data-display/avatar-group.md) | Avatare suprapuse și numărători de depășire. | | [CommandBlock](https://docs.twenty.com/ro/ui/components/data-display/command-block.md) | Text de comandă cu o acțiune opțională de copiere. | | [JsonTree](https://docs.twenty.com/ro/ui/components/data-display/json-tree.md) | Valori JSON extensibile și intrări denumite. | | [StackIcon](https://docs.twenty.com/ro/ui/components/data-display/stack-icon.md) | Pictograme cu un element mai mic suprapus în colțul din dreapta jos. | | [TintedIconTile](https://docs.twenty.com/ro/ui/components/data-display/tinted-icon-tile.md) | Pictograme pe plăci colorate conform temei. | ## Feedback Importați din `twenty-ui/components/feedback`. | Component | Scop | | - | - | | [Toast](https://docs.twenty.com/ro/ui/components/feedback/toast.md) | Notificări, gestionarea cozii și închiderea acestora. | | [Callout](https://docs.twenty.com/ro/ui/components/feedback/callout.md) | Mesaje semantice cu acțiuni și posibilitate de închidere. | | [InlineBanner](https://docs.twenty.com/ro/ui/components/feedback/inline-banner.md) | Bannere compacte cu acțiuni opționale. | | [ToastProvider and Toaster](https://docs.twenty.com/ro/ui/components/feedback/toast.md#application-notifications) | Stocări de notificări, limite de coadă și redare. | ## Aspect Importați din `twenty-ui/components/layout`. | Component | Scop | | - | - | | [Section](https://docs.twenty.com/ro/ui/components/layout/section.md) | Conținut asociat cu un titlu, o descriere și o acțiune opțională. | | [AnimatedIconCrossfade](https://docs.twenty.com/ro/ui/components/layout/animated-icon-crossfade.md) | Tranziții ale pictogramelor determinate de stare. | | [OverflowingList](https://docs.twenty.com/ro/ui/components/layout/overflowing-list.md) | Încadrați elementele vizibile și grupați surplusul. | ## Setări Importați din `twenty-ui/components/settings`. | Component | Scop | | - | - | | [SettingsRow](https://docs.twenty.com/ro/ui/components/settings/settings-row.md) | Comutatoare etichetate pentru setări și filtre. | ## Editor de Cod Importați din `twenty-ui/components/code-editor`. | Component | Scop | | - | - | | [CodeEditor](https://docs.twenty.com/ro/ui/components/code-editor/code-editor.md) | Editare de cod cu Monaco, un antet opțional și tema Twenty. | Rutarea, formatarea înregistrărilor, substituenții de produs și starea aplicației aparțin aplicației gazdă. Componentele partajate expun proprietăți de date, callback și randare pentru acele integrări. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.