linkmama-ui-components

A React component library for AI Site Builder applications, featuring modern UI components built with Tailwind CSS and shadcn/ui.

📦 Installation

npm install linkmama-ui
# or
yarn add linkmama-ui
# or
pnpm add linkmama-ui

🚀 Quick Start

import { ModernMinimalNavbar } from 'linkmama-ui';

function App() {
  return (
    <div>
      <ModernMinimalNavbar />
    </div>
  );
}

📋 Requirements

• React >= 18.0.0
• React DOM >= 18.0.0
• Next.js >= 13.0.0 (for Next.js projects)
• Tailwind CSS (for styling)
• Class Variance Authority (CVA) - automatically included

🧩 Available Components

Navigation Components

• ModernMinimalNavbar - Clean and minimal navigation bar
• SidebarNavbar - Sidebar-style navigation
• MegaMenuNavbar - Full-featured navigation with mega menu

Hero Components

• ModernMinimalHero - Clean, centered hero section with compelling headline
• SplitScreenHero - Two-column layout with content and visual sections
• VideoBackgroundHero - Full-screen hero with video background

Component Categories

• Navigation: 3 navbar components for different use cases
• Heroes: 3 hero components for landing pages
• More components coming soon!

🎨 Styling & Architecture

This package uses modern styling patterns for maximum flexibility and performance:

Class Variance Authority (CVA)

All components use CVA for variant management, providing:

• ✅ Type-safe variants - Predictable styling options
• ✅ Consistent API - Unified approach across all components
• ✅ Flexible combinations - Mix and match variants easily
• ✅ IntelliSense support - Autocomplete for variant options

// Example: Using CVA variants
<ModernMinimalNavbar 
  variant="dark"        // CVA variant for color scheme
  sticky={true}         // Boolean variant for positioning
/>

<ModernMinimalHero
  variant="gradient"    // CVA variant for background
  showFeatures={true}   // Boolean variant for content
/>

Component Prefixing

All components use the "lm-ui-" prefix pattern for:

• ✅ CSS class isolation - Prevents style conflicts
• ✅ Easy identification - Clear component ownership
• ✅ Better debugging - Traceable styles in dev tools
• ✅ Theme customization - Target specific component styles

/* Example: Component classes in DOM */
.lm-ui-modern-minimal-navbar { /* Main navbar styles */ }
.lm-ui-modern-minimal-hero { /* Main hero styles */ }
.lm-ui-mega-menu-navbar { /* Mega menu styles */ }

Tailwind CSS Integration

Make sure you have Tailwind CSS configured in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the package styles to your Tailwind config:

// tailwind.config.js
module.exports = {
  content: [
    // ... your existing content paths
    "./node_modules/linkmama-ui/**/*.{js,jsx,ts,tsx}",
  ],
  // ... rest of your config
}

🔧 Advanced Usage

Custom Variants with CVA

Components support extensive customization through CVA variants:

// Navbar with different variants
<ModernMinimalNavbar 
  variant="light"          // Options: light, dark, transparent
  sticky={true}            // Boolean: sticky positioning
  className="custom-class" // Additional custom classes
/>

// Hero with background and variant options
<ModernMinimalHero
  variant="gradient"       // Options: light, dark, gradient
  backgroundImage="url"    // Optional background image
  showTrustIndicators={true}
  showFeatures={true}
/>

// Video hero with overlay variants
<VideoBackgroundHero
  variant="overlay-dark"   // Options: overlay-dark, overlay-light, overlay-gradient
  autoPlay={true}
  showControls={true}
/>

CSS Customization

Target component styles using the lm-ui- prefix:

/* Custom styling for specific components */
.lm-ui-modern-minimal-navbar {
  /* Override navbar styles */
  backdrop-filter: blur(20px);
}

.lm-ui-modern-minimal-hero .hero-content {
  /* Override hero content styles */
  animation: fadeInUp 0.8s ease-out;
}

📚 Documentation

This package includes comprehensive documentation in multiple formats:

📖 JSDoc API Documentation

Complete API documentation generated from inline JSDoc comments:

# Open locally after installation
open node_modules/linkmama-ui/docs/index.html

Each component includes detailed documentation with:

