Installation Guide

Follow these steps to integrate NodePine AIBlocks into your project and start building beautiful, AI-powered interfaces.

1. Install the package

Add the library to your project using npm or your favorite package manager.

npm install @nodepine/aiblocks

2. Configure Tailwind CSS

Update your tailwind.config.js to include the NodePine preset and content paths. This is crucial for styling to apply correctly.

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nodepine/aiblocks/dist/**/*.{js,ts,jsx,tsx}"
  ],
  presets: [
    require("@nodepine/aiblocks/preset")
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Configure CSS

Add the Tailwind directives and the AIBlocks stylesheet to your main CSS file. The library's required base styles, fonts, and critical animations are included in this file.

/* src/index.css */
@import "@nodepine/aiblocks/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;