Where to Find Twenty CRM Source Code Examples: A Developer's Guide

Twenty CRM source code examples are located in the packages/twenty-front directory for React/TypeScript UI components and packages/twenty-server for NestJS backend APIs, with complete feature implementations available in files like SettingsAccounts.tsx and RecordShowPage.tsx.

Twenty CRM is an open-source customer relationship management platform built as a modern monorepo using Nx, React 18, TypeScript, NestJS, GraphQL, and PostgreSQL. If you are looking for Twenty CRM source code examples to understand how features are implemented or to reuse components in your own extensions, this guide maps the repository structure and provides copy-paste-ready snippets from the actual codebase.

Front-End Architecture and Package Structure

The Twenty CRM front end lives in packages/twenty-front and follows a feature-based organization. The application uses React Router for navigation, Apollo Client for GraphQL data fetching, and Jotai for global state management.

Key architectural patterns found in the Twenty CRM source code include:

• Context Providers: Heavy use of React context for dependency injection (e.g., CommandMenuComponentInstanceContext, TimelineActivityContext)
• Custom Hooks: Data fetching encapsulated in reusable hooks (e.g., useMyConnectedAccounts, useIsFeatureEnabled)
• Layout Composition: Page components act as thin wrappers that compose lower-level UI primitives from @/ui/layout/page/components/
• Feature Flags: Conditional rendering controlled via the useIsFeatureEnabled hook reading FeatureFlagKey enums from the GraphQL schema

Settings and Account Management Examples

For developers building configuration screens, packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx demonstrates how to construct a settings page with multiple sections.

This file illustrates:

• Page Layout: Using SubMenuTopBarContainer for consistent navigation headers and SettingsPageContainer for content padding
• Component Composition: Aggregating specialized cards like SettingsAccountsConnectedAccountsListCard, SettingsAccountsBlocklistSection, and SettingsAccountsSettingsSection
• Data Integration: Fetching connected account data via the useMyConnectedAccounts hook

Reusable Settings Page Template

import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { H2Title } from 'twenty-ui/display';
import { Section } from 'twenty-ui/layout';
import { useLingui } from '@lingui/react/macro';

export const MyFeaturePage = () => {
  const { t } = useLingui();

  return (
    <SubMenuTopBarContainer
      title={t`My Feature`}
      links={[
        { children: t`Home`, href: '/' },
        { children: t`My Feature` },
      ]}
    >
      <SettingsPageContainer>
        <Section>
          <H2Title title={t`Welcome to My Feature`} />
          {/* Your custom UI goes here */}
        </Section>
      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
};

Derived from packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx.

Record Show Page and Real-Time Updates

The RecordShowPage.tsx file in packages/twenty-front/src/pages/object-record/ provides a comprehensive example of a detail view for CRM records (contacts, opportunities, companies).

Key implementation details in this Twenty CRM source code example:

• Dynamic Routing: Extracts objectNameSingular and objectRecordId from React Router params
• SSE Integration: Subscribes to real-time updates via RecordShowPageSSESubscribeEffect
• Command Menu: Integrates contextual actions through RecordShowCommandMenu and CommandMenuItemMoreActionsButton
• Instance IDs: Uses computeRecordShowComponentInstanceId for scoped context providers

Complete Record Detail Page Implementation

import { useParams } from 'react-router-dom';
import { RecordShowPageHeader } from '@/object-record/record-show/components/RecordShowPageHeader';
import { PageContainer } from '@/ui/layout/page/components/PageContainer';
import { PageLayoutRecordPageRenderer } from '@/object-record/record-show/components/PageLayoutRecordPageRenderer';
import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
import { computeRecordShowComponentInstanceId } from '@/object-record/record-show/utils/computeRecordShowComponentInstanceId';
import { RecordShowPageSSESubscribeEffect } from '@/object-record/record-show/components/RecordShowPageSSESubscribeEffect';
import { RecordShowCommandMenu } from '@/command-menu-item/components/RecordShowCommandMenu';

export const MyRecordShowPage = () => {
  const { objectNameSingular, objectRecordId } = useParams<{
    objectNameSingular: string;
    objectRecordId: string;
  }>();

  // Validate & fetch the record (the hook wraps the GraphQL query)
  useRecordShowPage(objectNameSingular ?? '', objectRecordId ?? '');

  const instanceId = computeRecordShowComponentInstanceId(objectRecordId ?? '');

  return (
    <PageContainer>
      <RecordShowPageHeader objectNameSingular={objectNameSingular!} objectRecordId={objectRecordId!}>
        <RecordShowCommandMenu />
      </RecordShowPageHeader>

      <PageLayoutRecordPageRenderer
        targetRecordIdentifier={{
          id: objectRecordId!,
          targetObjectNameSingular: objectNameSingular!,
        }}
        isInSidePanel={false}
      />

      <RecordShowPageSSESubscribeEffect
        objectNameSingular={objectNameSingular!}
        recordId={objectRecordId!}
      />
    </PageContainer>
  );
};

Derived from packages/twenty-front/src/pages/object-record/RecordShowPage.tsx.

Feature Flags and Conditional Rendering

Twenty CRM uses a sophisticated feature flag system to toggle functionality without redeploying. The useIsFeatureEnabled hook reads boolean flags from the GraphQL schema's FeatureFlagKey enum.

This pattern appears in RecordShowCommandMenu.tsx and CommandMenuItemMoreActionsButton.tsx to conditionally render UI elements based on backend configuration.

Feature-Flag-Aware Component Example

import { CommandMenuItemMoreActionsButton } from '@/command-menu-item/server-items/display/components/CommandMenuItemMoreActionsButton';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { FeatureFlagKey } from '~/generated-metadata/graphql';

export const MyActionsButton = () => {
  const isEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED);

  return isEnabled ? <CommandMenuItemMoreActionsButton /> : null;
};

