> ## 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. # Componentes > Preajustes de diseño compartidos y bloques de construcción de aplicaciones reutilizables compuestos por primitivas de Twenty UI. ## Resumen Los componentes combinan [primitivas](https://docs.twenty.com/es/ui/primitives/overview) en preajustes de diseño recurrentes y bloques de construcción de aplicaciones reutilizables. Al igual que las primitivas, reciben datos y callbacks de tu aplicación. Use la importación de la familia correspondiente que se muestra a continuación. La entrada agregada `twenty-ui/components` también sigue estando disponible. El editor de código tiene su propio punto de entrada, `twenty-ui/components/code-editor`, porque requiere Monaco. Consulta [Primeros pasos](https://docs.twenty.com/es/ui/getting-started.md) para la instalación y la configuración del tema. ## Entrada Importe desde `twenty-ui/components/input`. | Component | Propósito | | - | - | | [MainButton](https://docs.twenty.com/es/ui/components/input/main-button.md) | Acciones destacadas con una superficie sólida, elevación y texto en seminegrita. | | [LightButton](https://docs.twenty.com/es/ui/components/input/light-button.md) | Acciones ligeras con énfasis estándar o sutil. | | [IconButton](https://docs.twenty.com/es/ui/components/input/icon-button.md) | Acciones de icono cuadradas o redondas basadas en Button. | | [LightIconButton](https://docs.twenty.com/es/ui/components/input/light-icon-button.md) | Acciones de icono ligeras con énfasis estándar o sutil. | | [ReactionButton](https://docs.twenty.com/es/ui/components/input/reaction-button.md) | Reacciones con emojis con un recuento y un estado de pulsación controlado. | | [PhoneCountryPicker](https://docs.twenty.com/es/ui/components/input/phone-country-picker.md) | Banderas de países con búsqueda y selección de código de llamada. | | [Selector numérico](https://docs.twenty.com/es/ui/components/input/number-stepper.md) | Entrada numérica compacta con botones de incremento opcionales. | | [SearchInput](https://docs.twenty.com/es/ui/components/input/search-input.md) | Texto de búsqueda y controles de filtro opcionales. | | [CountrySelect](https://docs.twenty.com/es/ui/components/input/country-select.md) | Opciones de país con búsqueda, banderas y una selección vacía explícita. | | [CurrencyPicker](https://docs.twenty.com/es/ui/components/input/currency-picker.md) | Opciones de moneda con búsqueda y formato explícito. | | [ImageInput](https://docs.twenty.com/es/ui/components/input/image-input.md) | Selección y vista previa de imágenes con cargas propiedad de quien realiza la llamada. | | [Control segmentado](https://docs.twenty.com/es/ui/components/input/segmented-control.md) | Opción de radio compacta con opciones de texto o iconos agrupados. | ## Navegación Importe desde `twenty-ui/components/navigation`. | Component | Propósito | | - | - | | [ListItemButton](https://docs.twenty.com/es/ui/components/navigation/list-item-button.md) | Botones de acción nativos con estilo de fila de lista. | | [Dropdown](https://docs.twenty.com/es/ui/components/navigation/dropdown.md) | Menús de acciones, selectores con búsqueda y paneles de formulario. | | [TabButton](https://docs.twenty.com/es/ui/components/navigation/tab-button.md) | Enlaces de rutas y acciones adyacentes con la misma apariencia que las pestañas. | ## Visualización de datos Importe desde `twenty-ui/components/data-display`. | Component | Propósito | | - | - | | [DetailsRow](https://docs.twenty.com/es/ui/components/data-display/details-row.md) | Etiquetas alineadas, valores con ajuste de línea y acciones opcionales. | | [MetricRow](https://docs.twenty.com/es/ui/components/data-display/metric-row.md) | Etiquetas y valores formateados con progreso determinado opcional. | | [AvatarGroup](https://docs.twenty.com/es/ui/components/data-display/avatar-group.md) | Avatares superpuestos y recuentos de desbordamiento. | | [CommandBlock](https://docs.twenty.com/es/ui/components/data-display/command-block.md) | Texto de comando con una acción de copia opcional. | | [JsonTree](https://docs.twenty.com/es/ui/components/data-display/json-tree.md) | Valores JSON expandibles y entradas con nombre. | | [StackIcon](https://docs.twenty.com/es/ui/components/data-display/stack-icon.md) | Iconos con un elemento más pequeño apilado en la esquina inferior derecha. | | [TintedIconTile](https://docs.twenty.com/es/ui/components/data-display/tinted-icon-tile.md) | Iconos en mosaicos con colores del tema. | ## Retroalimentación Importe desde `twenty-ui/components/feedback`. | Component | Propósito | | - | - | | [Toast](https://docs.twenty.com/es/ui/components/feedback/toast.md) | Notificaciones, gestión de colas y descarte. | | [Callout](https://docs.twenty.com/es/ui/components/feedback/callout.md) | Mensajes semánticos con acciones y opción de descartar. | | [InlineBanner](https://docs.twenty.com/es/ui/components/feedback/inline-banner.md) | Banners compactos con acciones opcionales. | | [ToastProvider y Toaster](https://docs.twenty.com/es/ui/components/feedback/toast.md#application-notifications) | Almacenes de notificaciones, límites de cola y renderizado. | ## Diseño Importe desde `twenty-ui/components/layout`. | Component | Propósito | | - | - | | [Section](https://docs.twenty.com/es/ui/components/layout/section.md) | Contenido relacionado con un encabezado, una descripción y una acción opcional. | | [AnimatedIconCrossfade](https://docs.twenty.com/es/ui/components/layout/animated-icon-crossfade.md) | Transiciones de iconos controladas por el estado. | | [OverflowingList](https://docs.twenty.com/es/ui/components/layout/overflowing-list.md) | Ajuste los elementos visibles y recopile el desbordamiento. | ## Configuración Importe desde `twenty-ui/components/settings`. | Component | Propósito | | - | - | | [SettingsRow](https://docs.twenty.com/es/ui/components/settings/settings-row.md) | Interruptores etiquetados para configuraciones y filtros. | ## Editor de Código Importe desde `twenty-ui/components/code-editor`. | Component | Propósito | | - | - | | [CodeEditor](https://docs.twenty.com/es/ui/components/code-editor/code-editor.md) | Edición de código con Monaco, un encabezado opcional y el tema Twenty. | El enrutamiento, el formato de registros, los marcadores de posición de productos y el estado de la aplicación pertenecen a la aplicación anfitriona. Los componentes compartidos exponen props de datos, devolución de llamada y renderizado para esas integraciones. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.