feat: custom styling and content (#217)

Co-authored-by: Vladislav Zimnikov <[email protected]>
Co-authored-by: juliusmarminge <[email protected]>

.changeset/breezy-carpets-drop.md

@@ -0,0 +1,5 @@
+---
+"@uploadthing/react": minor
+---
+
+feat(react): content and styling customisation

docs/package.json

@@ -11,14 +11,19 @@
     "debug": "NODE_OPTIONS='--inspect' next dev"
   },
   "dependencies": {
+    "@uploadthing/react": "5.2.1",
     "next": "13.4.4",
     "nextra": "^2.7.0",
     "nextra-theme-docs": "^2.7.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "uploadthing": "5.3.2"
   },
   "devDependencies": {
     "@types/react": "18.2.8",
-    "@types/react-dom": "18.2.4"
+    "@types/react-dom": "18.2.4",
+    "autoprefixer": "10.4.14",
+    "postcss": "8.4.22",
+    "tailwindcss": "^3.3.2"
   }
-}
+}

docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

docs/src/globals.css

@@ -0,0 +1,75 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* applied to container */
+.custom-class {
+    background-color: none;
+  }
+
+  /* applied to button */
+  .custom-class > *[data-ut-element="button"] {
+    font-size: 1.6rem;
+    color: rgb(0 0 0 / 1);
+    background-color: rgb(239 68 68 / 1);
+  }
+
+  /* applied to button when uploading */
+  .custom-class > *[data-ut-element="button"][data-state="readying"] {
+    background-color: rgb(239 68 68 / 0.5);
+    color: rgb(0 0 0 / 0.5);
+    cursor: not-allowed;
+  }
+
+  /* applied to button when uploading */
+  .custom-class > *[data-ut-element="button"][data-state="uploading"] {
+    background-color: rgb(239 68 68 / 0.5);
+    color: rgb(0 0 0 / 0.5);
+    cursor: not-allowed;
+  }
+
+  /* applied to upload indicator when uploading */
+  .custom-class > *[data-ut-element="button"][data-state="uploading"]::after {
+    background-color: rgb(234 88 12 / 1);
+  }
+
+  /* applied to container */
+.custom-container {
+  background-color: none;
+  margin-top: 1rem;
+  }
+
+  /* applied to container when readying */
+  .custom-container[data-state="readying"] {
+    background-color: none;
+  }
+
+  /* applied to button */
+  .custom-button {
+    font-size: 1.6rem;
+    color: rgb(0 0 0 / 1);
+    background-color: rgb(239 68 68 / 1);
+  }
+
+  /* applied to button when uploading */
+  .custom-button-uploading {
+    background-color: rgb(239 68 68 / 0.5);
+    color: rgb(0 0 0 / 0.5);
+    cursor: not-allowed;
+  }
+
+  .custom-button-uploading::after {
+    background-color: rgb(234 88 12 / 1) !important;
+  }
+
+  /* applied to button when ready */
+  .custom-button-ready {
+    color: #ecfdf5;
+  }
+
+  /* applied to button when not ready */
+  .custom-button-not-ready {
+    background-color: rgb(239 68 68 / 0.5);
+    color: rgb(0 0 0 / 0.5);
+    cursor: not-allowed;
+  }

docs/src/pages/_app.mdx

@@ -1,3 +1,5 @@
+import "../globals.css";
+
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }

docs/src/pages/_meta.json

@@ -3,23 +3,24 @@
   "getting-started": "Getting Started",
   "nextjs": "Next.js Setup",
   "solid": "SolidStart Setup",
+  "theming": "Theming",
   "faq": {
     "title": "Frequently Asked Questions (FAQ)",
-    "theme": { "toc": false }
+    "theme": {
+      "toc": false
+    }
   },
   "api-reference": "API Reference",
   "errors": "Error Handling",
-
   "roadmap": {
     "title": "Roadmap",
     "href": "https://t3-tools.notion.site/776334c06d814dd08d450975bb983085?v=a04ee69d18a047859717b279df504a6b",
     "newWindow": true
   },
-
   "project-link": {
     "title": "Dashboard ↗",
     "type": "page",
     "href": "https://uploadthing.com/dashboard",
     "newWindow": true
   }
-}
+}