Skip to main content

​
Overview

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

​
Install

For an existing React application, install the library. React 19 is required.
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:
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. Keep twenty-ui, twenty-sdk, and twenty-client-sdk on the same version.

​
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.
The component stylesheet includes a global reset. Review its effect when adding Twenty UI to an existing application.

​
Override styles

Twenty UI puts component styles and the reset in the twenty-ui cascade layer. Styles you write outside a layer, such as a className, a CSS module, or a CSS-in-JS rule, override those layered rules regardless of selector specificity or import order. Theme stylesheets and the optional editor’s global Monaco rules remain unlayered. Global element resets in your application are unlayered too, so they would override Twenty UI components. Declare a layer for them before Twenty UI’s stylesheet loads:
With Tailwind CSS v4, place Twenty UI between Tailwind’s base and utility layers:

​
Choose an entry point

Import components from their public subpath to keep imports focused: Primitives are foundational controls, including compound controls such as Select, Popover, 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/input and share the foundational Button interaction contract. Routing and page layout remain in the application. Each primitive and shared component family has a matching public entry point, such as twenty-ui/primitives/input and twenty-ui/components/settings. The aggregate twenty-ui/primitives and twenty-ui/components entries export their respective families. The root twenty-ui entry re-exports primitives, shared components, icons, theme tokens, and utilities. Assets, testing helpers, and the optional code editor have separate entry points. 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.

​
Responsive hooks

Import useIsMobile, useIsTouchDevice, and useMediaQuery from twenty-ui/utilities. The query constants come from twenty-ui/utilities; MOBILE_VIEWPORT comes from twenty-ui/theme. Subscriptions share one MediaQueryList per query and update when its match changes. Hooks return false during server rendering, the first hydration render, and when window.matchMedia is unavailable. In a Twenty front component, width queries follow the widget’s box. useIsMobile therefore follows the widget width, while useIsTouchDevice follows the device’s primary input. Use story overrides to exercise these states in Storybook.

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