diff --git a/client/components/UserCard/Action.js b/client/components/UserCard/Action.js
deleted file mode 100644
index 7174f2df2fe5..000000000000
--- a/client/components/UserCard/Action.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ActionButton } from '@rocket.chat/fuselage';
-import React from 'react';
-
-/**
- * @param {Object} props
- * @param {string=} props.label
- * @param {string=} props.icon
- */
-const Action = ({ label, ...props }) => <ActionButton small title={label} {...props} mi='x2' />;
-
-export default Action;
diff --git a/client/components/UserCard/Info.js b/client/components/UserCard/Info.js
deleted file mode 100644
index 0cff61712415..000000000000
--- a/client/components/UserCard/Info.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const Info = (props) => <Box mbe='x4' is='span' fontScale='p2' color='hint' withTruncatedText {...props} />;
-
-export default Info;
diff --git a/client/components/UserCard/Role.js b/client/components/UserCard/Role.js
deleted file mode 100644
index fad4618b04ac..000000000000
--- a/client/components/UserCard/Role.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Box, Tag } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const Role = ({ children }) => (
-	<Box m='x2' fontScale='c2'>
-		<Tag disabled children={children} />
-	</Box>
-);
-
-export default Role;
diff --git a/client/components/UserCard/Roles.js b/client/components/UserCard/Roles.js
deleted file mode 100644
index ef2fd23e72fd..000000000000
--- a/client/components/UserCard/Roles.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import Info from './Info';
-
-const Roles = ({ children }) => (
-	<Info rcx-user-card__roles m='neg-x2' flexWrap='wrap' display='flex' flexShrink={0}>
-		{children}
-	</Info>
-);
-
-export default Roles;
diff --git a/client/components/UserCard/UserCard.js b/client/components/UserCard/UserCard.js
deleted file mode 100644
index da93170eecf2..000000000000
--- a/client/components/UserCard/UserCard.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Box, ActionButton, Skeleton } from '@rocket.chat/fuselage';
-import React, { forwardRef } from 'react';
-
-import MarkdownText from '../MarkdownText';
-import * as Status from '../UserStatus';
-import UserAvatar from '../avatar/UserAvatar';
-import Info from './Info';
-import Roles from './Roles';
-import UserCardContainer from './UserCardContainer';
-import Username from './Username';
-
-const clampStyle = {
-	display: '-webkit-box',
-	overflow: 'hidden',
-	WebkitLineClamp: 3,
-	WebkitBoxOrient: 'vertical',
-	wordBreak: 'break-all',
-};
-
-const UserCard = forwardRef(function UserCard(
-	{
-		className,
-		style,
-		open,
-		name = <Skeleton width='100%' />,
-		username,
-		etag,
-		customStatus = <Skeleton width='100%' />,
-		roles = (
-			<>
-				<Skeleton width='32%' mi='x2' />
-				<Skeleton width='32%' mi='x2' />
-				<Skeleton width='32%' mi='x2' />
-			</>
-		),
-		bio = (
-			<>
-				<Skeleton width='100%' />
-				<Skeleton width='100%' />
-				<Skeleton width='100%' />
-			</>
-		),
-		status = <Status.Offline />,
-		actions,
-		localTime = <Skeleton width='100%' />,
-		onClose,
-		nickname,
-		t = (e) => e,
-	},
-	ref,
-) {
-	return (
-		<UserCardContainer className={className} ref={ref} style={style}>
-			<Box>
-				<UserAvatar username={username} etag={etag} size='x124' />
-				{actions && (
-					<Box flexGrow={0} display='flex' mb='x8' align='center' justifyContent='center'>
-						{actions}
-					</Box>
-				)}
-			</Box>
-			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis='x24' width='1px'>
-				<Box withTruncatedText display='flex'>
-					<Username status={status} name={name} title={username !== name ? username : undefined} />
-					{nickname && (
-						<Box title={t('Nickname')} color='hint' mis='x8' fontScale='p2' withTruncatedText>
-							({nickname})
-						</Box>
-					)}
-				</Box>
-				{customStatus && (
-					<Info>{typeof customStatus === 'string' ? <MarkdownText content={customStatus} parseEmoji={true} /> : customStatus}</Info>
-				)}
-				<Roles>{roles}</Roles>
-				<Info>{localTime}</Info>
-				{bio && (
-					<Info withTruncatedText={false} style={clampStyle} height='x60'>
-						{typeof bio === 'string' ? <MarkdownText content={bio} /> : bio}
-					</Info>
-				)}
-				{open && <a onClick={open}>{t('See_full_profile')}</a>}
-			</Box>
-			{onClose && (
-				<Box>
-					<ActionButton ghost icon='cross' onClick={onClose} />
-				</Box>
-			)}
-		</UserCardContainer>
-	);
-});
-
-export default UserCard;
diff --git a/client/components/UserCard/UserCard.stories.tsx b/client/components/UserCard/UserCard.stories.tsx
index b1a6cdbe6f3a..65c3394efa9d 100644
--- a/client/components/UserCard/UserCard.stories.tsx
+++ b/client/components/UserCard/UserCard.stories.tsx
@@ -12,9 +12,20 @@ export default {
 	args: {
 		name: 'guilherme.gazzo',
 		customStatus: '🛴 currently working on User Card',
-		roles: [<UserCard.Role>Admin</UserCard.Role>, <UserCard.Role>Rocket.Chat</UserCard.Role>, <UserCard.Role>Team</UserCard.Role>],
+		roles: (
+			<>
+				<UserCard.Role>Admin</UserCard.Role>
+				<UserCard.Role>Rocket.Chat</UserCard.Role>
+				<UserCard.Role>Team</UserCard.Role>
+			</>
+		),
 		bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
-		actions: [<UserCard.Action icon='message' />, <UserCard.Action icon='phone' />],
+		actions: (
+			<>
+				<UserCard.Action icon='message' />
+				<UserCard.Action icon='phone' />
+			</>
+		),
 		localTime: 'Local Time: 7:44 AM',
 	},
 } as ComponentMeta<typeof UserCard>;
