Components

Overview

Components combine primitives into recurring design presets and reusable app building blocks. Like primitives, they receive data and callbacks from your application. Use the matching family import shown below. The aggregate twenty-ui/components entry also remains available. 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.

Input

Import from twenty-ui/components/input.

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.
ReactionButton	Emoji reactions with a count and controlled pressed state.
PhoneCountryPicker	Searchable country flags and calling-code selection.
NumberStepper	Compact numeric input with optional step buttons.
SearchInput	Search text and optional filter controls.
CountrySelect	Searchable country choices, flags, and an explicit empty selection.
CurrencyPicker	Searchable currency choices with explicit formatting.
ImageInput	Image selection and preview with caller-owned uploads.
SegmentedControl	Compact radio choice with joined text or icon options.

Import from twenty-ui/components/navigation.

Component	Purpose
ListItemButton	Native action buttons with list row styling.
Dropdown	Action menus, searchable pickers, and form panels.
TabButton	Route links and adjacent actions with the same appearance as tabs.

Data display

Import from twenty-ui/components/data-display.

Component	Purpose
DetailsRow	Aligned labels, wrapping values, and optional actions.
MetricRow	Labels and formatted values with optional determinate progress.
AvatarGroup	Overlapping avatars and overflow counts.
CommandBlock	Command text with an optional copy action.
JsonTree	Expandable JSON values and named entries.
StackIcon	Icons with a smaller item stacked on the bottom-right corner.
TintedIconTile	Icons on theme-colored tiles.

Feedback

Import from twenty-ui/components/feedback.

Component	Purpose
Toast	Notifications, queue management, and dismissal.
Callout	Semantic messages with actions and dismissal.
InlineBanner	Compact banners with optional actions.
ToastProvider and Toaster	Notification stores, queue limits, and rendering.

Layout

Import from twenty-ui/components/layout.

Component	Purpose
Section	Related content with a heading, description, and optional action.
AnimatedIconCrossfade	State-driven icon transitions.
OverflowingList	Fit visible items and collect the overflow.

Settings

Import from twenty-ui/components/settings.

Component	Purpose
SettingsRow	Labeled switches for settings and filters.

Code editor

Import from twenty-ui/components/code-editor.

Component	Purpose
CodeEditor	Code editing with Monaco, an optional header, and the Twenty theme.

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

Developers

Apps

API

Self-Host

Contribute

UI Library

Overview

Input

Navigation

Data display

Feedback

Layout

Settings

Code editor

​Overview

​Input

​Navigation

​Data display

​Feedback

​Layout

​Settings

​Code editor

Overview

Input

Navigation

Data display

Feedback

Layout

Settings

Code editor