Derived from packages/twenty-front/src/pages/object-record/RecordShowPage.tsx (lines 65-70) and packages/twenty-front/src/workspace/hooks/useIsFeatureEnabled.ts.

Key Files for Reference

The following table maps core Twenty CRM features to their source file locations:

Feature	File Path	Description
Account Settings	packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx	Connected accounts, blocklists, and account-wide settings
Record Detail View	packages/twenty-front/src/pages/object-record/RecordShowPage.tsx	Full record page with SSE, command menu, and layout
Settings Layout	packages/twenty-front/src/ui/layout/page/components/SubMenuTopBarContainer.tsx	Reusable top-bar navigation component
Settings Container	packages/twenty-front/src/settings/components/SettingsPageContainer.tsx	Consistent padding and background for settings screens
Data Fetching Hook	packages/twenty-front/src/settings/accounts/hooks/useMyConnectedAccounts.ts	GraphQL query wrapper with loading states
Feature Flag Hook	packages/twenty-front/src/workspace/hooks/useIsFeatureEnabled.ts	Boolean flag reader from GraphQL schema
Record Header	packages/twenty-front/src/object-record/record-show/components/RecordShowPageHeader.tsx	Title, breadcrumb, and action menu header
Layout Renderer	packages/twenty-front/src/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx	Dynamic tabs and side-panel layout
SSE Subscription	packages/twenty-front/src/object-record/record-show/components/RecordShowPageSSESubscribeEffect.tsx	Server-sent events for real-time updates
Backend API	packages/twenty-server/src/modules/**	NestJS modules, GraphQL resolvers, TypeORM entities

Backend Source Code Structure

While the front end handles UI composition, the Twenty CRM backend in packages/twenty-server provides the GraphQL API and business logic. This NestJS application organizes code into feature modules containing:

• GraphQL Resolvers: Handle API requests for objects like companies, people, and opportunities
• Services: Business logic implementation and data transformation
• TypeORM Entities: Database models for PostgreSQL persistence

To understand how the front-end hooks like useMyConnectedAccounts fetch data, explore the corresponding modules in packages/twenty-server/src/modules/.

Summary

• Twenty CRM source code examples are organized in packages/twenty-front (React/TypeScript) and packages/twenty-server (NestJS).
• Settings pages demonstrate layout composition using SubMenuTopBarContainer and SettingsPageContainer with section-based content.
• Record pages implement real-time updates via RecordShowPageSSESubscribeEffect and contextual actions through RecordShowCommandMenu.
• Feature flags control UI visibility through the useIsFeatureEnabled hook reading from the GraphQL FeatureFlagKey enum.
• Custom hooks encapsulate Apollo Client queries and Jotai state management for reusable data fetching patterns.
• Layout primitives in @/ui/layout/page/components/ provide consistent page shells across the application.

Frequently Asked Questions

Where are the React components located in the Twenty CRM repository?

React components reside in packages/twenty-front/src/, organized by feature domains. Shared UI primitives live in packages/twenty-front/src/ui/, while page-level components are in packages/twenty-front/src/pages/. Specific examples include SettingsAccounts.tsx for account management and RecordShowPage.tsx for record detail views.

How does Twenty CRM handle real-time updates in the UI?

The application uses Server-Sent Events (SSE) via the RecordShowPageSSESubscribeEffect component. This React effect subscribes to backend event streams and updates the Apollo Client cache when record data changes, ensuring the UI reflects modifications without manual refreshes.

Can I reuse Twenty CRM components in my own application?

Yes. The codebase exposes reusable primitives through internal packages like twenty-ui. Components such as SubMenuTopBarContainer, SettingsPageContainer, and hooks like useIsFeatureEnabled are designed as generic building blocks. Import them from their respective paths in packages/twenty-front/src/ and ensure you provide the required context providers (Apollo, Jotai, React Router).

What GraphQL client does Twenty CRM use for data fetching?

Twenty CRM uses Apollo Client for all GraphQL operations. Data fetching logic is encapsulated in custom hooks (e.g., useMyConnectedAccounts.ts) that wrap Apollo's useQuery and useMutation hooks, handling loading states, error boundaries, and integration with Jotai for global state synchronization.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}