diff --git a/packages/ui/src/components/card/Card.tsx b/packages/ui/src/components/card/Card.tsx
new file mode 100644
index 0000000..5989ac4
--- /dev/null
+++ b/packages/ui/src/components/card/Card.tsx
@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+import { wrapperStyle } from './cardStyle.css';
+
+export interface CardProps extends ComponentProps<'div'> {
+ children: ReactNode | ReactNode[];
+}
+
+export function Card({ children, ...rest }: CardProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/ui/src/components/card/cardStyle.css.ts b/packages/ui/src/components/card/cardStyle.css.ts
new file mode 100644
index 0000000..6cf0d10
--- /dev/null
+++ b/packages/ui/src/components/card/cardStyle.css.ts
@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+import { colors, radius, spacings } from '../../foundations';
+
+export const wrapperStyle = style({
+ width: '100%',
+ backgroundColor: colors.white100,
+ border: `1px solid ${colors.neutral300}`,
+ padding: `${spacings.xl} ${spacings.md}`,
+ gap: spacings.xl,
+ borderRadius: radius.xl,
+ display: 'flex',
+ flexDirection: 'column',
+});
diff --git a/packages/ui/src/components/card/index.ts b/packages/ui/src/components/card/index.ts
new file mode 100644
index 0000000..050a95d
--- /dev/null
+++ b/packages/ui/src/components/card/index.ts
@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 7447a44..dce43d3 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -2,6 +2,8 @@ export { Button } from './button';
export type { ButtonProps } from './button';
export { Bubble } from './bubble';
export type { BubbleProps } from './bubble';
+export { Card } from './card';
+export type { CardProps } from './card';
export { ImageButton } from './image-button';
export type { ImageButtonProps } from './image-button';
export { CTAButton, isVariantOne } from './cta-button';
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 91ab2e5..41b9dbe 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -13,6 +13,7 @@ export {
WheelPickerItem,
BottomSheet,
Chip,
+ Card,
TextField,
Agreement,
} from './components';
@@ -30,6 +31,7 @@ export type {
WheelPickerItemProps,
BottomSheetProps,
ChipProps,
+ CardProps,
TextFieldProps,
AgreementProps,
AgreementItemProps,