npm package: @nodepine/aiblocks-docs
Description: <div style="background-color: #000; color: #ffffff; padding: 2rem; border-radius: 8px;">   <h1>NodePine AIBlocks</h1>   <p><strong>AI-Powered React Component Library for Production Applications</strong></p>   <p>     <a href="https://badge.fury.io/js/%40n
Latest version: 1.3.39

<div style="background-color: #000; color: #ffffff; padding: 2rem; border-radius: 8px;">
  <h1>NodePine AIBlocks</h1>
  <p><strong>AI-Powered React Component Library for Production Applications</strong></p>
  <p>
    <a href="https://badge.fury.io/js/%40nodepine%2Faiblocks"><img src="https://badge.fury.io/js/%40nodepine%2Faiblocks.svg" alt="npm version"></a>
    &nbsp;
    <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a>
  </p>
  <br>
  <p>
    <a href="https://nodepine.ai" target="_blank" rel="noopener noreferrer">
      <img src="https://storage-dev.biela.dev/content-studio/685309696e10aa6ab869f4e6/1752340602609-685309696e10aa6ab869f4e6/1752580365307.svg" alt="Developed by NodePine" height="40">
    </a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://biela.dev" target="_blank" rel="noopener noreferrer">
      <img src="https://storage-dev.biela.dev/content-studio/685309696e10aa6ab869f4e6/1752340602609-685309696e10aa6ab869f4e6/1752580417092.svg" alt="Powered by Biela.dev" height="40">
    </a>
  </p>
</div>

---

## The Ultimate Toolkit for Vibe-Driven Development

NodePine AIBlocks is an open-source, AI-powered React component library built for the modern developer. It includes a comprehensive collection of production-ready components that are not only beautiful by default but also infinitely customizable, allowing you to focus on your creative vision.

---

## Quick Start

### Installation

```bash
npm install @nodepine/aiblocks
# or
yarn add @nodepine/aiblocks
# or
pnpm add @nodepine/aiblocks
```

### Basic Usage

```jsx
import React from 'react';
import { Navbar01, Button } from '@nodepine/aiblocks';

function App() {
  return (
    <div>
      <Navbar01
        logo={{ src: "/my-logo.png", alt: "My Company" }}
        navLinks={[
          { title: "Home", url: "/" },
          { title: "About", url: "/about" },
          { title: "Contact", url: "/contact" }
        ]}
        buttons={[
          { title: "Get Started", variant: "primary", size: "sm" }
        ]}
      />
      <main className="p-8">
        <h1 className="text-3xl font-bold mb-4">Welcome</h1>
        <Button variant="primary">Click me</Button>
      </main>
    </div>
  );
}
export default App;
```
---
## Configuration
### Tailwind CSS Setup

**REQUIRED:** Configure Tailwind CSS with NodePine AIBlocks preset:

```js
// 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: {
      // Your custom theme extensions go here
    },
  },
  plugins: [],
};
```

### CSS & Font Setup

**REQUIRED:** Add the Tailwind directives to your main CSS file. The library's required base styles and Manrope font are injected automatically by the library itself.

```css
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Installation Test

Verify installation with the demo page:

```jsx
import React from 'react';
import { DemoPage } from '@nodepine/aiblocks';

function App() {
  return <DemoPage />;
}

export default App;
```

**Expected Result:**
- NodePine AIBlocks branding and logo
- Working Navbar01 component with proper styling
- Green color scheme and Manrope font
- Responsive design and animations

## Available Components
### Current Components (v1.3.24)
- **ThemeableButton** - Advanced button with comprehensive theming support
- **Navbar01** - Basic navigation component with mobile menu and dropdown support
- **Navbar02** - Centered navigation with button positioned on the right
- **Navbar03** - Slide-out mobile menu with overlay and centered logo
- **Navbar04** - Full-screen mobile menu with unique 4-line hamburger animation
- **Navbar05** - Advanced mega menu with featured content sections
- **Button** - Reusable button component with variants (primary, secondary, ghost)
- **DemoPage** - Installation test component with populated examples
### Utilities Available
- **AIBlocksThemeProvider** - Global theming system
- **useThemeColors** - Hook for accessing theme colors
- **useMediaQuery** - Responsive breakpoint detection hook
- **Animation variants** - Pre-built Framer Motion animations
- **Design tokens** - Colors, spacing, typography system

### Coming Soon
- 520+ AI-powered components across 47+ categories
- AI-driven layout generation and component suggestions
- Complete design system with intelligent utilities
- TypeScript support with full type definitions
- Accessibility-first approach (WCAG AA compliance)

## Styling & Customization

NodePine AIBlocks offers multiple approaches to customize components for your brand:

### 1. Theme Provider (Recommended)
```jsx
import { AIBlocksThemeProvider } from '@nodepine/aiblocks';

<AIBlocksThemeProvider theme={{
  colors: {
    primary: {
      500: '#16a34a', // Your brand color
      600: '#15803d'  // Hover state
    }
  }
}}>
  <App />
</AIBlocksThemeProvider>
```
### 2. Direct Color Props
```jsx
<Button
  backgroundColor="#16a34a"
  hoverColor="#15803d"
  textColor="white"
>
  Custom Button
</Button>
```
### 3. Unstyled Variants
```jsx
<ThemeableButton
  variant="unstyled"
  className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg"
>
  Fully Custom
</ThemeableButton>
```

### 4. CSS Custom Properties
```jsx
<Button
  customStyles={{
    '--button-bg': '#16a34a',
    '--button-hover': '#15803d'
  }}
>
  CSS Variables
</Button>
```

---

## For the Vibe Coding Community

NodePine AIBlocks is crafted for developers who value aesthetics and experience. We empower the vibe coding community to build more beautiful, intuitive, and engaging applications on forward-thinking platforms like:

- [Biela.dev](https://biela.dev)
- [Bolt.new](https://bolt.new)
- [Lovable.dev](https://lovable.dev)

### AI Development Integration

When using an AI development assistant, provide it with the instructions from our **[Vibe Coding Guide](https://nodepine.ai/vibe-coding-guide)** to ensure perfect integration. Key principles include:

- **Named Imports Only**: The library exclusively uses named exports.
- **Props Drive Content**: Components are blank by default; all content is provided via props.
- **Safety First**: All components are built with robust safety checks to prevent runtime errors.

---

## Troubleshooting

### Components Look Unstyled
1.  Ensure you've added the NodePine preset to `tailwind.config.js`.
2.  Include NodePine components in your Tailwind `content` paths.
3.  Restart your development server after config changes.

### Font Not Loading
1.  The Manrope font is now injected automatically. If it's not loading, check for network issues or conflicts with other globally-scoped font rules in your project.
2.  Ensure the Tailwind preset is properly configured.
3.  Check browser developer tools for font loading errors.

### Build Errors
1.  Ensure Tailwind CSS is installed: `npm install tailwindcss`.
2.  Verify your `tailwind.config.js` syntax is correct.
3.  Check that all required dependencies are installed.

### Components Appear Empty
1. **This is expected behavior** - components are blank by default
2. Provide content via props: `logo`, `navLinks`, `buttons`, etc.
3. Check the DemoPage component for examples of how to populate components
4. All components require props to display content for maximum flexibility

---

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

---

## Support

- Email: hello@nodepine.ai
- Issues: [GitHub Issues](https://github.com/nodepine/aiblocks/issues)
- Discussions: [GitHub Discussions](https://github.com/nodepine/aiblocks/discussions)

---

## License

MIT © [NodePine Team](https://nodepine.ai)