diff --git a/src/components/notes/NotePreview/NotePreview.tsx b/src/components/notes/NotePreview/NotePreview.tsx
new file mode 100644
index 0000000..ec0fb7b
--- /dev/null
+++ b/src/components/notes/NotePreview/NotePreview.tsx
@@ -0,0 +1,24 @@
+import type {NotePreviewProps} from "./NotePreviewProps.ts";
+
+/**
+ * Renders a preview of the note content.
+ *
+ * This component processes the note content by truncating it to a specified length
+ * and wrapping it in a container with line-clamping styles to ensure it fits within the UI.
+ *
+ * @param props - The component properties.
+ * @param props.content - The text content of the note. Defaults to an empty string if null or undefined.
+ * @param props.maxLength - The maximum number of characters to display before the text is sliced.
+ * @returns The rendered note preview element.
+ */
+export function NotePreview(props: Readonly<NotePreviewProps>) {
+    const contents = props.content ?? "";
+
+    return (
+        <div className="line-clamp-3 text-base-content">
+            <p>
+                {contents}
+            </p>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/notes/NotePreview/NotePreviewProps.ts b/src/components/notes/NotePreview/NotePreviewProps.ts
new file mode 100644
index 0000000..1bd2cae
--- /dev/null
+++ b/src/components/notes/NotePreview/NotePreviewProps.ts
@@ -0,0 +1,4 @@
+export interface NotePreviewProps {
+    content?: string;
+    maxLength: number;
+}
\ No newline at end of file