Components

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

Components combine primitives 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 for installation and theme setup.

Browse components

Component	Purpose
MainButton	Prominent actions with a solid surface, elevation, and semibold text.
LightButton	Lightweight actions with standard or subtle emphasis.
IconButton	Square or round icon actions built on Button.
LightIconButton	Lightweight icon actions with standard or subtle emphasis.
Section	Related content with a heading, description, and optional action.
SettingsRow	Labeled switches for settings and filters.
Dropdown	Action menus, searchable pickers, and form panels.
TabButton	Route links and adjacent actions with the same appearance as tabs.
CodeEditor	Code editing with Monaco, an optional header, and the Twenty theme.
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.