diff --git a/client/components/UserCard/UserCard.tsx b/client/components/UserCard/UserCard.tsx
new file mode 100644
index 000000000000..ae97bb8bb41e
--- /dev/null
+++ b/client/components/UserCard/UserCard.tsx
@@ -0,0 +1,118 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, ActionButton, Skeleton } from '@rocket.chat/fuselage';
+import React, { forwardRef, ReactNode, ComponentProps } from 'react';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import MarkdownText from '../MarkdownText';
+import * as Status from '../UserStatus';
+import UserAvatar from '../avatar/UserAvatar';
+import UserCardContainer from './UserCardContainer';
+import UserCardInfo from './UserCardInfo';
+import UserCardRoles from './UserCardRoles';
+import UserCardUsername from './UserCardUsername';
+
+const clampStyle = css`
+	display: -webkit-box;
+	overflow: hidden;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	word-break: break-all;
+`;
+
+type UserCardProps = {
+	className?: string;
+	style?: ComponentProps<typeof Box>['style'];
+	open?: () => void;
+	name?: string;
+	username?: string;
+	etag?: string;
+	customStatus?: ReactNode;
+	roles?: ReactNode;
+	bio?: ReactNode;
+	status?: ReactNode;
+	actions?: ReactNode;
+	localTime?: ReactNode;
+	onClose?: () => void;
+	nickname?: string;
+};
+
+const UserCard = forwardRef(function UserCard(
+	{
+		className,
+		style,
+		open,
+		name,
+		username,
+		etag,
+		customStatus = <Skeleton width='100%' />,
+		roles = (
+			<>
+				<Skeleton width='32%' mi='x2' />
+				<Skeleton width='32%' mi='x2' />
+				<Skeleton width='32%' mi='x2' />
+			</>
+		),
+		bio = (
+			<>
+				<Skeleton width='100%' />
+				<Skeleton width='100%' />
+				<Skeleton width='100%' />
+			</>
+		),
+		status = <Status.Offline />,
+		actions,
+		localTime = <Skeleton width='100%' />,
+		onClose,
+		nickname,
+	}: UserCardProps,
+	ref,
+) {
+	const t = useTranslation();
+
+	return (
+		<UserCardContainer className={className} ref={ref} style={style}>
+			<Box>
+				{!username ? <Skeleton width='x124' height='x124' variant='rect' /> : <UserAvatar username={username} etag={etag} size='x124' />}
+				{actions && (
+					<Box flexGrow={0} display='flex' mb='x12' alignItems='center' justifyContent='center'>
+						{actions}
+					</Box>
+				)}
+			</Box>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis='x24' width='1px'>
+				<Box mbe='x4' withTruncatedText display='flex'>
+					{!name ? <Skeleton width='100%' /> : <UserCardUsername status={status} name={name} />}
+					{nickname && (
+						<Box flexGrow={1} flexShrink={1} flexBasis={0} title={t('Nickname')} color='hint' mis='x4' fontScale='p2' withTruncatedText>
+							({nickname})
+						</Box>
+					)}
+				</Box>
+				{customStatus && (
+					<UserCardInfo>
+						{typeof customStatus === 'string' ? (
+							<MarkdownText withTruncatedText variant='inlineWithoutBreaks' content={customStatus} parseEmoji={true} />
+						) : (
+							customStatus
+						)}
+					</UserCardInfo>
+				)}
+				<UserCardRoles>{roles}</UserCardRoles>
+				<UserCardInfo>{localTime}</UserCardInfo>
+				{bio && (
+					<UserCardInfo withTruncatedText={false} className={clampStyle} height='x60'>
+						{typeof bio === 'string' ? <MarkdownText variant='inline' content={bio} /> : bio}
+					</UserCardInfo>
+				)}
+				{open && <a onClick={open}>{t('See_full_profile')}</a>}
+			</Box>
+			{onClose && (
+				<Box>
+					<ActionButton small ghost title={t('Close')} icon='cross' onClick={onClose} />
+				</Box>
+			)}
+		</UserCardContainer>
+	);
+});
+
+export default UserCard;
diff --git a/client/components/UserCard/UserCardAction.tsx b/client/components/UserCard/UserCardAction.tsx
new file mode 100644
index 000000000000..6d308a28b5b4
--- /dev/null
+++ b/client/components/UserCard/UserCardAction.tsx
@@ -0,0 +1,13 @@
+import { ActionButton, Icon } from '@rocket.chat/fuselage';
+import React, { ReactElement, ComponentProps } from 'react';
+
+type UserCardActionProps = {
+	label?: string;
+	icon: ComponentProps<typeof Icon>['name'];
+};
+
+const UserCardAction = ({ label, icon, ...props }: UserCardActionProps): ReactElement => (
+	<ActionButton icon={icon} small title={label} {...props} mi='x2' />
+);
+
+export default UserCardAction;
diff --git a/client/components/UserCard/UserCardContainer.js b/client/components/UserCard/UserCardContainer.js
deleted file mode 100644
index ce91af6c503f..000000000000
--- a/client/components/UserCard/UserCardContainer.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { forwardRef } from 'react';
-
-const UserCardContainer = forwardRef(function UserCardContainer(props, ref) {
-	return <Box rcx-user-card bg='surface' elevation='2' p='x24' display='flex' borderRadius='x2' width='439px' {...props} ref={ref} />;
-});
-
-export default UserCardContainer;
diff --git a/client/components/UserCard/UserCardContainer.tsx b/client/components/UserCard/UserCardContainer.tsx
new file mode 100644
index 000000000000..4fadc165643e
--- /dev/null
+++ b/client/components/UserCard/UserCardContainer.tsx
@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { forwardRef, ComponentProps } from 'react';
+
+const UserCardContainer = forwardRef(function UserCardContainer(props: ComponentProps<typeof Box>, ref) {
+	return <Box ref={ref} rcx-user-card bg='surface' elevation='2' p='x24' display='flex' borderRadius='x2' width='439px' {...props} />;
+});
+
+export default UserCardContainer;
diff --git a/client/components/UserCard/UserCardInfo.tsx b/client/components/UserCard/UserCardInfo.tsx
new file mode 100644
index 000000000000..fab834ef8af6
--- /dev/null
+++ b/client/components/UserCard/UserCardInfo.tsx
@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement, ComponentProps } from 'react';
+
+const UserCardInfo = (props: ComponentProps<typeof Box>): ReactElement => (
+	<Box mbe='x8' is='span' fontScale='p2' color='hint' withTruncatedText {...props} />
+);
+
+export default UserCardInfo;
diff --git a/client/components/UserCard/UserCardRole.tsx b/client/components/UserCard/UserCardRole.tsx
new file mode 100644
index 000000000000..e699f2e32c9d
--- /dev/null
+++ b/client/components/UserCard/UserCardRole.tsx
@@ -0,0 +1,10 @@
+import { Box, Tag } from '@rocket.chat/fuselage';
+import React, { ReactNode, ReactElement } from 'react';
+
+const UserCardRole = ({ children }: { children: ReactNode }): ReactElement => (
+	<Box m='x2' fontScale='c2'>
+		<Tag disabled children={children} />
+	</Box>
+);
+
+export default UserCardRole;
diff --git a/client/components/UserCard/UserCardRoles.tsx b/client/components/UserCard/UserCardRoles.tsx
new file mode 100644
index 000000000000..398bbe7cc2c8
--- /dev/null
+++ b/client/components/UserCard/UserCardRoles.tsx
@@ -0,0 +1,14 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactNode, ReactElement } from 'react';
+
+import UserCardInfo from './UserCardInfo';
+
+const UserCardRoles = ({ children }: { children: ReactNode }): ReactElement => (
+	<Box m='neg-x2'>
+		<UserCardInfo flexWrap='wrap' display='flex' flexShrink={0}>
+			{children}
+		</UserCardInfo>
+	</Box>
+);
+
+export default UserCardRoles;
diff --git a/client/components/UserCard/UserCardUsername.tsx b/client/components/UserCard/UserCardUsername.tsx
new file mode 100644
index 000000000000..674a9ce0139f
--- /dev/null
+++ b/client/components/UserCard/UserCardUsername.tsx
@@ -0,0 +1,31 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement, ReactNode, ComponentProps } from 'react';
+
+import * as UserStatus from '../UserStatus';
+
+type UserCardUsernameProps = ComponentProps<typeof Box> & {
+	name: ReactNode;
+	status: ReactNode;
+};
+
+const UserCardUsername = ({ name, status = <UserStatus.Offline />, ...props }: UserCardUsernameProps): ReactElement => (
+	<Box
+		display='flex'
+		title={name}
+		flexGrow={2}
+		flexShrink={1}
+		flexBasis={0}
+		alignItems='center'
+		fontScale='h4'
+		color='default'
+		withTruncatedText
+		{...props}
+	>
+		{status}{' '}
+		<Box mis='x8' flexGrow={1} withTruncatedText>
+			{name}
+		</Box>
+	</Box>
+);
+
+export default UserCardUsername;
diff --git a/client/components/UserCard/Username.js b/client/components/UserCard/Username.js
deleted file mode 100644
index aafa17f7df57..000000000000
--- a/client/components/UserCard/Username.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
-
-import * as UserStatus from '../UserStatus';
-
-const Username = ({ name, status = <UserStatus.Offline />, title, ...props }) => (
-	<Box {...props} display='flex' title={title} flexShrink={0} alignItems='center' fontScale='h4' color='default' withTruncatedText>
-		{status}{' '}
-		<Box mis='x8' flexGrow={1} withTruncatedText>
-			{name}
-		</Box>
-	</Box>
-);
-
-export default Username;
diff --git a/client/components/UserCard/index.ts b/client/components/UserCard/index.ts
index 87c60b5a2c4b..defc7140be15 100644
--- a/client/components/UserCard/index.ts
+++ b/client/components/UserCard/index.ts
@@ -1,14 +1,14 @@
-import Action from './Action';
-import Info from './Info';
-import Role from './Role';
-import Roles from './Roles';
 import UserCard from './UserCard';
-import Username from './Username';
+import UserCardAction from './UserCardAction';
+import UserCardInfo from './UserCardInfo';
+import UserCardRole from './UserCardRole';
+import UserCardRoles from './UserCardRoles';
+import UserCardUsername from './UserCardUsername';
 
 export default Object.assign(UserCard, {
-	Action,
-	Role,
-	Roles,
-	Info,
-	Username,
+	Action: UserCardAction,
+	Role: UserCardRole,
+	Roles: UserCardRoles,
+	Info: UserCardInfo,
+	Username: UserCardUsername,
 });
diff --git a/client/views/room/UserCard/index.js b/client/views/room/UserCard/index.js
index 2fb634b6aa69..c80c55226581 100644
--- a/client/views/room/UserCard/index.js
+++ b/client/views/room/UserCard/index.js
@@ -87,7 +87,7 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 
 	const actions = useMemo(() => {
 		const mapAction = ([key, { label, icon, action }]) => (
-			<UserCard.Action key={key} title={label} aria-label={label} onClick={action} icon={icon} />
+			<UserCard.Action key={key} label={label} aria-label={label} onClick={action} icon={icon} />
 		);
 
 		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);