2023-05-27 06:39:26 +00:00
< p align = "center" >
2023-07-01 00:14:43 +00:00
< a href = "https://www.twenty.com" >
2024-06-11 08:18:08 +00:00
< img src = "./packages/twenty-website/public/images/core/logo.svg" width = "100px" alt = "Twenty logo" / >
2023-05-27 06:39:26 +00:00
< / a >
< / p >
2025-04-24 14:09:43 +00:00
< h2 align = "center" > The #1 Open-Source CRM </ h2 >
2023-05-27 06:39:26 +00:00
2025-10-31 16:44:14 +00:00
< p align = "center" > < a href = "https://twenty.com" > 🌐 Website< / a > · < a href = "https://docs.twenty.com" > 📚 Documentation< / a > · < a href = "https://github.com/orgs/twentyhq/projects/1" > < img src = "./packages/twenty-website/public/images/readme/planner-icon.svg" width = "12" height = "12" / > Roadmap < / a > · < a href = "https://discord.gg/cx5n4Jzs57" > < img src = "./packages/twenty-website/public/images/readme/discord-icon.svg" width = "12" height = "12" / > Discord< / a > · < a href = "https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty" > < img src = "./packages/twenty-website/public/images/readme/figma-icon.png" width = "12" height = "12" / > Figma< / a > < / p >
2023-05-27 06:39:26 +00:00
< br / >
2023-10-07 09:24:44 +00:00
2023-05-27 06:39:26 +00:00
< p align = "center" >
2023-07-01 00:14:43 +00:00
< a href = "https://www.twenty.com" >
< picture >
2025-06-25 08:47:39 +00:00
< source media = "(prefers-color-scheme: dark)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/github-cover-dark.png" / >
< source media = "(prefers-color-scheme: light)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/github-cover-light.png" / >
2025-06-25 08:19:04 +00:00
< img src = "./packages/twenty-website/public/images/readme/github-cover-light.png" alt = "Cover" / >
2023-07-01 00:14:43 +00:00
< / picture >
2023-05-27 06:39:26 +00:00
< / a >
< / p >
2023-10-07 09:24:44 +00:00
2025-04-24 14:09:43 +00:00
< br / >
2023-10-07 09:24:44 +00:00
2025-10-31 16:44:14 +00:00
# Installation
2024-12-31 13:48:00 +00:00
2025-10-31 16:44:14 +00:00
See:
2026-03-14 11:54:31 +00:00
🚀 [Self-hosting ](https://docs.twenty.com/developers/self-host/capabilities/docker-compose )
🖥️ [Local Setup ](https://docs.twenty.com/developers/contribute/capabilities/local-setup )
2023-05-27 06:39:26 +00:00
2026-02-21 14:02:11 +00:00
# Why Twenty
2022-12-01 14:58:08 +00:00
2025-01-05 13:11:19 +00:00
We built Twenty for three reasons:
2023-06-21 23:23:31 +00:00
2025-01-05 13:11:19 +00:00
**CRMs are too expensive, and users are trapped.** Companies use locked-in customer data to hike prices. It shouldn't be that way.
2023-06-21 23:23:31 +00:00
2025-01-05 13:11:19 +00:00
**A fresh start is required to build a better experience.** We can learn from past mistakes and craft a cohesive experience inspired by new UX patterns from tools like Notion, Airtable or Linear.
2023-07-20 06:34:19 +00:00
2026-03-14 11:54:31 +00:00
**We believe in open-source and community.** Hundreds of developers are already building Twenty together. Once we have plugin capabilities, a whole ecosystem will grow around it.
2023-05-29 11:59:45 +00:00
2025-04-24 14:09:43 +00:00
< br / >
2023-05-29 11:59:45 +00:00
2023-10-07 09:24:44 +00:00
# What You Can Do With Twenty
2025-10-31 16:44:14 +00:00
Please feel free to flag any specific needs you have by creating an issue.
2023-07-19 09:50:07 +00:00
2025-01-05 13:11:19 +00:00
Below are a few features we have implemented to date:
2023-10-13 09:37:34 +00:00
2025-06-25 08:19:04 +00:00
+ [Personalize layouts with filters, sort, group by, kanban and table views ](#personalize-layouts-with-filters-sort-group-by-kanban-and-table-views )
+ [Customize your objects and fields ](#customize-your-objects-and-fields )
+ [Create and manage permissions with custom roles ](#create-and-manage-permissions-with-custom-roles )
+ [Automate workflow with triggers and actions ](#automate-workflow-with-triggers-and-actions )
+ [Emails, calendar events, files, and more ](#emails-calendar-events-files-and-more )
2023-05-29 11:59:45 +00:00
2024-09-12 10:31:34 +00:00
2025-06-25 08:19:04 +00:00
## Personalize layouts with filters, sort, group by, kanban and table views
2023-04-18 13:37:05 +00:00
2023-07-18 18:22:39 +00:00
< p align = "center" >
< picture >
2025-06-25 08:47:39 +00:00
< source media = "(prefers-color-scheme: dark)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/views-dark.png" / >
< source media = "(prefers-color-scheme: light)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/views-light.png" / >
2025-06-25 08:19:04 +00:00
< img src = "./packages/twenty-website/public/images/readme/views-light.png" alt = "Companies Kanban Views" / >
2023-07-18 18:22:39 +00:00
< / picture >
< / p >
2025-06-25 08:19:04 +00:00
## Customize your objects and fields
2023-07-18 18:22:39 +00:00
< p align = "center" >
< picture >
2025-06-25 08:47:39 +00:00
< source media = "(prefers-color-scheme: dark)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/data-model-dark.png" / >
< source media = "(prefers-color-scheme: light)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/data-model-light.png" / >
2025-06-25 08:19:04 +00:00
< img src = "./packages/twenty-website/public/images/readme/data-model-light.png" alt = "Setting Custom Objects" / >
2023-07-18 18:22:39 +00:00
< / picture >
< / p >
2025-06-25 08:19:04 +00:00
## Create and manage permissions with custom roles
2023-07-18 18:22:39 +00:00
< p align = "center" >
< picture >
2025-06-25 08:47:39 +00:00
< source media = "(prefers-color-scheme: dark)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/permissions-dark.png" / >
< source media = "(prefers-color-scheme: light)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/permissions-light.png" / >
2025-06-25 08:19:04 +00:00
< img src = "./packages/twenty-website/public/images/readme/permissions-light.png" alt = "Permissions" / >
2024-02-19 10:40:26 +00:00
< / picture >
< / p >
2025-06-25 08:19:04 +00:00
## Automate workflow with triggers and actions
2024-02-19 10:40:26 +00:00
< p align = "center" >
< picture >
2025-06-25 08:47:39 +00:00
< source media = "(prefers-color-scheme: dark)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/workflows-dark.png" / >
< source media = "(prefers-color-scheme: light)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/workflows-light.png" / >
2025-06-25 08:19:04 +00:00
< img src = "./packages/twenty-website/public/images/readme/workflows-light.png" alt = "Workflows" / >
2024-02-19 10:40:26 +00:00
< / picture >
< / p >
2025-06-25 08:19:04 +00:00
## Emails, calendar events, files, and more
2024-02-19 10:40:26 +00:00
< p align = "center" >
< picture >
2025-06-25 08:47:39 +00:00
< source media = "(prefers-color-scheme: dark)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/plus-other-features-dark.png" / >
< source media = "(prefers-color-scheme: light)" srcset = "https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-website/public/images/readme/plus-other-features-light.png" / >
2025-06-25 08:19:04 +00:00
< img src = "./packages/twenty-website/public/images/readme/plus-other-features-light.png" alt = "Other Features" / >
2023-07-18 18:22:39 +00:00
< / picture >
< / p >
2025-04-24 14:09:43 +00:00
< br / >
2023-07-18 18:22:39 +00:00
2025-01-05 13:11:19 +00:00
# Stack
- [TypeScript ](https://www.typescriptlang.org/ )
- [Nx ](https://nx.dev/ )
- [NestJS ](https://nestjs.com/ ), with [BullMQ ](https://bullmq.io/ ), [PostgreSQL ](https://www.postgresql.org/ ), [Redis ](https://redis.io/ )
Complete linaria migration (#18361)
## Summary
Completes the migration of the frontend styling system from **Emotion**
(`@emotion/styled`, `@emotion/react`) to **Linaria** (`@linaria/react`,
`@linaria/core`), a zero-runtime CSS-in-JS library where styles are
extracted at build time.
This is the final step of the migration — all ~494 files across
`twenty-front`, `twenty-ui`, `twenty-website`, and `twenty-sdk` are now
fully converted.
## Changes
### Styling Migration (across ~480 component files)
- Replaced all `@emotion/styled` imports with `@linaria/react`
- Converted runtime theme access patterns (`({ theme }) => theme.x.y`)
to build-time `themeCssVariables` CSS custom properties
- Replaced `useTheme()` hook (from Emotion) with
`useContext(ThemeContext)` where runtime theme values are still needed
(e.g., passing colors to non-CSS props like icon components)
- Removed `@emotion/react` `css` helper usages in favor of Linaria
template literals
### Dependency & Configuration Changes
- **Removed**: `@emotion/react`, `@emotion/styled` from root
`package.json`
- **Added**: `@wyw-in-js/babel-preset`, `next-with-linaria` (for
twenty-website SSR support)
- Updated Nx generator defaults from `@emotion/styled` to
`@linaria/react` in `nx.json`
- Simplified `vite.config.ts` (removed Emotion-specific configuration)
- Updated `twenty-website/next.config.js` to use `next-with-linaria` for
SSR Linaria support
### Storybook & Testing
- Removed `ThemeProvider` from Emotion in Storybook previews
(`twenty-front`, `twenty-sdk`)
- Now relies solely on `ThemeContextProvider` for theme injection
### Documentation
- Removed the temporary `docs/emotion-to-linaria-migration-plan.md`
(migration complete)
- Updated `CLAUDE.md` and `README.md` to reflect Linaria as the styling
stack
- Updated frontend style guide docs across all locales
## How it works
Linaria extracts styles at build time via the `@wyw-in-js/vite` plugin.
All expressions in `styled` template literals must be **statically
evaluable** — no runtime theme objects or closures over component state.
- **Static styles** use `themeCssVariables` which map to CSS custom
properties (`var(--theme-color-x)`)
- **Runtime theme access** (for non-CSS use cases like icon `color`
props) uses `useContext(ThemeContext)` instead of Emotion's `useTheme()`
2026-03-03 23:50:06 +00:00
- [React ](https://reactjs.org/ ), with [Jotai ](https://jotai.org/ ), [Linaria ](https://linaria.dev/ ) and [Lingui ](https://lingui.dev/ )
2025-04-24 14:09:43 +00:00
# Thanks
< p align = "center" >
< a href = "https://www.chromatic.com/" > < img src = "./packages/twenty-website/public/images/readme/chromatic.png" height = "30" alt = "Chromatic" / > < / a >
< a href = "https://greptile.com" > < img src = "./packages/twenty-website/public/images/readme/greptile.png" height = "30" alt = "Greptile" / > < / a >
< a href = "https://sentry.io/" > < img src = "./packages/twenty-website/public/images/readme/sentry.png" height = "30" alt = "Sentry" / > < / a >
< a href = "https://crowdin.com/" > < img src = "./packages/twenty-website/public/images/readme/crowdin.png" height = "30" alt = "Crowdin" / > < / a >
2026-02-21 14:02:11 +00:00
< a href = "https://e2b.dev/" > < img src = "./packages/twenty-website/public/images/readme/e2b.svg" height = "30" alt = "E2B" / > < / a >
2025-04-24 14:09:43 +00:00
< / p >
Thanks to these amazing services that we use and recommend for UI testing (Chromatic), code review (Greptile), catching bugs (Sentry) and translating (Crowdin).
2023-07-19 09:50:07 +00:00
2023-12-17 15:26:54 +00:00
# Join the Community
2023-10-07 09:24:44 +00:00
- Star the repo
2025-01-05 13:11:19 +00:00
- Subscribe to releases (watch -> custom -> releases)
2025-10-31 16:44:14 +00:00
- Follow us on [Twitter ](https://twitter.com/twentycrm ) or [LinkedIn ](https://www.linkedin.com/company/twenty/ )
2023-12-17 15:26:54 +00:00
- Join our [Discord ](https://discord.gg/cx5n4Jzs57 )
2025-10-31 16:44:14 +00:00
- Improve translations on [Crowdin ](https://twenty.crowdin.com/twenty )
- [Contributions ](https://github.com/twentyhq/twenty/contribute ) are, of course, most welcome!