diff --git a/packages/daisy/src/components/toast/daisy.config.ts b/packages/daisy/src/components/toast/daisy.config.ts
new file mode 100644
index 000000000..5066429fe
--- /dev/null
+++ b/packages/daisy/src/components/toast/daisy.config.ts
@@ -0,0 +1,16 @@
+export const daisyConfig = {
+  variants: {
+    info: 'alert-info',
+    success: 'alert-success',
+    warning: 'alert-warning',
+    error: 'alert-error',
+  },
+  positions: {
+    top: 'toast-top',
+    end: 'toast-end',
+    start: 'toast-start',
+    middle: 'toast-middle',
+    bottom: 'toast-bottom',
+    center: 'toast-center',
+  },
+};
diff --git a/packages/daisy/src/components/toast/toast.tsx b/packages/daisy/src/components/toast/toast.tsx
new file mode 100644
index 000000000..b9cde4827
--- /dev/null
+++ b/packages/daisy/src/components/toast/toast.tsx
@@ -0,0 +1,58 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast as HeadlessToast } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+import { daisyConfig } from './daisy.config';
+
+export type DaisyToastVariants = 'info' | 'success' | 'warning' | 'error';
+export type DaisyToastProps = {
+  variant?: DaisyToastVariants;
+  top?: boolean;
+  end?: boolean;
+  start?: boolean;
+  middle?: boolean;
+  bottom?: boolean;
+  center?: boolean;
+  class?: string;
+  label?: string;
+};
+
+export type ToastProps = DaisyToastProps;
+export const Toast = component$(
+  ({
+    class: classNames,
+    label = 'New message',
+    variant = 'info',
+    top,
+    start,
+    center,
+    end,
+    middle,
+    bottom,
+    ...rest
+  }: ToastProps) => {
+    const { variants, positions } = daisyConfig;
+
+    return (
+      <div
+        class={clsq(
+          'toast absolute',
+          {
+            [positions.top]: top,
+            [positions.middle]: middle,
+            [positions.center]: center,
+            [positions.bottom]: bottom,
+            [positions.end]: end,
+            [positions.start]: start,
+          },
+          classNames
+        )}
+      >
+        <HeadlessToast
+          label={label}
+          class={clsq('alert', variants[variant])}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);
diff --git a/packages/daisy/src/index.ts b/packages/daisy/src/index.ts
index 7b09d5643..9bcfbec31 100644
--- a/packages/daisy/src/index.ts
+++ b/packages/daisy/src/index.ts
@@ -6,5 +6,6 @@ export * from './components/drawer/drawer';
 export * from './components/popover/popover';
 export * from './components/rating/rating';
 export * from './components/tabs';
+export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
diff --git a/packages/headless/src/components/toast/toast.tsx b/packages/headless/src/components/toast/toast.tsx
new file mode 100644
index 000000000..fbfe16ec5
--- /dev/null
+++ b/packages/headless/src/components/toast/toast.tsx
@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+interface ToastProps {
+  /**
+   * The controlled state of the toast.
+   */
+  label?: string;
+  class?: string;
+}
+
+export const Toast = component$(
+  ({ label = 'New Message', ...toastProps }: ToastProps) => {
+    return (
+      <div {...toastProps}>
+        <span>{label}</span>
+      </div>
+    );
+  }
+);
diff --git a/packages/headless/src/index.ts b/packages/headless/src/index.ts
index 020e5aaf5..97521cdf2 100644
--- a/packages/headless/src/index.ts
+++ b/packages/headless/src/index.ts
@@ -6,6 +6,7 @@ export * from './components/drawer';
 export * from './components/popover';
 export * from './components/rating/rating';
 export * from './components/tabs/tabs';
+export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
 export * as Select from './components/select/select';
diff --git a/packages/website/src/components/menu/menu.tsx b/packages/website/src/components/menu/menu.tsx
index 4839efb27..d60d104e3 100644
--- a/packages/website/src/components/menu/menu.tsx
+++ b/packages/website/src/components/menu/menu.tsx
@@ -26,6 +26,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
     { label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },
     { label: 'Select', path: `/docs/${appState.theme.toLowerCase()}/select` },
     { label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },
+    { label: 'Toast', path: `/docs/${appState.theme.toLowerCase()}/toast` },
     { label: 'Toggle', path: `/docs/${appState.theme.toLowerCase()}/toggle` },
     { label: 'Tooltip', path: `/docs/${appState.theme.toLowerCase()}/tooltip` },
   ];
diff --git a/packages/website/src/routes/docs/daisy/toast/ToastContainer.tsx b/packages/website/src/routes/docs/daisy/toast/ToastContainer.tsx
new file mode 100644
index 000000000..88c0f715c
--- /dev/null
+++ b/packages/website/src/routes/docs/daisy/toast/ToastContainer.tsx
@@ -0,0 +1,22 @@
+import { component$ } from '@builder.io/qwik';
+import { Slot } from '@builder.io/qwik';
+export default component$(() => {
+  return (
+    <div class="form-control">
+      <label class="label cursor-pointer">
+        <div
+          style={{
+            position: 'relative',
+            border: 'solid',
+            width: '480px',
+            height: '240px',
+            borderRadius: '12px',
+            background: 'rgb(220,220,220)',
+          }}
+        >
+          <Slot />
+        </div>
+      </label>
+    </div>
+  );
+});
diff --git a/packages/website/src/routes/docs/daisy/toast/index.tsx b/packages/website/src/routes/docs/daisy/toast/index.tsx
new file mode 100644
index 000000000..84d998bdc
--- /dev/null
+++ b/packages/website/src/routes/docs/daisy/toast/index.tsx
@@ -0,0 +1,36 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast } from '@qwik-ui/theme-daisy';
+import ToastContainer from './ToastContainer';
+
+export default component$(() => {
+  return (
+    <>
+      <h2>This is the documentation for the Toast</h2>
+      <h1>Toast with alert of success inside</h1>
+      <ToastContainer>
+        <Toast label="New Message" bottom end variant="success" />
+      </ToastContainer>
+      <h1>Error toast with top & start attributes</h1>
+      <ToastContainer>
+        <Toast label="Errored" top start variant="error" />
+      </ToastContainer>
+      <h1>Info toast with top & end attributes</h1>
+      <ToastContainer>
+        <Toast label="Information" top center />
+      </ToastContainer>
+      <h1>Warning toast with middle & start attributes</h1>
+      <ToastContainer>
+        <Toast
+          label="You should probably think twice about it"
+          top
+          end
+          variant="warning"
+        />
+      </ToastContainer>
+      <h1>Toast with top & center attributes</h1>
+      <ToastContainer>
+        <Toast label="New Message" start middle />
+      </ToastContainer>
+    </>
+  );
+});
diff --git a/packages/website/src/routes/docs/headless/toast/index.tsx b/packages/website/src/routes/docs/headless/toast/index.tsx
new file mode 100644
index 000000000..b6acb9161
--- /dev/null
+++ b/packages/website/src/routes/docs/headless/toast/index.tsx
@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <>
+      <h2>This is the documentation for the Toast</h2>
+      <Toast />
+    </>
+  );
+});