🎨 @atic/csd-ui

CSD UI is a state-of-the-art, premium Enterprise Design System & UI Component Library built specifically for Angular with Standalone Components. Designed with modern aesthetics, vibrant HSL color tokens, rich micro-animations, light/dark mode readiness, and accessible controls.

✨ Features

• 🚀 100% Standalone Components: Compatible with Angular 17, 18, 19+. No legacy NgModule required.
• 🎨 Modern & Premium Aesthetics: Tailored typography, smooth CSS variables, HSL color system, and subtle hover interactions.
• 🌙 Dark Mode Support: Seamless toggle with predefined color tokens.
• 📦 Zero-Config Tree-Shakable: Import only the components you need to keep your bundle size ultra-lightweight.
• 📱 Fully Responsive: Crafted with modern flexbox and grid layouts.

⚡ Quick Start

1. Installation

Install @atic/csd-ui via npm:

npm install @atic/csd-ui@latest

2. Configure Global Styles

Add the CSD UI global design tokens and styles in your project's angular.json under the styles array:

"styles": [
  "src/styles.css",
  "node_modules/@atic/csd-ui/src/styles/styles.scss"
]

(Optional) If you want Bootstrap Icons for prefix/suffix icons:

<!-- Include in index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

💡 Component Usage Examples

Accordion Component

import { Component } from '@angular/core';
import { CsdAccordionGroupComponent, CsdAccordionPanelComponent } from '@atic/csd-ui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CsdAccordionGroupComponent, CsdAccordionPanelComponent],
  template: `
    <csd-accordion-group>
      <csd-accordion-panel title="Accordion Item 1" [expanded]="true">
        Welcome to CSD UI Design System!
      </csd-accordion-panel>
      <csd-accordion-panel title="Accordion Item 2">
        Flexible, lightweight, and customizable Angular components.
      </csd-accordion-panel>
    </csd-accordion-group>
  `
})
export class AppComponent {}

Button & Alert Component

import { Component } from '@angular/core';
import { CsdButtonComponent, CsdAlertComponent } from '@atic/csd-ui';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CsdButtonComponent, CsdAlertComponent],
  template: `
    <csd-alert variant="success">Operation completed successfully!</csd-alert>
    <csd-button variant="primary">Submit Form</csd-button>
    <csd-button variant="light-primary">Soft Primary</csd-button>
    <csd-button variant="outline">Outline</csd-button>
  `
})
export class ExampleComponent {}

Form Input & Floating Labels

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CsdFormFieldComponent } from '@atic/csd-ui';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule, CsdFormFieldComponent],
  template: `
    <csd-form-field label="Username" hint="Enter your registered username">
      <i prefix class="bi bi-person"></i>
      <input class="csd-input" type="text" [(ngModel)]="username" placeholder="john.doe" />
    </csd-form-field>
  `
})
export class LoginComponent {
  username = '';
}

📦 Available Components

| Category | Components / Directives | |---|---| | Buttons & Actions | CsdButtonComponent, CsdFabComponent, CsdButtonToggleComponent | | Forms & Controls | CsdFormFieldComponent, CsdRadioComponent, CsdSlideToggleComponent, CsdDatepickerComponent, CsdSliderComponent, CsdStepperComponent | | Navigation & Layout | CsdTabsComponent, CsdTabComponent, CsdDropdownComponent, CsdAccordionGroupComponent, CsdAccordionPanelComponent, CsdBreadcrumbComponent, CsdPaginatorComponent | | Feedback & Overlays | CsdAlertComponent, CsdToastComponent, CsdDialogComponent, CsdModalComponent, CsdOffcanvasComponent, CsdSpinnerComponent, CsdProgressComponent | | Data Display | CsdBadgeComponent, CsdChipComponent, CsdAvatarComponent, CsdCardComponent, CsdTreeviewComponent, CsdTimelineComponent, CsdKanbanBoardComponent | | Directives | CsdTooltipDirective, CsdPopoverDirective, CsdBlockUiDirective, CsdRippleDirective, CsdDraggableDirective |

📄 License

MIT © ATIC Design System Team