• Component description and use cases
• Props documentation with types and defaults
• Visual descriptions of the component appearance
• Usage examples and best practices

🎨 Storybook Interactive Documentation

Interactive component playground with live examples:

# Open locally after installation
open node_modules/linkmama-ui/storybook-static/index.html

Storybook includes:

• Live component examples with different configurations
• Interactive controls to modify props in real-time
• Multiple variants and use cases
• Visual testing across different scenarios

💻 Inline Code Documentation

All components include comprehensive JSDoc comments in the source code:

// Example: ModernMinimalNavbar JSDoc with CVA
/**
 * Modern Minimal Navbar Component
 *
 * A clean, minimalist navbar with centered logo and horizontal navigation.
 * Perfect for modern websites, portfolios, and professional services.
 *
 * Visual Description:
 * - Clean white/transparent background with subtle shadow
 * - Centered logo with navigation links spread horizontally
 * - Smooth hover animations and transitions
 * - Mobile hamburger menu with slide-down animation
 *
 * @param {Object} props - Component props
 * @param {string} props.logo - Logo text or image URL
 * @param {Array} props.navItems - Array of navigation items
 * @param {string} props.variant - CVA variant: 'light', 'dark', 'transparent'
 * @param {boolean} props.sticky - Whether navbar should be sticky (CVA variant)
 * @param {string} props.className - Additional CSS classes
 */

Component Architecture:

• ✅ CVA Variants - Type-safe styling with cva() pattern
• ✅ lm-ui- Prefix - All components use consistent class prefixing
• ✅ Flexible Props - Extensive customization options
• ✅ Responsive Design - Mobile-first approach built-in

🔧 TypeScript Support

Full TypeScript declaration files generated from JSDoc comments:

// TypeScript users get full IntelliSense support with CVA
import { ModernMinimalNavbar, ModernMinimalHero } from 'linkmama-ui';

// Hover over components to see documentation in your IDE
<ModernMinimalNavbar 
  logo="Brand"
  variant="light"    // CVA variant with type safety
  sticky={true}      // Boolean CVA variant
  className="custom-class"
/>

<ModernMinimalHero
  variant="gradient"        // CVA variant options
  showTrustIndicators={true} // Boolean variant
  backgroundImage="/hero-bg.jpg"
/>

IDE Benefits:

• ✅ CVA Type Safety - IntelliSense for all variant options
• ✅ Hover documentation - See full component descriptions
• ✅ Props autocomplete - IntelliSense for all props with CVA variants
• ✅ Type checking - Catch errors during development
• ✅ Parameter hints - See prop types and variant descriptions

🔍 Accessing Documentation

The documentation is included in the npm package and accessible at:

• TypeScript Types: ./node_modules/linkmama-ui/types/ (for IDE IntelliSense)
• JSDoc: ./node_modules/linkmama-ui/docs/index.html
• Storybook: ./node_modules/linkmama-ui/storybook-static/index.html
• Source Code: ./node_modules/linkmama-ui/src/ (with inline JSDoc comments)

🛠️ Development

Setup

# Install dependencies
yarn install

# Start development mode
yarn dev

# Build the package
yarn build

# Generate documentation
yarn docs

# Start Storybook
yarn storybook

Scripts

• yarn build - Build the package for production
• yarn dev - Start development mode with watch
• yarn types - Generate TypeScript declaration files
• yarn docs - Generate JSDoc documentation
• yarn docs:serve - Serve JSDoc documentation locally
• yarn storybook - Start Storybook development server
• yarn build-storybook - Build Storybook for production
• yarn build-docs - Build both JSDoc and Storybook documentation

📁 Project Structure

src/
├── frontend/           # Frontend components
│   └── navbars/       # Navigation components
├── shadcn/            # shadcn/ui components
├── utils/             # Utility functions
└── styles/            # Global styles and Tailwind CSS

docs/                  # Generated JSDoc documentation
storybook-static/      # Generated Storybook documentation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License.

🔗 Links

• GitHub Repository
• NPM Package
• Issues

🏷️ Keywords

React, UI Components, Tailwind CSS, shadcn/ui, Navigation, AI Site Builder, Frontend, Responsive

Made with ❤️ by LinkMama