https://github.com/gridatek/semantic-components

A collection of free and open source ui components ready for use in your angular projects
https://github.com/gridatek/semantic-components

angular ui

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gridatek/semantic-components
• Owner: gridatek
• License: mit
• Created: 2024-11-13T13:37:05.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-09-15T22:28:46.000Z (about 1 month ago)
• Last Synced: 2025-09-15T22:32:39.504Z (about 1 month ago)
• Topics: angular, ui
• Language: TypeScript
• Homepage: https://www.semantic-components.com
• Size: 15.7 MB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-angular - semantic-components - Modular, reusable UI elements built with Angular CDK and Tailwind CSS that prioritize semantic HTML and accessibility, delivering lightweight, flexible, and maintainable interfaces with full A11y support. (Third Party Components / UI Libraries built on Tailwind CSS)
• awesome-angular - semantic-components - Modular, reusable UI elements built with Angular CDK and Tailwind CSS that prioritize semantic HTML and accessibility, delivering lightweight, flexible, and maintainable interfaces with full A11y support. (Third Party Components / UI Libraries built on Tailwind CSS)

README

          
# **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 `
` 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