My-Lib Angular Component Library

Professional Angular UI Component Library with built-in theming system.

🚀 Quick Start (3 Steps)

1. Install

npm install @padmavathy_venkatesan/my-lib

2. Add Styles to your angular.json

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@padmavathy_venkatesan/my-lib/styles/component-library.scss",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

3. Import and Use Components

import { InputComponent } from '@padmavathy_venkatesan/my-lib';

@Component({
  selector: 'app-example',
  template: `<crc-ui-kit-input label="Name" placeholder="Enter your name"></crc-ui-kit-input>`,
  imports: [InputComponent]
})
export class ExampleComponent {}

🎨 Advanced Theme Setup

For advanced theming, run the interactive setup wizard:

npx my-lib-setup

This wizard helps you:

• Choose from multiple themes (Light, Dark, Ocean, Sunset, etc.)
• Configure component usage patterns
• Generate custom theme files
• Set up advanced project structure

Import Components

import { InputComponent, ButtonComponent, CardComponent } from '@padmavathy_venkatesan/my-lib';

@Component({
  imports: [InputComponent, ButtonComponent, CardComponent]
})
export class AppComponent {
  // Your component logic
}

Available Themes

• Light Theme - Clean, modern light theme
• Dark Theme - Elegant dark theme
• Ocean Theme - Calm teal and ocean blues
• Sunset Theme - Warm orange and purple gradients
• Blue Theme - Professional blue tones
• Red Theme - Bold red accents
• CRC Group Theme - Corporate branding theme

📚 Components

Form Components

• <crc-ui-kit-input> - Enhanced input with validation
• <crc-ui-kit-textarea> - Multi-line text input
• <crc-ui-kit-checkbox> - Styled checkboxes
• <crc-ui-kit-radio> - Radio button groups
• <crc-ui-kit-switch> - Toggle switches

Layout Components

• <crc-ui-kit-card> - Flexible card container
• <crc-ui-kit-modal> - Modal dialogs
• <crc-ui-kit-sidebar> - Navigation sidebar
• <crc-ui-kit-navbar> - Navigation bar

UI Components

• <crc-ui-kit-button> - Styled buttons
• <crc-ui-kit-badge> - Status badges
• <crc-ui-kit-avatar> - User avatars
• <crc-ui-kit-spinner> - Loading spinners

🎨 Theming

Dynamic Theme Switching

import { ThemeSwitcherComponent } from '@padmavathy_venkatesan/my-lib';

@Component({
  template: `<crc-ui-kit-theme-switcher></crc-ui-kit-theme-switcher>`,
  imports: [ThemeSwitcherComponent]
})
export class AppComponent {}

Custom Theme Creation

Create your own theme by extending the base theme:

@import '@padmavathy_venkatesan/my-lib/styles/themes/_base';

$custom-theme-colors: (
  'primary-500': #your-color,
  'primary-600': #your-darker-color,
  // ... other color definitions
);

@include generate-theme-classes($custom-theme-colors, 'custom');

📖 Documentation

For detailed component documentation and examples, visit our documentation site.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide.

📄 License

MIT License - see LICENSE file for details.