> ## 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.

# Components

> Shared design presets and reusable app building blocks composed from Twenty UI primitives.

Components combine [primitives](/ui/primitives/overview) into recurring design presets and reusable app building blocks. Like primitives, they receive data and callbacks from your application.

Import shared components from `twenty-ui/components`. The code editor has its own entry point, `twenty-ui/components/code-editor`, because it requires Monaco. See [Getting started](/ui/getting-started) for installation and theme setup.

## Browse components

| Component                                                 | Purpose                                                               |
| --------------------------------------------------------- | --------------------------------------------------------------------- |
| [MainButton](/ui/components/input/main-button)            | Prominent actions with a solid surface, elevation, and semibold text. |
| [LightButton](/ui/components/input/light-button)          | Lightweight actions with standard or subtle emphasis.                 |
| [IconButton](/ui/components/input/icon-button)            | Square or round icon actions built on Button.                         |
| [LightIconButton](/ui/components/input/light-icon-button) | Lightweight icon actions with standard or subtle emphasis.            |
| [Section](/ui/components/section)                         | Related content with a heading, description, and optional action.     |
| [SettingsRow](/ui/components/settings-row)                | Labeled switches for settings and filters.                            |
| [Dropdown](/ui/components/dropdown)                       | Action menus, searchable pickers, and form panels.                    |
| [TabButton](/ui/components/tab-button)                    | Route links and adjacent actions with the same appearance as tabs.    |
| [CodeEditor](/ui/components/code-editor)                  | Code editing with Monaco, an optional header, and the Twenty theme.   |
| [Toast](/ui/components/toast)                             | Notifications, queue management, and dismissal.                       |

Shared components also include `AvatarGroup`, `JsonTree`, `NavigationBar`, menu-row presets, pickers, banners, and icon-button presets. Import these from `twenty-ui/components`.

Routing, record formatting, product placeholders, and application state belong to the host application. Shared components expose data, callback, and render props for those integrations.