@nodepine/aiblocks

v1.3.66

Published

5 months ago

<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

0High
0Medium
0Low

nodepine

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

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

Basic Usage

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:

// 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 and the AIBlocks stylesheet to your main CSS file. The library's required base styles, fonts, and critical animations are included in this file. REQUIRED: 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";
@import "@nodepine/aiblocks/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Installation Test

Verify installation with the demo page:

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)

import { AIBlocksThemeProvider } from '@nodepine/aiblocks';

<AIBlocksThemeProvider theme={{
  colors: {
    primary: {
      500: '#16a34a', // Your brand color
      600: '#15803d'  // Hover state
    }
  }
}}>
  <App />
</AIBlocksThemeProvider>

2. Direct Color Props

<Button
  backgroundColor="#16a34a"
  hoverColor="#15803d"
  textColor="white"
>
  Custom Button
</Button>

3. Unstyled Variants

<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

<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:

AI Development Integration

When using an AI development assistant, provide it with the instructions from our 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

Ensure you've added the NodePine preset to tailwind.config.js.
Include NodePine components in your Tailwind content paths.
Restart your development server after config changes.

Font Not Loading

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.
Ensure the Tailwind preset is properly configured.
Check browser developer tools for font loading errors.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme