> ## 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. # Компоненты > Общие предустановки дизайна и повторно используемые строительные блоки приложений, составленные из примитивов Twenty UI. ## Обзор Компоненты объединяют [примитивы](https://docs.twenty.com/ru/ui/primitives/overview) в повторяющиеся предустановки дизайна и повторно используемые строительные блоки приложений. Как и примитивы, они получают данные и функции обратного вызова из вашего приложения. Используйте соответствующий импорт семейства, указанный ниже. Агрегированная точка входа `twenty-ui/components` также остаётся доступной. У редактора кода есть собственная точка входа, `twenty-ui/components/code-editor`, поскольку для него требуется Monaco. Сведения об установке и настройке темы см. в разделе [Начало работы](https://docs.twenty.com/ru/ui/getting-started.md). ## Ввод Импортируйте из `twenty-ui/components/input`. | Component | Назначение | | - | - | | [MainButton](https://docs.twenty.com/ru/ui/components/input/main-button.md) | Основные действия со сплошной поверхностью, приподнятым видом и полужирным текстом. | | [LightButton](https://docs.twenty.com/ru/ui/components/input/light-button.md) | Легковесные действия со стандартным или ненавязчивым акцентом. | | [IconButton](https://docs.twenty.com/ru/ui/components/input/icon-button.md) | Квадратные или круглые действия со значками, построенные на основе Button. | | [LightIconButton](https://docs.twenty.com/ru/ui/components/input/light-icon-button.md) | Облегчённые действия со значками со стандартным или ненавязчивым акцентом. | | [Кнопка реакции](https://docs.twenty.com/ru/ui/components/input/reaction-button.md) | Реакции-эмодзи с количеством и управляемым состоянием нажатия. | | [Выбор страны для телефона](https://docs.twenty.com/ru/ui/components/input/phone-country-picker.md) | Флаги стран с возможностью поиска и выбором кода вызова. | | [NumberStepper](https://docs.twenty.com/ru/ui/components/input/number-stepper.md) | Компактное числовое поле ввода с необязательными кнопками шага. | | [Поле поиска](https://docs.twenty.com/ru/ui/components/input/search-input.md) | Текст поиска и необязательные элементы управления фильтрами. | | [Выбор страны](https://docs.twenty.com/ru/ui/components/input/country-select.md) | Варианты стран с возможностью поиска, флаги и явный пустой выбор. | | [Выбор валюты](https://docs.twenty.com/ru/ui/components/input/currency-picker.md) | Валюты с возможностью поиска и явным форматированием. | | [Ввод изображения](https://docs.twenty.com/ru/ui/components/input/image-input.md) | Выбор и предварительный просмотр изображений с загрузками, принадлежащими вызывающей стороне. | | [Сегментированный элемент управления](https://docs.twenty.com/ru/ui/components/input/segmented-control.md) | Компактный выбор с помощью радиокнопок с объединёнными текстовыми вариантами или вариантами со значками. | ## Навигация Импортируйте из `twenty-ui/components/navigation`. | Component | Назначение | | - | - | | [ListItemButton](https://docs.twenty.com/ru/ui/components/navigation/list-item-button.md) | Нативные кнопки действий со стилизацией строки списка. | | [Раскрывающееся меню](https://docs.twenty.com/ru/ui/components/navigation/dropdown.md) | Меню действий, средства выбора с возможностью поиска и панели форм. | | [Кнопка вкладки](https://docs.twenty.com/ru/ui/components/navigation/tab-button.md) | Ссылки на маршруты и смежные действия с тем же внешним видом, что и вкладки. | ## Отображаемые данные Импортируйте из `twenty-ui/components/data-display`. | Component | Назначение | | - | - | | [DetailsRow](https://docs.twenty.com/ru/ui/components/data-display/details-row.md) | Выровненные метки, переносящиеся значения и необязательные действия. | | [Строка метрик](https://docs.twenty.com/ru/ui/components/data-display/metric-row.md) | Метки и отформатированные значения с необязательным определенным индикатором выполнения. | | [Группа аватаров](https://docs.twenty.com/ru/ui/components/data-display/avatar-group.md) | Перекрывающиеся аватары и счётчики переполнения. | | [Блок команд](https://docs.twenty.com/ru/ui/components/data-display/command-block.md) | Текст команды с необязательным действием копирования. | | [Дерево JSON](https://docs.twenty.com/ru/ui/components/data-display/json-tree.md) | Разворачиваемые значения JSON и именованные записи. | | [StackIcon](https://docs.twenty.com/ru/ui/components/data-display/stack-icon.md) | Значки с меньшим элементом, расположенным в правом нижнем углу. | | [Плитка со значком и оттенком](https://docs.twenty.com/ru/ui/components/data-display/tinted-icon-tile.md) | Значки на плитках цвета темы. | ## Обратная связь Импортируйте из `twenty-ui/components/feedback`. | Component | Назначение | | - | - | | [Всплывающее уведомление](https://docs.twenty.com/ru/ui/components/feedback/toast.md) | Уведомления, управление очередью и закрытие. | | [Выноска](https://docs.twenty.com/ru/ui/components/feedback/callout.md) | Семантические сообщения с действиями и возможностью закрытия. | | [Встроенный баннер](https://docs.twenty.com/ru/ui/components/feedback/inline-banner.md) | Компактные баннеры с необязательными действиями. | | [ToastProvider и Toaster](https://docs.twenty.com/ru/ui/components/feedback/toast.md#application-notifications) | Хранилища уведомлений, ограничения очереди и рендеринг. | ## Макет Импортируйте из `twenty-ui/components/layout`. | Component | Назначение | | - | - | | [Раздел](https://docs.twenty.com/ru/ui/components/layout/section.md) | Связанный контент с заголовком, описанием и необязательным действием. | | [Анимированное плавное переключение значков](https://docs.twenty.com/ru/ui/components/layout/animated-icon-crossfade.md) | Переходы между значками, зависящие от состояния. | | [Список с переполнением](https://docs.twenty.com/ru/ui/components/layout/overflowing-list.md) | Разместите видимые элементы и соберите переполнение. | ## Настройки Импортируйте из `twenty-ui/components/settings`. | Component | Назначение | | - | - | | [Строка настроек](https://docs.twenty.com/ru/ui/components/settings/settings-row.md) | Переключатели с подписями для настроек и фильтров. | ## Редактор кода Импортируйте из `twenty-ui/components/code-editor`. | Component | Назначение | | - | - | | [Редактор кода](https://docs.twenty.com/ru/ui/components/code-editor/code-editor.md) | Редактирование кода с Monaco, необязательным заголовком и темой Twenty. | Маршрутизация, форматирование записей, заполнители продуктов и состояние приложения относятся к хост-приложению. Общие компоненты предоставляют свойства данных, обратного вызова и рендеринга для этих интеграций. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.