diff --git a/.changeset/config.json b/.changeset/config.json
index 743b65c..621748a 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -5,7 +5,6 @@
   "fixed": [],
   "linked": [
     [
-      "@fuma-comment/kysely-adapter",
       "@fuma-comment/prisma-adapter",
       "@fuma-comment/server",
       "@fuma-comment/react",
diff --git a/.changeset/lazy-berries-yell.md b/.changeset/lazy-berries-yell.md
new file mode 100644
index 0000000..9244603
--- /dev/null
+++ b/.changeset/lazy-berries-yell.md
@@ -0,0 +1,5 @@
+---
+"@fuma-comment/react": minor
+---
+
+Support Tailwind CSS presets
diff --git a/apps/docs/app/(demo)/layout.tsx b/apps/docs/app/(demo)/layout.tsx
index 56daac8..9aedf2d 100644
--- a/apps/docs/app/(demo)/layout.tsx
+++ b/apps/docs/app/(demo)/layout.tsx
@@ -1,5 +1,3 @@
-import "@fuma-comment/react/style.css";
-import "../globals.css";
 import { AuthProvider } from "./layout.client";
 
 export default function RootLayout({
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index 4a1cbee..b3deacc 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -1,12 +1,13 @@
-import { createPreset } from 'fumadocs-ui/tailwind-plugin';
+import { createPreset as createCommentPreset } from "@fuma-comment/react/theme";
+import { createPreset as createDocsPreset } from "fumadocs-ui/tailwind-plugin";
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class',
-  presets: [createPreset()],
+  darkMode: "class",
+  presets: [createCommentPreset(), createDocsPreset()],
   content: [
-    './node_modules/fumadocs-ui/dist/**/*.js',
-
+    "./node_modules/fumadocs-ui/dist/**/*.js",
+    "./node_modules/@fuma-comment/react/dist/**/*.js",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./content/**/*.{js,ts,jsx,tsx,mdx}",
@@ -24,6 +25,6 @@ export default {
           "2xl": "1400px",
         },
       },
-    }
-  }
-};
\ No newline at end of file
+    },
+  },
+};
diff --git a/packages/react/css/styles.css b/packages/react/css/styles.css
index 0768ab1..b5c61c9 100644
--- a/packages/react/css/styles.css
+++ b/packages/react/css/styles.css
@@ -1,59 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --fc-background: 0 0% 100%;
-  --fc-foreground: 0 0% 3.9%;
-  --fc-muted: 0 0% 96.1%;
-  --fc-muted-foreground: 0 0% 45.1%;
-  --fc-popover: 0 0% 100%;
-  --fc-popover-foreground: 0 0% 15.1%;
-  --fc-card: 0 0% 96.7%;
-  --fc-card-foreground: 0 0% 3.9%;
-  --fc-border: 0 0% 89.8%;
-  --fc-primary: 0 0% 9%;
-  --fc-primary-foreground: 0 0% 98%;
-  --fc-accent: 0 0% 94.1%;
-  --fc-accent-foreground: 0 0% 9%;
-  --fc-danger: 3 99% 55%;
-  --fc-ring: 0 0% 63.9%;
-}
-
-.dark {
-  --fc-background: 0 0% 3.9%;
-  --fc-foreground: 0 0% 98%;
-  --fc-muted: 0 0% 14.9%;
-  --fc-muted-foreground: 0 0% 60.9%;
-  --fc-popover: 0 0% 7%;
-  --fc-popover-foreground: 0 0% 88%;
-  --fc-card: 0 0% 8%;
-  --fc-card-foreground: 0 0% 98%;
-  --fc-border: 0 0% 18%;
-  --fc-primary: 0 0% 98%;
-  --fc-primary-foreground: 0 0% 9%;
-  --fc-accent: 0 0% 14.9%;
-  --fc-accent-foreground: 0 0% 98%;
-  --fc-ring: 0 0% 14.9%;
-  --fc-danger: 3 95% 64%;
-}
-
-.tiptap p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-  @apply fc-text-muted-foreground;
-}
-
-.tiptap img {
-  @apply fc-rounded-lg fc-max-w-full fc-w-auto fc-max-h-60;
-}
-
-.tiptap img.ProseMirror-selectednode {
-  @apply fc-ring-2 fc-ring-primary;
-}
-
-.tiptap a {
-  @apply fc-font-medium fc-underline;
-}
diff --git a/packages/react/package.json b/packages/react/package.json
index 0c0cd52..f285e9b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -2,7 +2,7 @@
   "name": "@fuma-comment/react",
   "version": "0.1.1",
   "main": "./dist/index.js",
-  "types": "./dist/index.d.mts",
+  "types": "./dist/index.d.ts",
   "author": "Fuma Nama",
   "homepage": "https://fuma-comment.vercel.app",
   "repository": "https://github.com/fuma-nama/fuma-comment",
@@ -10,18 +10,30 @@
     "./dist"
   ],
   "license": "MIT",
+  "type": "module",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
     "./style.css": "./dist/style.css",
     "./atom": {
       "import": "./dist/atom.js",
-      "types": "./dist/atom.d.mts"
+      "types": "./dist/atom.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.js",
+      "types": "./dist/theme/index.d.ts"
     }
   },
   "typesVersions": {
     "*": {
       "atom": [
-        "./dist/atom.d.mts"
+        "./dist/atom.d.ts"
+      ],
+      "theme": [
+        "./dist/theme/index.d.ts"
       ]
     }
   },
