An open API service indexing awesome lists of open source software.

https://github.com/joeloudjinz/inz-forge-ui

A personal engineering lab and component registry dedicated to high-performance, standalone UI components.
https://github.com/joeloudjinz/inz-forge-ui

angular components typescript ui vuejs

Last synced: 5 months ago
JSON representation

A personal engineering lab and component registry dedicated to high-performance, standalone UI components.

Awesome Lists containing this project

README

          

# InzForge UI

[![Unit Tests](https://github.com/joeloudjinz/inz-forge-ui/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/joeloudjinz/inz-forge-ui/actions/workflows/unit-tests.yml)
[![Component Tests](https://github.com/joeloudjinz/inz-forge-ui/actions/workflows/component-tests.yml/badge.svg)](https://github.com/joeloudjinz/inz-forge-ui/actions/workflows/component-tests.yml)

**A Source-First, Multi-Framework Blueprint Registry**

Welcome to InzForge, a personal engineering lab and component registry dedicated to high-performance, standalone UI components. it is a Blueprint Registry (inspired by Shadcn/UI) where components are distributed as raw source code.

---

## Table of Contents

- [InzForge UI](#inzforge-ui)
- [Technical Stack](#technical-stack)
- [Available Libraries](#available-libraries)
- [Shared Libraries](#shared-libraries)
- [Angular Libraries](#angular-libraries)
- [Accordion](#accordion)
- [VueJS Libraries](#vue-libraries)
- [Accordion](#accordion)
- [Getting Started](#getting-started)

## Technical Stack

* **Monorepo:** Nx 22.3.x
* **Framework A:** Angular 21+ (Standalone Components, Signals-First)
* **Framework B:** Vue 3.5+ (Vite, script setup, Composition API)
* **Styling:** TailwindCSS 4.1.x (with centralized Design Tokens)
* **Testing:**
* **Cypress:** Component Testing (Local/Interactive)
* **Playwright:** E2E Cross-browser Testing (Safari, Firefox, Chrome)
* **Language:** TypeScript 5.9.x

---

## Available Libraries

The InzForge UI project is organized as a monorepo with libraries for different frameworks and shared utilities. Below is a list of the existing libraries:

### Shared Libraries

- **utils** (`libs/shared/utils`) - Contains shared utilities including the centralized `theme.css` file for Tailwind design tokens and global utility functions. This is the single source of truth for styling across all components. [Read more about it.](./libs/shared/utils/README.md)

### Angular Libraries

- **hyperui** (`libs/angular/hyperui`) - A collection of Angular components based on the HyperUI design system. [Read more about it.](./libs/angular/hyperui/README.md)

- **accordion** (`libs/angular/hyperui/accordion`) - An Angular implementation of the HyperUI accordion component with multiple styles and configurations. Features include multiple accordion modes (Simple, Divided, Compact), dark mode support, RTL support, keyboard navigation, and accessibility support. [Read more about it.](./libs/angular/hyperui/accordion/README.md)

### JueJS Libraries

- **hyperui** (`libs/vue/hyperui`) - A collection of VueJS components based on the HyperUI design system. [Read more about it.](./libs/vue/hyperui/README.md)

- **accordion** (`libs/vue/hyperui/accordion`) - An Angular implementation of the HyperUI accordion component with multiple styles and configurations. Features include multiple accordion modes (Simple, Divided, Compact), dark mode support, RTL support, keyboard navigation, and accessibility support. [Read more about it.](./libs/vue/hyperui/accordion/README.md)

---

## Getting Started

### 1. Clone the Repo

```bash
git clone https://github.com/joeinz/inz-forge-ui.git
cd inz-forge-ui
```

### 2. Install Dependencies

```bash
npm install
```

### 3. Run the Showcases

To see the components in action:

```bash
# Start Angular Showcase
npx nx serve angular-inzforge

# Start Vue Showcase
npx nx serve vue-inzforge
```