Getting started

Install Twenty UI in a React application and use its components and themes.

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 react@^19 react-dom@^19

The code editor has a separate entry point, twenty-ui/components/code-editor. Other components do not require Monaco. To use the code editor, install its optional peer dependencies and configure Monaco workers for your bundler before mounting it:

yarn add @monaco-editor/react monaco-editor

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="[e-mail]" />
      <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. Shared components combine primitives into recurring design presets and reusable app building blocks. Both receive data and callbacks from the application.

Use MainButton for prominent actions and LightButton for lightweight actions. Both come from twenty-ui/components and share the foundational Button interaction contract. Routing and page layout remain in the application.

Each primitive family has a matching public entry point, such as twenty-ui/primitives/input.

Import	Contents
twenty-ui/components	Shared design presets and reusable app building blocks
twenty-ui/components/code-editor	Code editor, editor header, and editor theme helpers
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, and pickers
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.

Browse the library

• Primitives: foundational controls grouped by family, with usage examples and API references.
• Components: shared design presets and reusable app building blocks composed from primitives.