diff --git a/typography.tsx b/typography.tsx
index 5ea8909..1450a95 100644
--- a/typography.tsx
+++ b/typography.tsx
@@ -1,15 +1,17 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import React from "react";
 
 export interface Props {
     children?: React.ReactNode;
+    className?: String;
 }
 
 export class H1 extends React.Component<Props> {
     render() {
         return (
-            <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+            <h1 className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", this.props.className)}>
                 {this.props.children}
             </h1>
         );
@@ -19,7 +21,7 @@ export class H1 extends React.Component<Props> {
 export class H2 extends React.Component<Props> {
     render() {
         return (
-            <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
+            <h2 className={cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", this.props.className)}>
                 {this.props.children}
             </h2>
         );
@@ -29,7 +31,7 @@ export class H2 extends React.Component<Props> {
 export class H3 extends React.Component<Props> {
     render() {
         return (
-            <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+            <h3 className={cn("scroll-m-20 text-2xl font-semibold tracking-tight", this.props.className)}>
                 {this.props.children}
             </h3>
         );
@@ -39,7 +41,7 @@ export class H3 extends React.Component<Props> {
 export class H4 extends React.Component<Props> {
     render() {
         return (
-            <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+            <h4 className={cn("scroll-m-20 text-xl font-semibold tracking-tight", this.props.className)}>
                 {this.props.children}
             </h4>
         );
@@ -49,7 +51,7 @@ export class H4 extends React.Component<Props> {
 export class P extends React.Component<Props> {
     render() {
         return (
-            <p className="leading-7 [&:not(:first-child)]:mt-6">
+            <p className={cn("leading-7 [&:not(:first-child)]:mt-6", this.props.className)}>
                 {this.props.children}
             </p>
         );
@@ -59,7 +61,7 @@ export class P extends React.Component<Props> {
 export class Blockquote extends React.Component<Props> {
     render() {
         return (
-            <blockquote className="mt-6 border-l-2 pl-6 italic">
+            <blockquote className={cn("mt-6 border-l-2 pl-6 italic", this.props.className)}>
                 {this.props.children}
             </blockquote>
         );
@@ -69,7 +71,7 @@ export class Blockquote extends React.Component<Props> {
 export class Table extends React.Component<Props> {
     render() {
         return (
-            <div className="my-6 w-full overflow-y-auto">
+            <div className={cn("my-6 w-full overflow-y-auto", this.props.className)}>
                 <table className="w-full">
                     {this.props.children}
                 </table>
@@ -91,7 +93,7 @@ export class TableHead extends React.Component<Props> {
 export class Tr extends React.Component<Props> {
     render() {
         return (
-            <tr className="m-0 border-t p-0 even:bg-muted">
+            <tr className={cn("m-0 border-t p-0 even:bg-muted", this.props.className)}>
                 {this.props.children}
             </tr>
         );
@@ -101,7 +103,7 @@ export class Tr extends React.Component<Props> {
 export class Th extends React.Component<Props> {
     render() {
         return (
-            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+            <th className={cn("border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right", this.props.className)}>
                 {this.props.children}
             </th>
         );
@@ -111,7 +113,7 @@ export class Th extends React.Component<Props> {
 export class Td extends React.Component<Props> {
     render() {
         return (
-            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+            <td className={cn("border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right", this.props.className)}>
                 {this.props.children}
             </td>
         );