Getting started

Twenty UI is Twenty’s React component library. It provides components, icons, and theme tokens with prebuilt CSS, so your application does not need a CSS-in-JS compiler.

Twenty UI is in alpha. Its version follows the Twenty SDK release cycle, and component APIs can change between releases. In a Twenty app, keep twenty-ui, twenty-sdk, and twenty-client-sdk on the same version.

Install

For a standalone React application, install the library and its peer dependencies:

yarn add twenty-ui monaco-editor react@^19 react-dom@^19

monaco-editor powers the code editor components, but install it even if you never render an editor: the twenty-ui/primitives/input, twenty-ui/primitives/feedback, and twenty-ui/primitives/navigation entry points reference it, and bundlers fail to resolve it otherwise. If you are building a Twenty app, follow Using Twenty UI components. The front component renderer supplies the workspace theme and has a different setup from a standalone browser application.

Load styles and provide a theme

Import the component stylesheet and a theme stylesheet once at your application entry point. ThemeProvider applies the active theme class and makes theme values available to components.

import { Field, Input } from 'twenty-ui/primitives/input';
import { ThemeProvider } from 'twenty-ui/theme-constants';

import 'twenty-ui/style.css';
import 'twenty-ui/theme-light.css';

export const App = () => (
  <ThemeProvider colorScheme="light">
    <Field.Root>
      <Field.Label>Email</Field.Label>
      <Input name="email" type="email" placeholder="you@example.com" />
      <Field.Description>Use your work email address.</Field.Description>
    </Field.Root>
  </ThemeProvider>
);

The component stylesheet includes a global reset. Review its effect when adding Twenty UI to an existing application.

Choose an entry point

Import components from their public subpath to keep imports focused: Primitives are foundational controls, including compound controls such as Select, Menu, and AlertDialog. Higher-level components combine primitives into reusable app building blocks, such as tables, boards, and pickers. Both receive data and callbacks from the application. All existing UI components live in primitives/, including controls still being migrated to the new API. The components/ folder is reserved for higher-level app building blocks. Each primitive family has a matching public entry point, such as twenty-ui/primitives/input.

Import	Contents
`twenty-ui/primitives/accessibility`	Hidden elements and keyboard interaction helpers
`twenty-ui/primitives/data-display`	Avatars, chips, tags, status indicators, and display helpers
`twenty-ui/primitives/feedback`	Toasts, banners, progress bars, and loaders
`twenty-ui/primitives/input`	Buttons, form controls, pickers, and code editors
`twenty-ui/primitives/json-visualizer`	JSON tree viewer
`twenty-ui/primitives/layout`	Layout, animation, resizing, and section components
`twenty-ui/primitives/navigation`	Links, list items, menus, and tabs
`twenty-ui/primitives/surfaces`	Cards, dialogs, menus, popovers, and tooltips
`twenty-ui/primitives/typography`	Text, headings, labels, and typography helpers
`twenty-ui/icon`	Icons
`twenty-ui/theme-constants`	Theme provider, hooks, and CSS variable references

Import individual icons, such as IconCheck, from twenty-ui/icon. The dynamic icon provider includes the full icon catalog, so reserve it for interfaces that need to look up icons at runtime.

Continue

Theming: use semantic tokens and scoped overrides.
Dark mode: switch between light and dark palettes.

Components

Each page includes usage examples, interaction guidance, and a generated API reference.

Family	Components
Forms	Field, Input, InputGroup, Textarea, Checkbox, Radio, RadioGroup, Select, Slider, Switch
Navigation	ListItem, Tabs
Surfaces	AlertDialog, Menu, Popover
Feedback	Toast
Typography	Text

Overview

Apps

API

Self-Host

Contribute

UI Library

Install

Load styles and provide a theme

Choose an entry point

Continue

Components

​Install

​Load styles and provide a theme

​Choose an entry point

​Continue

​Components

Install

Load styles and provide a theme

Choose an entry point

Continue

Components