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

> Find Twenty CRM source code examples for React UI and NestJS backend in the twentyhq/twenty repository. Explore complete feature implementations to accelerate your development.

- Repository: [Twenty/twenty](https://github.com/twentyhq/twenty)
- Tags: developer-guide
- Published: 2026-03-27

---

**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`](https://github.com/twentyhq/twenty/blob/main/SettingsAccounts.tsx) and [`RecordShowPage.tsx`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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

```tsx
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`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx).*

## Record Show Page and Real-Time Updates

The [`RecordShowPage.tsx`](https://github.com/twentyhq/twenty/blob/main/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

```tsx
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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/RecordShowCommandMenu.tsx) and [`CommandMenuItemMoreActionsButton.tsx`](https://github.com/twentyhq/twenty/blob/main/CommandMenuItemMoreActionsButton.tsx) to conditionally render UI elements based on backend configuration.

### Feature-Flag-Aware Component Example

```tsx
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`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx) (lines 65-70) and [`packages/twenty-front/src/workspace/hooks/useIsFeatureEnabled.ts`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/SettingsAccounts.tsx) for account management and [`RecordShowPage.tsx`](https://github.com/twentyhq/twenty/blob/main/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`](https://github.com/twentyhq/twenty/blob/main/useMyConnectedAccounts.ts)) that wrap Apollo's `useQuery` and `useMutation` hooks, handling loading states, error boundaries, and integration with Jotai for global state synchronization.