Skip to content

A collection of accessible, customizable UI components for Angular applications

License

Notifications You must be signed in to change notification settings

gridatek/semantic-components

Repository files navigation

Semantic Components

A collection of accessible, customizable UI components for Angular applications.

Features

Modern Angular Architecture

  • Angular 21+ with standalone components (no NgModules)
  • Signals for reactive state management
  • OnPush change detection for optimal performance
  • TypeScript-first with strict type safety

Declarative

  • State-driven UI - Control components through template bindings, not imperative methods
  • No .open() calls - Use [open]="signal()" instead of dialog.open()
  • Template-based - Everything lives in your templates, easy to see and understand
  • Reactive by default - UI automatically updates with your state

Composable

  • Specialized components instead of one monolithic component with many inputs
  • Slot-based patterns - Compose UIs by nesting components together
  • Maximum flexibility - Build exactly what you need without prop drilling
  • Single responsibility - Each component has one clear purpose

Accessibility First

  • WCAG AA compliant with full keyboard navigation
  • ARIA attributes and semantic HTML
  • Focus management and screen reader support
  • Color contrast and responsive touch targets

Modern Styling

  • Tailwind CSS 4 for utility-first styling
  • CSS custom properties for easy theming
  • Dark mode support built-in
  • Responsive design with mobile-first approach

Developer Experience

  • Comprehensive documentation with live examples
  • Type-safe APIs with input/output functions
  • Predictable patterns across all components
  • Tree-shakeable for optimal bundle sizes

License

MIT

About

A collection of accessible, customizable UI components for Angular applications

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 5

Languages