Skip to content

khalilou88/semantic-components

Repository files navigation

Semantic Components

Semantic Components are self-contained, meaningful, and reusable UI elements. They prioritize semantic HTML, accessibility, and modular design, making UI more readable, maintainable, and accessible.

Built using Angular CDK and Tailwind CSS, this UI library ensures:

  • Lightweight & Flexible Components
  • Accessibility (A11y) Support

Key Characteristics

1️⃣ Semantic Naming

Uses HTML elements that convey meaning instead of relying on generic <div> structures.

2️⃣ Encapsulation

Each component manages its own logic, UI, style, and state, ensuring modularity and separation of concerns.

3️⃣ Reusability

Components should be reusable across different parts of an application without modification.

4️⃣ Abstraction

Semantic components should hide implementation details and expose only necessary interfaces.

Why Use Semantic Components?

  • 🎯 Improves Accessibility (A11y) – Uses proper HTML elements & ARIA attributes
  • 🚀 Enhances Maintainability – Self-contained, modular design makes updates easier
  • 🔄 Encourages Reusability – Reduces duplication and speeds up development
  • 🧩 Boosts Readability – Developers can understand the codebase faster

About

A collection of free and open source ui components ready for use in your angular projects.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •