Integrate Ladle

Ladle helps in preview of components. If you are building a component library and you want help showing previews of components, Ladle can help you.

Configure Ladle

When we build docu it usually makes a build folder. We can configure Ladle to make a ladle folder inside the build folder.

Install Ladle

Run both commands:

npm install @ladle/react framer-motion

npm i -D concurrently

Add Ladle Commands to Scripts

package.json

"scripts": {
    "ladle:build": "npx ladle build",
    "ladle:serve": "npx ladle serve",
    "ladle:preview": "npx ladle preview",
    "start:docu-ladle": "concurrently --kill-others \"npm run start\" \"npm run ladle:serve\""
}

Add Ladle Config

.ladle/config.mjs

export default {
  outDir: "build/ladle",
  base: "/ladle",
  addons: {
    mode: {
      enabled: true,
      defaultState: "preview",
    },
  },
};

Preserving Ladle & Docu build

package.json

"scripts": {
    // "build": "docusaurus build",
    "build": "docusaurus build && npm run ladle:build",
}

Implement Tailwind

Add styles.css

.ladle/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --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%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 215 20.2% 65.1%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --ring: 216 34% 17%;
  }
}

Add components.tsx

.ladle/components.tsx

import "./styles.css";

Add postcss

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};