diff --git a/packages/react/postcss.config.js b/packages/react/postcss.config.js
index 0b26cdd..d9a89b6 100644
--- a/packages/react/postcss.config.js
+++ b/packages/react/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     "tailwindcss/nesting": {},
     tailwindcss: {},
diff --git a/packages/react/src/atom.tsx b/packages/react/src/atom.tsx
index 659ea65..ca2f589 100644
--- a/packages/react/src/atom.tsx
+++ b/packages/react/src/atom.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   useMemo,
   type ReactNode,
@@ -48,11 +50,7 @@ export const CommentsPost = forwardRef<
   const auth = useAuthContext();
 
   return (
-    <div
-      className={cn("fc-flex fc-flex-col fc-gap-2", className)}
-      ref={ref}
-      {...props}
-    >
+    <div className={cn("flex flex-col gap-2", className)} ref={ref} {...props}>
       <CommentPost />
       {auth.status === "unauthenticated" && <AuthButton />}
     </div>
@@ -78,13 +76,13 @@ export const CommentsList = forwardRef<
 
   return (
     <div
-      className={cn("fc-flex fc-min-h-[80px] fc-flex-col", className)}
+      className={cn("flex min-h-[80px] flex-col", className)}
       ref={ref}
       {...props}
     >
-      {query.isLoading ? <Spinner className="fc-m-auto fc-h-8 fc-w-8" /> : null}
+      {query.isLoading ? <Spinner className="m-auto size-8" /> : null}
       {query.data?.length === 0 && (
-        <p className="fc-m-auto fc-text-center fc-text-sm fc-text-muted-foreground">
+        <p className="m-auto text-center text-sm text-fc-muted-foreground">
           No comments
         </p>
       )}
diff --git a/packages/react/src/comments.tsx b/packages/react/src/comments.tsx
index 9d78681..f613529 100644
--- a/packages/react/src/comments.tsx
+++ b/packages/react/src/comments.tsx
@@ -18,14 +18,14 @@ export const Comments = forwardRef<HTMLDivElement, CommentsProps>(
       <atom.CommentsProvider page={page}>
         <div
           className={cn(
-            "fc-rounded-xl fc-border fc-border-border fc-bg-background fc-text-foreground",
+            "rounded-xl border border-fc-border bg-fc-background text-fc-foreground",
             className,
           )}
           ref={ref}
           {...props}
         >
-          <div className="fc-border-b fc-border-border fc-p-3">
-            {title ? <div className="fc-mb-2">{title}</div> : null}
+          <div className="border-b border-fc-border p-3">
+            {title ? <div className="mb-2">{title}</div> : null}
             <atom.CommentsPost />
           </div>
           <atom.CommentsList />
diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
index 0c841d1..a9da997 100644
--- a/packages/react/src/components/button.tsx
+++ b/packages/react/src/components/button.tsx
@@ -1,21 +1,21 @@
 import { cva } from "cva";
 
 export const buttonVariants = cva(
-  "fc-inline-flex fc-items-center fc-justify-center fc-rounded-lg fc-font-medium disabled:fc-pointer-events-none disabled:fc-bg-muted disabled:fc-text-muted-foreground",
+  "inline-flex items-center justify-center rounded-lg font-medium disabled:pointer-events-none disabled:bg-fc-muted disabled:text-fc-muted-foreground",
   {
     variants: {
       size: {
-        small: "fc-h-8 fc-px-2 fc-text-xs",
-        medium: "fc-px-3 fc-py-2 fc-text-sm",
-        default: "fc-h-8 fc-w-20 fc-text-sm",
-        icon: "fc-h-7 fc-w-7 fc-rounded-full",
+        small: "h-8 px-2 text-xs",
+        medium: "px-3 py-2 text-sm",
+        default: "h-8 w-20 text-sm",
+        icon: "size-7 rounded-full",
       },
       variant: {
         primary:
-          "fc-bg-primary fc-text-primary-foreground fc-transition-colors hover:fc-bg-primary/80",
+          "bg-fc-primary text-fc-primary-foreground transition-colors hover:bg-fc-primary/80",
         secondary:
-          "fc-border fc-border-border fc-bg-card fc-transition-colors hover:fc-bg-accent",
-        ghost: "fc-transition-colors hover:fc-bg-accent/80",
+          "border border-fc-border bg-fc-card transition-colors hover:bg-fc-accent",
+        ghost: "transition-colors hover:bg-fc-accent/80",
       },
     },
     defaultVariants: {
diff --git a/packages/react/src/components/comment-edit.tsx b/packages/react/src/components/comment-edit.tsx
index f411f7d..ef2730e 100644
--- a/packages/react/src/components/comment-edit.tsx
+++ b/packages/react/src/components/comment-edit.tsx
@@ -61,11 +61,11 @@ export function CommentEdit(): JSX.Element {
         onSubmit={submit}
         placeholder="Edit Message"
       />
-      <div className="fc-mt-2 fc-flex fc-flex-row fc-gap-1">
+      <div className="mt-2 flex flex-row gap-1">
         <button
           aria-label="Edit"
           className={cn(
-            buttonVariants({ variant: "primary", className: "fc-gap-2" }),
+            buttonVariants({ variant: "primary", className: "gap-2" }),
           )}
           disabled={mutation.isMutating || (editor?.isEmpty ?? true)}
           type="submit"
@@ -73,7 +73,7 @@ export function CommentEdit(): JSX.Element {
           {mutation.isMutating ? (
             <Spinner />
           ) : (
-            <PencilIcon className="fc-h-4 fc-w-4" />
+            <PencilIcon className="size-4" />
           )}
           Edit
         </button>
diff --git a/packages/react/src/components/comment-post.tsx b/packages/react/src/components/comment-post.tsx
index f0cca2d..e410c09 100644
--- a/packages/react/src/components/comment-post.tsx
+++ b/packages/react/src/components/comment-post.tsx
@@ -47,7 +47,7 @@ export function CommentPost(): JSX.Element {
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="fc-relative">
+      <div className="relative">
         <CommentEditor
           disabled={disabled}
           editor={editor}
@@ -59,22 +59,18 @@ export function CommentPost(): JSX.Element {
           aria-label="Send Comment"
           className={cn(
             buttonVariants({
-              className: "fc-absolute fc-right-2 fc-bottom-1.5",
+              className: "absolute right-2 bottom-1.5",
               size: "icon",
             }),
           )}
           disabled={disabled || (editor?.isEmpty ?? true)}
           type="submit"
         >
-          {mutation.isMutating ? (
-            <Spinner />
-          ) : (
-            <SendIcon className="fc-h-4 fc-w-4" />
-          )}
+          {mutation.isMutating ? <Spinner /> : <SendIcon className="size-4" />}
         </button>
       </div>
       {mutation.error ? (
-        <p className="fc-mt-1 fc-text-sm fc-text-error">
+        <p className="mt-1 text-sm text-fc-error">
           {(mutation.error as FetcherError).message}
         </p>
       ) : null}
diff --git a/packages/react/src/components/comment-renderer.tsx b/packages/react/src/components/comment-renderer.tsx
index ff8952b..abe9112 100644
--- a/packages/react/src/components/comment-renderer.tsx
+++ b/packages/react/src/components/comment-renderer.tsx
@@ -15,7 +15,7 @@ type BaseRenderer = (props: {
 }) => JSX.Element;
 
 export const codeVariants = cva(
-  "fc-rounded-sm fc-border fc-border-border fc-bg-muted fc-p-0.5",
+  "rounded-sm border border-fc-border bg-fc-muted p-0.5",
 );
 
 const defaultRenderer: BaseRenderer = (props) => <span {...props} />;
@@ -30,20 +30,20 @@ type Marks = Record<
 
 const marks: Marks = {
   bold: {
-    className: "fc-font-bold",
+    className: "font-bold",
   },
   strike: {
-    className: "fc-line-through",
+    className: "line-through",
   },
   italic: {
-    className: "fc-italic",
+    className: "italic",
   },
   code: {
     className: codeVariants(),
     element: () => (props) => <code {...props} />,
   },
   link: {
-    className: "fc-font-medium fc-underline",
+    className: "font-medium underline",
     element(mark) {
       const href = mark.attrs?.href;
       if (typeof href === "string")
@@ -96,7 +96,7 @@ export function ContentRenderer({
     return (
       <img
         alt={attrs.alt ?? "upload"}
-        className="fc-max-h-60 fc-w-auto fc-max-w-full fc-rounded-lg"
+        className="max-h-60 w-auto max-w-full rounded-lg"
         height={attrs.height}
         src={content.attrs.src}
         width={attrs.width}
@@ -114,11 +114,7 @@ export function ContentRenderer({
   }
 
   if (content.type === "doc") {
-    return (
-      <div className="fc-grid fc-whitespace-pre-wrap fc-break-words">
-        {joined}
-      </div>
-    );
+    return <div className="grid whitespace-pre-wrap break-words">{joined}</div>;
   }
 
   return <>{joined}</>;
diff --git a/packages/react/src/components/comment-reply.tsx b/packages/react/src/components/comment-reply.tsx
index e43418d..1bb2627 100644
--- a/packages/react/src/components/comment-reply.tsx
+++ b/packages/react/src/components/comment-reply.tsx
@@ -53,7 +53,7 @@ export function CommentReply(): JSX.Element {
   };
 
   return (
-    <form className="fc-mt-2" onSubmit={onSubmit}>
+    <form className="mt-2" onSubmit={onSubmit}>
       <CommentEditor
         autofocus
         disabled={disabled}
@@ -63,9 +63,9 @@ export function CommentReply(): JSX.Element {
         onSubmit={submit}
         placeholder="Reply to comment"
       />
-      <div className="fc-mt-2 fc-flex fc-flex-row fc-gap-1">
+      <div className="mt-2 flex flex-row gap-1">
         <button
-          className={cn(buttonVariants({ className: "fc-gap-2" }))}
+          className={cn(buttonVariants({ className: "gap-2" }))}
           disabled={disabled || (editor?.isEmpty ?? true)}
           type="submit"
         >
@@ -85,7 +85,7 @@ export function CommentReply(): JSX.Element {
         </button>
       </div>
       {mutation.error ? (
-        <p className="fc-mt-1 fc-text-sm fc-text-error">
+        <p className="mt-1 text-sm text-fc-error">
           {(mutation.error as FetcherError).message}
         </p>
       ) : null}
diff --git a/packages/react/src/components/comment.tsx b/packages/react/src/components/comment.tsx
index 5ca0193..c1c2b4b 100644
--- a/packages/react/src/components/comment.tsx
+++ b/packages/react/src/components/comment.tsx
@@ -59,8 +59,8 @@ export function Comment({
     <CommentProvider value={context}>
       <div
         className={cn(
-          "fc-group fc-relative fc-flex fc-flex-row fc-gap-2 fc-px-3 fc-py-4 fc-text-sm",
-          canDisplayComments && "fc-pb-2",
+          "group relative flex flex-row gap-2 px-3 py-4 text-sm",
+          canDisplayComments && "pb-2",
         )}
         data-fc-comment={context.comment.id}
         data-fc-edit={context.isEditing}
@@ -69,18 +69,18 @@ export function Comment({
         {comment.author.image ? (
           <img
             alt="avatar"
-            className="fc-h-8 fc-w-8 fc-select-none fc-rounded-full fc-bg-muted"
+            className="size-8 select-none rounded-full bg-fc-muted"
             src={comment.author.image}
           />
         ) : (
-          <div className="fc-h-8 fc-w-8 fc-rounded-full fc-bg-gradient-to-br fc-from-blue-600 fc-to-red-600" />
+          <div className="size-8 rounded-full bg-gradient-to-br from-blue-600 to-red-600" />
         )}
-        <div className="fc-w-0 fc-flex-1">
-          <div className="fc-mb-2 fc-flex fc-flex-row fc-items-center fc-gap-2">
-            <span className="fc-overflow-hidden fc-overflow-ellipsis fc-whitespace-nowrap fc-font-semibold">
+        <div className="w-0 flex-1">
+          <div className="mb-2 flex flex-row items-center gap-2">
+            <span className="truncate font-semibold">
               {comment.author.name}
             </span>
-            <span className="fc-text-xs fc-text-muted-foreground">
+            <span className="text-xs text-fc-muted-foreground">
               {timestamp}
             </span>
             <CommentMenu />
@@ -104,13 +104,13 @@ const rateVariants = cva(
   buttonVariants({
     variant: "secondary",
     size: "small",
-    className: "fc-gap-1.5",
+    className: "gap-1.5",
   }),
   {
     variants: {
       active: {
-        true: "fc-bg-accent fc-text-accent-foreground",
-        false: "fc-text-muted-foreground",
+        true: "bg-fc-accent text-fc-accent-foreground",
+        false: "text-fc-muted-foreground",
       },
     },
   },
@@ -144,7 +144,7 @@ function CommentActions(): JSX.Element {
   };
 
   return (
-    <div className="fc-mt-2 fc-flex fc-flex-row fc-gap-1">
+    <div className="mt-2 flex flex-row gap-1">
       <button
         className={cn(
           rateVariants({
@@ -157,7 +157,7 @@ function CommentActions(): JSX.Element {
         }}
         type="button"
       >
-        <ThumbsUpIcon aria-label="Like" className="fc-h-4 fc-w-4" />
+        <ThumbsUpIcon aria-label="Like" className="size-4" />
         {comment.likes}
       </button>
       <button
@@ -172,7 +172,7 @@ function CommentActions(): JSX.Element {
         }}
         type="button"
       >
-        <ThumbsDownIcon aria-label="Dislike" className="fc-h-4 fc-w-4" />
+        <ThumbsDownIcon aria-label="Dislike" className="size-4" />
         {comment.dislikes}
       </button>
       {!comment.threadId && isAuthenticated ? (
@@ -230,12 +230,12 @@ function CommentMenu(): JSX.Element {
             size: "icon",
             variant: "ghost",
             className:
-              "fc-ml-auto fc-opacity-0 group-hover:fc-opacity-100 rtx-state-open:fc-bg-accent rtx-state-open:fc-opacity-100 disabled:fc-invisible",
+              "ml-auto opacity-0 group-hover:opacity-100 data-[state=open]:bg-fc-accent data-[state=open]:opacity-100 disabled:invisible",
           }),
         )}
         disabled={isEditing || isReplying}
       >
-        <MoreVerticalIcon className="fc-h-4 fc-w-4" />
+        <MoreVerticalIcon className="size-4" />
       </MenuTrigger>
       <MenuItems
         onCloseAutoFocus={(e) => {
@@ -273,13 +273,13 @@ function CommentReplies(): JSX.Element {
   };
 
   return (
-    <div className="fc-ml-10">
+    <div className="ml-10">
       <button
         className={cn(buttonVariants({ variant: "ghost", size: "medium" }))}
         onClick={onOpen}
         type="button"
       >
-        {open && query.isLoading ? <Spinner className="fc-mr-2" /> : null}
+        {open && query.isLoading ? <Spinner className="mr-2" /> : null}
         {comment.replies} Replies
       </button>
       {open ? (
diff --git a/packages/react/src/components/dialog.tsx b/packages/react/src/components/dialog.tsx
index a72f6a2..9885354 100644
--- a/packages/react/src/components/dialog.tsx
+++ b/packages/react/src/components/dialog.tsx
@@ -13,10 +13,10 @@ export function DialogContent({
 }: Primitive.DialogContentProps): React.ReactElement {
   return (
     <Primitive.Portal>
-      <Primitive.Overlay className="fc-fixed fc-inset-0 fc-bg-background/70 rtx-state-closed:fc-animate-overlayHide rtx-state-open:fc-animate-overlayShow" />
+      <Primitive.Overlay className="fixed inset-0 bg-fc-background/70 data-[state=close]:animate-overlayHide data-[state=open]:animate-overlayShow" />
       <Primitive.Content
         className={cn(
-          "fc-fixed fc-left-1/2 fc-top-1/2 fc-flex fc-w-full fc-max-w-md -fc-translate-x-1/2 -fc-translate-y-1/2 fc-flex-col fc-rounded-2xl fc-border fc-border-border fc-bg-popover fc-p-4 fc-shadow-lg rtx-state-closed:fc-animate-dialogHide rtx-state-open:fc-animate-dialogShow",
+          "fixed left-1/2 top-1/2 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl border border-fc-border bg-fc-popover p-4 shadow-lg data-[state=closed]:animate-dialogHide data-[state=open]:animate-dialogShow",
           className,
         )}
         {...props}
@@ -27,11 +27,11 @@ export function DialogContent({
             buttonVariants({
               variant: "ghost",
               size: "icon",
-              className: "fc-absolute fc-right-3 fc-top-3",
+              className: "absolute right-3 top-3",
             }),
           )}
         >
-          <XIcon className="fc-h-4 fc-w-4" />
+          <XIcon className="size-4" />
         </Primitive.Close>
       </Primitive.Content>
     </Primitive.Portal>
@@ -43,10 +43,7 @@ export function DialogTitle({
   ...props
 }: Primitive.DialogTitleProps): JSX.Element {
   return (
-    <Primitive.Title
-      className={cn("fc-mb-2 fc-font-semibold", className)}
-      {...props}
-    >
+    <Primitive.Title className={cn("mb-2 font-semibold", className)} {...props}>
       {props.children}
     </Primitive.Title>
   );
diff --git a/packages/react/src/components/editor.tsx b/packages/react/src/components/editor.tsx
index a54fb13..7005d90 100644
--- a/packages/react/src/components/editor.tsx
+++ b/packages/react/src/components/editor.tsx
@@ -61,19 +61,17 @@ export function useCommentEditor(): [
 }
 
 const editorVariants = cva(
-  "fc-rounded-xl fc-border fc-border-border fc-bg-card fc-pb-1 fc-text-sm fc-transition-colors focus-within:fc-ring-2 focus-within:fc-ring-ring aria-disabled:fc-cursor-not-allowed aria-disabled:fc-opacity-80",
+  "rounded-xl border border-fc-border bg-fc-card pb-1 text-sm transition-colors focus-within:ring-2 focus-within:ring-fc-ring aria-disabled:cursor-not-allowed aria-disabled:opacity-80",
 );
 
-const tiptapVariants = cva(
-  "fc-min-h-[40px] fc-px-3 fc-py-2 focus-visible:fc-outline-none",
-);
+const tiptapVariants = cva("min-h-[40px] px-3 py-2 focus-visible:outline-none");
 
 const toggleVariants = cva(
-  "fc-inline-flex fc-rounded-md fc-p-1 disabled:fc-cursor-not-allowed disabled:fc-opacity-50",
+  "inline-flex rounded-md p-1 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       active: {
-        true: "fc-bg-accent fc-text-accent-foreground",
+        true: "bg-fc-accent text-fc-accent-foreground",
       },
     },
   },
@@ -212,23 +210,23 @@ function ActionBar({ editor }: { editor: Editor }): JSX.Element {
   const storage = useStorage();
 
   return (
-    <div className="fc-flex fc-flex-row fc-items-center fc-gap-0.5 fc-px-1.5">
+    <div className="flex flex-row items-center gap-0.5 px-1.5">
       {[
         {
           name: "bold",
-          icon: <BoldIcon className="fc-h-4 fc-w-4" />,
+          icon: <BoldIcon className="size-4" />,
         },
         {
           name: "strike",
-          icon: <StrikethroughIcon className="fc-h-4 fc-w-4" />,
+          icon: <StrikethroughIcon className="size-4" />,
         },
         {
           name: "italic",
-          icon: <ItalicIcon className="fc-h-4 fc-w-4" />,
+          icon: <ItalicIcon className="size-4" />,
         },
         {
           name: "code",
-          icon: <CodeIcon className="fc-h-4 fc-w-4" />,
+          icon: <CodeIcon className="size-4" />,
         },
       ].map((mark) => (
         <button
@@ -252,7 +250,7 @@ function ActionBar({ editor }: { editor: Editor }): JSX.Element {
       <UpdateLink editor={editor} />
       {storage.enabled ? (
         <>
-          <div className="fc-mx-1 fc-h-4 fc-w-px fc-bg-border" role="none" />
+          <div className="mx-1 h-4 w-px bg-fc-border" role="none" />
           <UploadMenu editor={editor} />
         </>
       ) : null}
@@ -271,7 +269,7 @@ function UploadMenu({ editor }: { editor: Editor }): JSX.Element {
         disabled={!editor.can().setImage({ src: "" }) || !editor.isEditable}
         type="button"
       >
-        <ImageIcon className="fc-h-4 fc-w-4" />
+        <ImageIcon className="size-4" />
       </DialogTrigger>
       <DialogContent
         onCloseAutoFocus={(e) => {
@@ -337,7 +335,7 @@ function UploadDialogContent({
   };
 
   return (
-    <form className="fc-flex fc-flex-col" onSubmit={onSubmit}>
+    <form className="flex flex-col" onSubmit={onSubmit}>
       <input
         accept="image/png, image/jpeg"
         hidden
@@ -347,23 +345,23 @@ function UploadDialogContent({
       />
       {fileUrl ? (
         <label
-          className="fc-cursor-pointer fc-overflow-hidden fc-rounded-xl fc-border fc-border-border fc-bg-muted"
+          className="cursor-pointer overflow-hidden rounded-xl border border-fc-border bg-fc-muted"
           htmlFor="image"
         >
-          <img alt="preview" className="fc-mx-auto fc-max-h-96" src={fileUrl} />
+          <img alt="preview" className="mx-auto max-h-96" src={fileUrl} />
         </label>
       ) : (
         <label
-          className="fc-cursor-pointer fc-rounded-xl fc-border fc-border-border fc-bg-background fc-p-4 fc-text-center fc-text-sm fc-font-medium fc-text-muted-foreground"
+          className="cursor-pointer rounded-xl border border-fc-border bg-fc-background p-4 text-center text-sm font-medium text-fc-muted-foreground"
           htmlFor="image"
         >
           Upload Image
         </label>
       )}
 
-      <div className="fc-mt-2 fc-flex fc-gap-1">
+      <div className="mt-2 flex gap-1">
         <button
-          className={cn(buttonVariants({ className: "fc-gap-2" }))}
+          className={cn(buttonVariants({ className: "gap-2" }))}
           disabled={mutation.isMutating}
           type="submit"
         >
@@ -386,7 +384,7 @@ function UpdateLink({ editor }: { editor: Editor }): JSX.Element {
         disabled={!editor.can().setLink({ href: "" }) || !editor.isEditable}
         type="button"
       >
-        <LinkIcon className="fc-h-4 fc-w-4" />
+        <LinkIcon className="size-4" />
       </DialogTrigger>
       <DialogContent
         onCloseAutoFocus={(e) => {
@@ -461,7 +459,7 @@ function UpdateLinkDialogContent({
   };
 
   return (
-    <form className="fc-flex fc-flex-col fc-gap-1" onSubmit={onSubmit}>
+    <form className="flex flex-col gap-1" onSubmit={onSubmit}>
       <input
         className={cn(inputVariants())}
         id="name"
@@ -481,7 +479,7 @@ function UpdateLinkDialogContent({
         type="url"
         value={value}
       />
-      <div className="fc-mt-2 fc-flex fc-gap-1">
+      <div className="mt-2 flex gap-1">
         <button className={cn(buttonVariants())} type="submit">
           Save
         </button>
diff --git a/packages/react/src/components/input.tsx b/packages/react/src/components/input.tsx
index 5512fce..6d37a72 100644
--- a/packages/react/src/components/input.tsx
+++ b/packages/react/src/components/input.tsx
@@ -1,5 +1,5 @@
 import { cva } from "cva";
 
 export const inputVariants = cva(
-  "fc-rounded-md fc-border fc-border-border fc-bg-background fc-px-2 fc-py-1.5 fc-text-sm placeholder:fc-text-muted-foreground focus-visible:fc-outline-none focus-visible:fc-ring-2 focus-visible:fc-ring-ring",
+  "rounded-md border border-fc-border bg-fc-background px-2 py-1.5 text-sm placeholder:text-fc-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fc-ring",
 );
diff --git a/packages/react/src/components/menu.tsx b/packages/react/src/components/menu.tsx
index 775a026..c4a31e2 100644
--- a/packages/react/src/components/menu.tsx
+++ b/packages/react/src/components/menu.tsx
@@ -4,11 +4,11 @@ import { forwardRef } from "react";
 import { cn } from "../utils/cn";
 
 const menuItemVariants = cva(
-  "fc-cursor-pointer fc-px-3 fc-py-1.5 fc-text-left fc-transition-colors focus-visible:fc-outline-none disabled:fc-cursor-not-allowed disabled:fc-opacity-80 rtx-highlighted:fc-bg-accent rtx-highlighted:fc-text-accent-foreground",
+  "cursor-pointer px-3 py-1.5 text-left transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-80 data-[highlighted]:bg-fc-accent data-[highlighted]:text-fc-accent-foreground",
 );
 
 const menuItemsVariants = cva(
-  "fc-flex fc-w-56 fc-animate-fadeIn fc-flex-col fc-divide-y fc-divide-border fc-overflow-hidden fc-rounded-md fc-bg-popover fc-text-sm fc-text-popover-foreground fc-shadow-lg focus-visible:fc-outline-none focus-visible:fc-ring-1 focus-visible:fc-ring-ring rtx-state-closed:fc-animate-fadeOut",
+  "flex w-56 animate-fadeIn flex-col divide-y divide-fc-border overflow-hidden rounded-md bg-fc-popover text-sm text-fc-popover-foreground shadow-lg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fc-ring data-[state=closed]:animate-fadeOut",
 );
 
 const MenuItems = forwardRef<
diff --git a/packages/react/src/components/spinner.tsx b/packages/react/src/components/spinner.tsx
index 6cbbcda..923d883 100644
--- a/packages/react/src/components/spinner.tsx
+++ b/packages/react/src/components/spinner.tsx
@@ -8,14 +8,11 @@ export const Spinner = forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <div
-      className={cn(
-        "fc-h-4 fc-w-4 fc-rounded-full fc-border-2 fc-border-border",
-        className,
-      )}
+      className={cn("size-4 rounded-full border-2 border-fc-border", className)}
       ref={ref}
       {...props}
     >
-      <div className="fc-h-full fc-w-full fc-animate-spin fc-rounded-full fc-border-l-2 fc-border-primary" />
+      <div className="size-full animate-spin rounded-full border-l-2 border-fc-primary" />
     </div>
   );
 });
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index 90a1f8c..3457819 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 export * from "./comments";
 export * from "./contexts/auth";
 export { StorageProvider, type StorageContext } from "./contexts/storage";
diff --git a/packages/react/src/theme/create-preset.ts b/packages/react/src/theme/create-preset.ts
new file mode 100644
index 0000000..e111817
--- /dev/null
+++ b/packages/react/src/theme/create-preset.ts
@@ -0,0 +1,78 @@
+import type { PresetsConfig } from "tailwindcss/types/config";
+import { plugin } from "./plugin";
+
+export function createPreset(): PresetsConfig {
+  return {
+    plugins: [plugin(undefined)],
+    theme: {
+      extend: {
+        keyframes: {
+          fadeIn: {
+            from: { opacity: "0", transform: "translateY(20px)" },
+            to: { opacity: "1", transform: "translateY(0)" },
+          },
+          fadeOut: {
+            from: { opacity: "1", transform: "translateY(0px)" },
+            to: { opacity: "0", transform: "translateY(20px)" },
+          },
+          dialogShow: {
+            from: {
+              opacity: "0",
+              transform: "translate(-50%, -50%) scale(0.8)",
+            },
+            to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
+          },
+          dialogHide: {
+            from: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
+            to: { opacity: "0", transform: "translate(-50%, -50%) scale(0.8)" },
+          },
+          overlayShow: {
+            from: { opacity: "0" },
+            to: { opacity: "1" },
+          },
+          overlayHide: {
+            from: { opacity: "1" },
+            to: { opacity: "0" },
+          },
+        },
+        animation: {
+          fadeIn: "fadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+          fadeOut: "fadeOut 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+          overlayShow: "overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+          overlayHide: "overlayHide 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+          dialogShow: "dialogShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+          dialogHide: "dialogHide 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        },
+        colors: {
+          "fc-border": "hsl(var(--fc-border))",
+          "fc-ring": "hsl(var(--fc-ring))",
+          "fc-background": "hsl(var(--fc-background))",
+          "fc-foreground": "hsl(var(--fc-foreground))",
+          "fc-primary": {
+            DEFAULT: "hsl(var(--fc-primary))",
+            foreground: "hsl(var(--fc-primary-foreground))",
+          },
+          "fc-muted": {
+            DEFAULT: "hsl(var(--fc-muted))",
+            foreground: "hsl(var(--fc-muted-foreground))",
+          },
+          "fc-accent": {
+            DEFAULT: "hsl(var(--fc-accent))",
+            foreground: "hsl(var(--fc-accent-foreground))",
+          },
+          "fc-popover": {
+            DEFAULT: "hsl(var(--fc-popover))",
+            foreground: "hsl(var(--fc-popover-foreground))",
+          },
+          "fc-error": {
+            DEFAULT: "hsl(var(--fc-danger))",
+          },
+          "fc-card": {
+            DEFAULT: "hsl(var(--fc-card))",
+            foreground: "hsl(var(--fc-card-foreground))",
+          },
+        },
+      },
+    },
+  };
+}
diff --git a/packages/react/src/theme/index.ts b/packages/react/src/theme/index.ts
new file mode 100644
index 0000000..3434eab
--- /dev/null
+++ b/packages/react/src/theme/index.ts
@@ -0,0 +1,2 @@
+export * from "./create-preset";
+export * from "./plugin";
diff --git a/packages/react/src/theme/plugin.ts b/packages/react/src/theme/plugin.ts
new file mode 100644
index 0000000..1e59276
--- /dev/null
+++ b/packages/react/src/theme/plugin.ts
@@ -0,0 +1,63 @@
+import { withOptions } from "tailwindcss/plugin";
+
+const converted = {
+  ":root": {
+    "--fc-background": "0 0% 100%",
+    "--fc-foreground": "0 0% 3.9%",
+    "--fc-muted": "0 0% 96.1%",
+    "--fc-muted-foreground": "0 0% 45.1%",
+    "--fc-popover": "0 0% 100%",
+    "--fc-popover-foreground": "0 0% 15.1%",
+    "--fc-card": "0 0% 96.7%",
+    "--fc-card-foreground": "0 0% 3.9%",
+    "--fc-border": "0 0% 89.8%",
+    "--fc-primary": "0 0% 9%",
+    "--fc-primary-foreground": "0 0% 98%",
+    "--fc-accent": "0 0% 94.1%",
+    "--fc-accent-foreground": "0 0% 9%",
+    "--fc-danger": "3 99% 55%",
+    "--fc-ring": "0 0% 63.9%",
+  },
+  ".dark": {
+    "--fc-background": "0 0% 3.9%",
+    "--fc-foreground": "0 0% 98%",
+    "--fc-muted": "0 0% 14.9%",
+    "--fc-muted-foreground": "0 0% 60.9%",
+    "--fc-popover": "0 0% 7%",
+    "--fc-popover-foreground": "0 0% 88%",
+    "--fc-card": "0 0% 8%",
+    "--fc-card-foreground": "0 0% 98%",
+    "--fc-border": "0 0% 18%",
+    "--fc-primary": "0 0% 98%",
+    "--fc-primary-foreground": "0 0% 9%",
+    "--fc-accent": "0 0% 14.9%",
+    "--fc-accent-foreground": "0 0% 98%",
+    "--fc-ring": "0 0% 14.9%",
+    "--fc-danger": "3 95% 64%",
+  },
+  ".tiptap p.is-editor-empty:first-child::before": {
+    content: "attr(data-placeholder)",
+    float: "left",
+    height: "0",
+    "pointer-events": "none",
+    color: "hsl(var(--fc-muted-foreground))",
+  },
+
+  ".tiptap img": {
+    "@apply rounded-lg max-w-full w-auto max-h-60": {},
+  },
+
+  ".tiptap img.ProseMirror-selectednode": {
+    "@apply ring-2 ring-fc-primary": {},
+  },
+
+  ".tiptap a": {
+    "@apply font-medium underline": {},
+  },
+};
+
+export const plugin = withOptions(() => {
+  return (api) => {
+    api.addBase(converted);
+  };
+});
diff --git a/packages/react/src/utils/cn.ts b/packages/react/src/utils/cn.ts
index eb1d660..8265ae5 100644
--- a/packages/react/src/utils/cn.ts
+++ b/packages/react/src/utils/cn.ts
@@ -2,5 +2,4 @@ import { createTailwindMerge, getDefaultConfig } from "tailwind-merge";
 
 export const cn = createTailwindMerge(() => ({
   ...getDefaultConfig(),
-  prefix: "fc-",
 }));
diff --git a/packages/react/tailwind.config.js b/packages/react/tailwind.config.js
index 837d340..0694062 100644
--- a/packages/react/tailwind.config.js
+++ b/packages/react/tailwind.config.js
@@ -1,74 +1,7 @@
+import { createPreset } from "./dist/theme";
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class", "[class~=dark]"],
+export default {
   content: ["./src/**/*.{ts,tsx}"],
-  prefix: "fc-",
-  theme: {
-    extend: {
-      keyframes: {
-        fadeIn: {
-          from: { opacity: 0, transform: "translateY(20px)" },
-          to: { opacity: 1, transform: "translateY(0)" },
-        },
-        fadeOut: {
-          from: { opacity: 1, transform: "translateY(0px)" },
-          to: { opacity: 0, transform: "translateY(20px)" },
-        },
-        dialogShow: {
-          from: { opacity: 0, transform: "translate(-50%, -50%) scale(0.8)" },
-          to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
-        },
-        dialogHide: {
-          from: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
-          to: { opacity: 0, transform: "translate(-50%, -50%) scale(0.8)" },
-        },
-        overlayShow: {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
-        },
-        overlayHide: {
-          from: { opacity: 1 },
-          to: { opacity: 0 },
-        },
-      },
-      animation: {
-        fadeIn: "fadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        fadeOut: "fadeOut 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        overlayShow: "overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        overlayHide: "overlayHide 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        dialogShow: "dialogShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        dialogHide: "dialogHide 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-      },
-      colors: {
-        border: "hsl(var(--fc-border))",
-        ring: "hsl(var(--fc-ring))",
-        background: "hsl(var(--fc-background))",
-        foreground: "hsl(var(--fc-foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--fc-primary))",
-          foreground: "hsl(var(--fc-primary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--fc-muted))",
-          foreground: "hsl(var(--fc-muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--fc-accent))",
-          foreground: "hsl(var(--fc-accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--fc-popover))",
-          foreground: "hsl(var(--fc-popover-foreground))",
-        },
-        error: {
-          DEFAULT: "hsl(var(--fc-danger))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--fc-card))",
-          foreground: "hsl(var(--fc-card-foreground))",
-        },
-      },
-    },
-  },
-  plugins: [require("tailwindcss-radix")({ variantPrefix: "rtx" })],
+  presets: [createPreset()],
 };
diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
index 4b4f516..6666b42 100644
--- a/packages/react/tsup.config.ts
+++ b/packages/react/tsup.config.ts
@@ -1,11 +1,9 @@
 import { defineConfig } from "tsup";
 
 const config = defineConfig({
-  entry: ["./src/index.tsx", "./src/atom.tsx"],
+  entry: ["./src/index.tsx", "./src/theme/index.ts", "./src/atom.tsx"],
   format: "esm",
   dts: true,
-  banner: () => ({ js: "'use client';" }),
-  outExtension: () => ({ js: ".js" }),
 });
 
 export default config;