yudu-component-kit
v0.0.18
Published
<p align="center"> <img src="./projects/yudu-component-kit/assets/logo.svg" alt="Logo Fine Dev" width="250" /> </p> <h1 align="center"> YuduComponentKit </h1>
Maintainers
fine567Readme
⚠️ This library is currently under construction.
- Some features, components, and styles may change in future versions.
Table of contents
Features
- ⚡ Built for Angular v20+
- 🧱 Atomic and modular architecture
- 🌗 Supports Dark / Light themes
- 🧩 Reusable UI components (Buttons, Cards, Modals, etc.)
- 🧪 100% compatible with Angular CLI, Standalone Components, and SSR
Components list
- Button ✅
- Chip ✅
- Icons ✅
- Input 👷🏾
- Header 👷🏾
- Footer 👷🏾
- Sidebar 👷🏾
Status
Quick start
Install with npm:
npm i yudu-component-kitConfiguration
Before using the UI components, you must initialize the theme service.
This library includes a service called LocalStorageStore that:
- creates the
themekey inlocalStorage(default:dark) - applies the corresponding CSS classes (
theme--dark/theme--light) to the<body>
This initialization does not happen automatically. You need to inject the service at least once, preferably in your root component.
// app.component.ts (standalone)
import { Component, inject } from '@angular/core';
import { LocalStorageStore } from 'yudu-component-kit';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
// injecting the service will run its constructor and apply the theme classes
private readonly localStorageStore = inject(LocalStorageStore);
}Important: if you don’t inject the service, the theme classes won’t be applied and the global styles may not look as expected.
YuduComponentKit ships a design-system stylesheet with tokens (CSS variables), base rules, and theme selectors. You must include it in your app.
angular.json this line: "node_modules/yudu-component-kit/src/lib/styles/index.design-system.scss"
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css",
"node_modules/yudu-component-kit/src/lib/styles/index.design-system.scss"
]
}
}
}
}
}
}