Framework Integrations

This guide explains how to integrate Editu CSS variables with Tailwind CSS and shadcn/ui.

Tailwind CSS

Editu works with Tailwind CSS. You can map Editu's CSS variables to Tailwind's theme system.

Configuration

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        editu: {
          primary: 'var(--editu-primary)',
          'primary-hover': 'var(--editu-primary-hover)',
          'primary-foreground': 'var(--editu-primary-foreground)',
          secondary: 'var(--editu-secondary)',
          background: 'var(--editu-background)',
          foreground: 'var(--editu-foreground)',
          muted: 'var(--editu-muted)',
          'muted-foreground': 'var(--editu-muted-foreground)',
          border: 'var(--editu-border)',
          success: 'var(--editu-success)',
          warning: 'var(--editu-warning)',
          error: 'var(--editu-error)',
        },
      },
      borderRadius: {
        editu: {
          sm: 'var(--editu-radius-sm)',
          md: 'var(--editu-radius-md)',
          lg: 'var(--editu-radius-lg)',
          xl: 'var(--editu-radius-xl)',
        },
      },
      fontFamily: {
        editu: {
          sans: 'var(--editu-font-sans)',
          mono: 'var(--editu-font-mono)',
        },
      },
    },
  },
}

Usage

<div class="bg-editu-background text-editu-foreground">
  <button class="bg-editu-primary text-editu-primary-foreground rounded-editu-md">
    Click me
  </button>
</div>

---

shadcn/ui

Editu works with shadcn/ui. Both libraries use similar CSS variable naming conventions.

Variable Mapping

Add the following CSS variable mappings to your global styles:

@layer base {
  :root {
    /* Map Editu variables to shadcn/ui variables */
    --background: var(--editu-background);
    --foreground: var(--editu-foreground);
    
    --card: var(--editu-background);
    --card-foreground: var(--editu-foreground);
    
    --popover: var(--editu-background);
    --popover-foreground: var(--editu-foreground);
    
    --primary: var(--editu-primary);
    --primary-foreground: var(--editu-primary-foreground);
    
    --secondary: var(--editu-secondary);
    --secondary-foreground: var(--editu-secondary-foreground);
    
    --muted: var(--editu-muted);
    --muted-foreground: var(--editu-muted-foreground);
    
    --accent: var(--editu-accent);
    --accent-foreground: var(--editu-accent-foreground);
    
    --destructive: var(--editu-destructive);
    --destructive-foreground: var(--editu-destructive-foreground);
    
    --border: var(--editu-border);
    --input: var(--editu-border);
    --ring: var(--editu-primary);
    
    --radius: var(--editu-radius-lg);
  }

  .dark {
    /* Dark theme mappings are automatic since Editu 
       uses the same selectors */
  }
}

Usage with shadcn/ui Components

import { Editu } from '@editu/react';
import '@editu/core/styles.css';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

function App() {
  return (
    <Card>
      <CardContent className="p-6">
        <Editu
          placeholder="Type '/' for commands..."
          features={{ slashCommand: true, dragHandle: true }}
        />
        <div className="mt-4 flex gap-2">
          <Button>Save</Button>
          <Button variant="outline">Cancel</Button>
        </div>
      </CardContent>
    </Card>
  );
}

Theme Synchronization

Both Editu and shadcn/ui support the same theme selectors:

import { Editu } from '@editu/react';
import '@editu/core/styles.css';
import { Button } from '@/components/ui/button';

function App() {
  return (
    // Works for both Editu and shadcn/ui
    <div className="dark">
      <Editu placeholder="Type '/' for commands..." />
      <Button>Save</Button>
    </div>
  );
}

Or use Editu's EdituThemeProvider:

import { EdituThemeProvider, Editu } from '@editu/react';
import '@editu/core/styles.css';
import { Button } from '@/components/ui/button';

function App() {
  return (
    <EdituThemeProvider defaultTheme="dark">
      <Editu placeholder="Type '/' for commands..." />
      <Button>Save</Button>
    </EdituThemeProvider>
  );
}

With next-themes

import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { Editu } from '@editu/react';
import '@editu/core/styles.css';

function App() {
  return (
    <NextThemesProvider attribute="class" defaultTheme="system">
      <Editu
        placeholder="Type '/' for commands..."
        features={{
          slashCommand: true,
          dragHandle: true,
        }}
      />
    </NextThemesProvider>
  );
}