diff --git a/.changeset/nervous-pens-chew.md b/.changeset/nervous-pens-chew.md
new file mode 100644
index 000000000..6919db7b3
--- /dev/null
+++ b/.changeset/nervous-pens-chew.md
@@ -0,0 +1,5 @@
+---
+'@portaljs/components': patch
+---
+
+Created Iframe component
diff --git a/packages/components/src/components/Iframe.tsx b/packages/components/src/components/Iframe.tsx
new file mode 100644
index 000000000..9cdb65a56
--- /dev/null
+++ b/packages/components/src/components/Iframe.tsx
@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+
+export interface IframeProps {
+ url: string;
+ style?: CSSProperties;
+}
+
+export function Iframe({
+ url, style
+}: IframeProps) {
+ return (
+
+ );
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index daf4b688c..11f791ff3 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -9,3 +9,4 @@ export * from './components/Map';
export * from './components/PdfViewer';
export * from "./components/Excel";
export * from "./components/BucketViewer";
+export * from "./components/Iframe";
diff --git a/packages/components/stories/BucketViewer.stories.ts b/packages/components/stories/BucketViewer.stories.ts
index c3bf42c2d..1e914d9ac 100644
--- a/packages/components/stories/BucketViewer.stories.ts
+++ b/packages/components/stories/BucketViewer.stories.ts
@@ -1,6 +1,6 @@
-import { raw, type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
-import { BucketViewer, BucketViewerData, BucketViewerProps } from '../src/components/BucketViewer';
+import { BucketViewer, BucketViewerProps } from '../src/components/BucketViewer';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta = {
diff --git a/packages/components/stories/Iframe.stories.ts b/packages/components/stories/Iframe.stories.ts
new file mode 100644
index 000000000..6d5884a88
--- /dev/null
+++ b/packages/components/stories/Iframe.stories.ts
@@ -0,0 +1,31 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Iframe, IframeProps } from '../src/components/Iframe';
+
+const meta: Meta = {
+ title: 'Components/Iframe',
+ component: Iframe,
+ tags: ['autodocs'],
+ argTypes: {
+ url: {
+ description:
+ 'Page to display inside of the component',
+ },
+ style: {
+ description:
+ 'Style of the component',
+ },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Normal: Story = {
+ name: 'Iframe',
+ args: {
+ url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9',
+ style: {width: `100%`, height: `100%`}
+ },
+};