+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx b/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx
new file mode 100644
index 0000000000..8b26d33d1a
--- /dev/null
+++ b/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx
@@ -0,0 +1,64 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { IconBuildingSkyscraper, IconUser } from '@ui/display';
+import { ComponentDecorator, JotaiRootDecorator } from '@ui/testing';
+import { AvatarOrIcon } from '../AvatarOrIcon';
+
+const meta: Meta
+ {leftComponent}
+ {!isLabelHidden && isDefined(label) && isNonEmptyString(label) ? (
+
+ );
+};
diff --git a/packages/twenty-ui/src/components/chip/LinkChip.module.scss b/packages/twenty-ui/src/components/chip/LinkChip.module.scss
new file mode 100644
index 0000000000..e5da170d02
--- /dev/null
+++ b/packages/twenty-ui/src/components/chip/LinkChip.module.scss
@@ -0,0 +1,11 @@
+.linkContainer {
+ display: inline-flex;
+ min-width: 0;
+ vertical-align: middle;
+
+ & > a {
+ max-width: 100%;
+ min-width: 0;
+ text-decoration: none;
+ }
+}
diff --git a/packages/twenty-ui/src/components/chip/LinkChip.module.scss.d.ts b/packages/twenty-ui/src/components/chip/LinkChip.module.scss.d.ts
new file mode 100644
index 0000000000..b084afd07e
--- /dev/null
+++ b/packages/twenty-ui/src/components/chip/LinkChip.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly linkContainer: 'linkContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/components/chip/LinkChip.tsx b/packages/twenty-ui/src/components/chip/LinkChip.tsx
new file mode 100644
index 0000000000..d055957523
--- /dev/null
+++ b/packages/twenty-ui/src/components/chip/LinkChip.tsx
@@ -0,0 +1,82 @@
+import {
+ Chip,
+ ChipAccent,
+ type ChipProps,
+ ChipSize,
+ ChipVariant,
+} from '@ui/components/chip/Chip';
+import { LINK_CHIP_CLICK_OUTSIDE_ID } from '@ui/components/chip/constants/LinkChipClickOutsideId';
+import { type TriggerEventType, useMouseDownNavigation } from '@ui/utilities';
+import { type MouseEvent } from 'react';
+import { Link } from 'react-router-dom';
+
+import styles from './LinkChip.module.scss';
+
+export type LinkChipProps = Omit<
+ ChipProps,
+ 'onClick' | 'disabled' | 'clickable'
+> & {
+ to: string;
+ onClick?: (event: MouseEvent{emptyLabel}
+ ) : (
+ ''
+ )}
+ {renderRightComponent(rightComponent, rightComponentDivider)}
+
+
+ ) : (
+ <>
+ )}
+ {preventShrink ? (
+ {text}
+ ) : (
+
+
+ {Icon ? (
+ 
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss
new file mode 100644
index 0000000000..68c8c0de25
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss
@@ -0,0 +1,12 @@
+.container {
+ align-items: center;
+ display: flex;
+}
+
+.itemContainer {
+ margin-right: -3px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
diff --git a/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss.d.ts b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss.d.ts
new file mode 100644
index 0000000000..605772e081
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.module.scss.d.ts
@@ -0,0 +1,5 @@
+declare const classNames: {
+ readonly container: 'container';
+ readonly itemContainer: 'itemContainer';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/avatar/components/AvatarGroup.tsx b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.tsx
new file mode 100644
index 0000000000..0b38fd19ed
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/AvatarGroup.tsx
@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+
+import styles from './AvatarGroup.module.scss';
+
+export type AvatarGroupProps = {
+ avatars: ReactNode[];
+};
+
+const MAX_AVATARS_NB = 4;
+
+export const AvatarGroup = ({ avatars }: AvatarGroupProps) => {
+ if (!avatars.length) return null;
+
+ return (
+
+ {avatars.slice(0, MAX_AVATARS_NB).map((avatar, index) => (
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
new file mode 100644
index 0000000000..2d3146926e
--- /dev/null
+++ b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
@@ -0,0 +1,50 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import {
+ AVATAR_URL_MOCK,
+ ComponentDecorator,
+ JotaiRootDecorator,
+} from '@ui/testing';
+
+import { Avatar } from '../Avatar';
+
+const meta: Meta
+ {avatar}
+
+ ))}
+
+ {children}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss
new file mode 100644
index 0000000000..23dbcdd0df
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss
@@ -0,0 +1,15 @@
+.banner {
+ border-radius: var(--t-border-radius-md);
+ margin-bottom: var(--t-spacing-4);
+}
+
+.bannerContent {
+ align-items: center;
+ display: flex;
+ flex: 1;
+ gap: var(--t-spacing-2);
+}
+
+.bannerText {
+ flex: 1;
+}
diff --git a/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss.d.ts b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss.d.ts
new file mode 100644
index 0000000000..c3c16a1e1b
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/InlineBanner.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly banner: 'banner';
+ readonly bannerContent: 'bannerContent';
+ readonly bannerText: 'bannerText';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx b/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx
new file mode 100644
index 0000000000..9044dee3a1
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/InlineBanner.tsx
@@ -0,0 +1,53 @@
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { ThemeContext } from '@ui/theme-constants';
+import { Button } from '@ui/input/button/components/Button/Button';
+import { type IconComponent } from '@ui/display/icon/types/IconComponent';
+import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons';
+import { Banner, type BannerColor } from './Banner';
+
+import styles from './InlineBanner.module.scss';
+
+type InlineBannerProps = {
+ color?: BannerColor;
+ message: string;
+ button?: {
+ title?: string;
+ onClick?: () => void;
+ hidden?: boolean;
+ };
+ LeftIcon?: IconComponent;
+ className?: string;
+};
+
+export const InlineBanner = ({
+ color,
+ message,
+ button,
+ LeftIcon = IconInfoCircle,
+ className,
+}: InlineBannerProps) => {
+ const { theme } = useContext(ThemeContext);
+
+ return (
+
+
+ {button && !button.hidden && (
+
+ )}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss
new file mode 100644
index 0000000000..3459b395ad
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss
@@ -0,0 +1,15 @@
+.bannerContent {
+ align-items: center;
+ display: flex;
+ flex: 1;
+ gap: 8px;
+ justify-content: center;
+}
+
+.container {
+ width: 100%;
+}
+
+.invertedIconButton {
+ color: var(--t-font-color-inverted) !important;
+}
diff --git a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss.d.ts b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss.d.ts
new file mode 100644
index 0000000000..ec6d7fac3e
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.module.scss.d.ts
@@ -0,0 +1,6 @@
+declare const classNames: {
+ readonly bannerContent: 'bannerContent';
+ readonly container: 'container';
+ readonly invertedIconButton: 'invertedIconButton';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx
new file mode 100644
index 0000000000..b6804e02e0
--- /dev/null
+++ b/packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx
@@ -0,0 +1,133 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { IconX } from '@ui/display';
+import {
+ CatalogDecorator,
+ type CatalogStory,
+ ComponentDecorator,
+} from '@ui/testing';
+import { Button } from '../../../../input/button/components/Button/Button';
+import { IconButton } from '../../../../input/button/components/IconButton';
+import { Banner, type BannerColor, type BannerVariant } from '../Banner';
+
+import styles from './Banner.stories.module.scss';
+
+const getButtonAccent = (color?: BannerColor) =>
+ color === 'danger' ? 'danger' : 'blue';
+
+const BannerCloseButton = ({
+ color,
+ variant,
+}: {
+ color?: BannerColor;
+ variant?: BannerVariant;
+}) =>
+ variant === 'primary' ? (
+
+ {variant === 'default' ? (
+
+ {message}
+ {isDefined(tooltipMessage) && ( +
+ {/* oxlint-disable-next-line react/jsx-props-no-spreading */}
+
+
+
+ ),
+ decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory
+ Sync lost with mailbox hello@twenty.com. Please reconnect for updates:
+
+
+
+ Sync lost with mailbox hello@twenty.com. Please reconnect for updates:
+
+
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/callout/__stories__/Callout.stories.tsx b/packages/twenty-ui/src/display/callout/__stories__/Callout.stories.tsx
new file mode 100644
index 0000000000..48a232907c
--- /dev/null
+++ b/packages/twenty-ui/src/display/callout/__stories__/Callout.stories.tsx
@@ -0,0 +1,73 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import {
+ CatalogDecorator,
+ type CatalogStory,
+ ComponentDecorator,
+} from '@ui/testing';
+
+import { Callout } from '@ui/display';
+import { type CalloutVariant } from '@ui/display/callout/Callout';
+
+const meta: Meta
+
+
+
+ {title}
+ {isClosable && (
+
+
+ {isDefined(action) && (
+ {description}
+
+
+ )}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx b/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx
new file mode 100644
index 0000000000..5ca4350241
--- /dev/null
+++ b/packages/twenty-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx
@@ -0,0 +1,20 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
+
+import { Checkmark } from '../Checkmark';
+
+const meta: Meta
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/components/LinkifiedText.module.scss b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss
new file mode 100644
index 0000000000..861a4f33c1
--- /dev/null
+++ b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss
@@ -0,0 +1,8 @@
+.link {
+ color: var(--t-color-blue);
+ text-decoration: underline;
+
+ &:hover {
+ text-decoration-color: var(--t-color-blue);
+ }
+}
diff --git a/packages/twenty-ui/src/display/components/LinkifiedText.module.scss.d.ts b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss.d.ts
new file mode 100644
index 0000000000..0361a30bb3
--- /dev/null
+++ b/packages/twenty-ui/src/display/components/LinkifiedText.module.scss.d.ts
@@ -0,0 +1,4 @@
+declare const classNames: {
+ readonly link: 'link';
+};
+export default classNames;
diff --git a/packages/twenty-ui/src/display/components/LinkifiedText.tsx b/packages/twenty-ui/src/display/components/LinkifiedText.tsx
new file mode 100644
index 0000000000..fb074a7000
--- /dev/null
+++ b/packages/twenty-ui/src/display/components/LinkifiedText.tsx
@@ -0,0 +1,36 @@
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { linkifyText } from '@ui/utilities/utils/linkifyText';
+
+import styles from './LinkifiedText.module.scss';
+
+type LinkifiedTextProps = {
+ text: string;
+};
+
+export const LinkifiedText = ({ text }: LinkifiedTextProps) => {
+ if (!isNonEmptyString(text)) {
+ return null;
+ }
+
+ return (
+ <>
+ {linkifyText(text).map((part, index) =>
+ part.type === 'link' ? (
+ e.stopPropagation()}
+ >
+ {part.content}
+
+ ) : (
+ part.content
+ ),
+ )}
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/icon/components/Icon.tsx b/packages/twenty-ui/src/display/icon/components/Icon.tsx
new file mode 100644
index 0000000000..a692a9dacf
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/components/Icon.tsx
@@ -0,0 +1,29 @@
+import { useIcons } from '@ui/display/icon/hooks/useIcons';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+export type IconProps = IconComponentProps & {
+ name: string;
+};
+
+export const Icon = ({
+ name,
+ className,
+ style,
+ size,
+ stroke,
+ color,
+}: IconProps) => {
+ const { getIcon } = useIcons();
+
+ const ResolvedIcon = getIcon(name);
+
+ return (
+
+ <>
+ {commands.map((line, i) => (
+
+ {button &&
+ {'> '}
+ {line}
+
+ ))}
+
+ {button}
}
+
+
+ );
+};
diff --git a/packages/twenty-ui/src/display/icon/components/IconGmail.tsx b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx
new file mode 100644
index 0000000000..961fc5d688
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx
@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+
+import IconGmailRaw from '@assets/icons/gmail.svg?react';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+import { ThemeContext } from '@ui/theme-constants';
+
+type IconGmailProps = Pick