Tailwind + Radix UI (Shadcn)

This is a React UI implementation of Mod renderers for the web, using a combination of Tailwind CSS (opens in a new tab) and Radix UI (opens in a new tab), and is being built using Shadcn (opens in a new tab). You can see an example using this library here (opens in a new tab) and the code for it is here (opens in a new tab)

There are some additional steps needed to make sure the configuration is correct when using this library with your repo. These are some temporary quirks while we figure out a better way to do this.

Add to your tailwind.config.js

module.exports = {
    // ...rest of your settings
    content: [
        // ...rest of your content rules, order doesn't matter
 
        // make sure tailwind doesn't tree shake classes used by the library
        "./node_modules/@mod-protocol/react-ui-shadcn/dist/**/*.{ts,tsx,css,js}",
    ],
    plugins: [
        // ...rest of your plugins, order doesn't matter
 
        // load the text styling
        require("@tailwindcss/typography"),
        // make sure the open popover animations work
        require("tailwindcss-animate")
    ]
}

If you support the video-render Mod, add a global css import to any file where you use the <RichEmbed/> component

import "@mod-protocol/react-ui-shadcn/dist/public/video-js.css"

Add this line to your global css

This fixes this issue: https://github.com/ueberdosis/tiptap/issues/2659#issuecomment-1230954941 (opens in a new tab)

 .ProseMirror p.is-empty:first-child::before {
     content: attr(data-placeholder);
     float: left;
     pointer-events: none;
     height: 0;
     @apply text-muted-foreground;
 }

In your global CSS, add CSS variables (with your own values or these)

Shadcn uses these in generated classnames to set things like the background color of popovers. If you don't want to do this, you can instead style the components yourself, by adding CSS classes for bg-popover and similar classes.

 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
 
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
 
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
 
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
 
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
 
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
 
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
 
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
 
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
 
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
 
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
 
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
 
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
 
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
 
    --destructive: 0 42.8% 40.6%;
    --destructive-foreground: 210 40% 98%;
 
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: hsl(212.7, 26.8%, 83.9);
  }
}

Quickstart Metadata Indexer