@weeehaoooz/talos-ui

A modern, high-performance, and accessible UI component library for Angular 20+.

Built natively with Angular signals, standalone components, native control flow, and WCAG AA accessibility standards.

Documentation & Live Demo: https://talos.weeehaoooz.dev

Features

• ⚡ Native Angular Signals: Fine-grained reactive state management with signals and computed values.
• 🎯 Modern Architecture: Standalone components, directive-driven API, zero legacy NgModules.
• 🎨 Flexible Design System: CSS variables / design tokens with light & dark theme support.
• ♿ Accessible by Default: WCAG AA compliance, ARIA attributes, and full keyboard navigation.
• 🧩 Rich Component Set:
  • Button: Buttons, Button Groups, Icon Buttons
  • Form Controls: Input, Autocomplete, Select, Checkbox, Radio, Slide Toggle, Chips, Range Slider, Drop Zone, Date & Time Pickers
  • Feedback: Dialog, Alert, Snackbar, Tooltip
  • Data Display: Badge, Status Tag
  • Data Visualization: Category Bar, Heatmap
  • Layout & Nav: Tabs, Breadcrumbs, Containers, Shell

Quick Start / Installation

Recommended: Angular CLI ng add

ng add @weeehaoooz/talos-ui

The schematic automatically:

1. Installs peer dependencies (@angular/cdk, @lucide/angular, date-fns, rxjs).
2. Adds the Talos SCSS design tokens & global styles to your project.
3. Sets up optional dark mode theme attributes.

Manual Installation

npm install @weeehaoooz/talos-ui @angular/cdk @lucide/angular date-fns rxjs

Global Styles Setup

Import the stylesheet in your src/styles.scss:

@use '@weeehaoooz/talos-ui/styles/index';

Basic Example

import { Component, signal } from '@angular/core';
import { TalosButtonDirective } from '@weeehaoooz/talos-ui/button/button';
import { TalosAlertComponent } from '@weeehaoooz/talos-ui/feedback/alert';

@Component({
  selector: 'app-root',
  imports: [TalosButtonDirective, TalosAlertComponent],
  template: `
    <talos-alert type="success" title="Success">
      Talos UI is installed and running!
    </talos-alert>

    <button talosButton variant="primary" (click)="onClick()">
      Click Me
    </button>
  `
})
export class AppComponent {
  onClick() {
    console.log('Button clicked');
  }
}

License

MIT