dlv-react-console-lib

DLV React Console Library

A comprehensive React component library with Ant Design and Tailwind CSS integration for building modern admin dashboards and console applications.

🚀 Quick Installation

npm install dlv-react-console-lib

That's it! The library will automatically install the required dependencies with fixed versions:

• antd@5.27.4
• tailwindcss@3.3.5
• @tailwindcss/forms@^0.5.7
• tailwind-scrollbar-hide@^1.1.7

📦 Manual Installation

If automatic installation fails, install manually:

npm install dlv-react-console-lib
npm install antd@5.27.4
npm install -D tailwindcss@3.3.5 autoprefixer@10.4.16 postcss@8.4.31 @tailwindcss/forms@^0.5.7 tailwind-scrollbar-hide@^1.1.7

🎯 Usage

1. Import CSS

import "dlv-react-console-lib/dist/tailwind.css";

2. Add Tailwind to your CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

3. Use Components

import React from 'react';
import { 
  DlvAntButton, 
  DlvButton, 
  DlvReactConsoleUI,
  usePathnameDlv,
  useRouterDlv 
} from 'dlv-react-console-lib';

function App() {
  return (
    <div>
      {/* Ant Design Wrapper Components */}
      <DlvAntButton type="primary" onClick={() => console.log('Clicked!')}>
        Ant Design Button
      </DlvAntButton>
      
      {/* Custom Components */}
      <DlvButton variant="primary" size="large">
        Custom Button
      </DlvButton>
      
      {/* Console UI */}
      <DlvReactConsoleUI />
    </div>
  );
}

📋 Available Components

Ant Design Wrapper Components

• DlvAntButton - Ant Design Button wrapper with custom styling
• More components can be added following the established pattern

Custom Components

• DlvButton - Custom button component with multiple variants
• More components can be added following the established pattern

Layout Components

• DlvReactConsoleUI - Main console UI component
• Content - Content wrapper component
• Header - Header component
• LeftSideMenu - Left sidebar menu component
• TopMenu - Top navigation menu component
• UserProfile - User profile component

Hooks & Utilities

• usePathnameDlv - Custom routing hook
• useRouterDlv - Custom router hook
• useApi - API integration hook
• useDlvEnv - Environment configuration hook

🎨 Styling Features

• Tailwind CSS with custom theme configuration
• Inter Font integration for modern typography
• Custom color palette (primary, red-primary, white, black)
• Custom animations (fade-in, slide-up, scale-in)
• Responsive design utilities
• Ant Design component integration

🔧 Development

# Install dependencies
npm install

# Build library
npm run build:all

# Watch for changes
npm run start

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

For support, email [e-mail] or create an issue on GitHub.