https://github.com/lebocow/ngx-nova-ui
Modern Angular 20 UI component library with signal-based architecture, standalone components, and CSS-first theming
https://github.com/lebocow/ngx-nova-ui
Last synced: 19 days ago
JSON representation
Modern Angular 20 UI component library with signal-based architecture, standalone components, and CSS-first theming
- Host: GitHub
- URL: https://github.com/lebocow/ngx-nova-ui
- Owner: lebocow
- License: mit
- Created: 2025-06-19T16:51:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-09-29T16:54:56.000Z (29 days ago)
- Last Synced: 2025-09-29T18:40:52.943Z (29 days ago)
- Language: TypeScript
- Size: 907 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-nova-ui - A modern Angular 20 UI component library built with signals, standalone components, and a CSS-first theming approach. (Third Party Components / UI Libraries)
- awesome-angular - ngx-nova-ui - A modern Angular 20 UI component library built with signals, standalone components, and a CSS-first theming approach. (Third Party Components / UI Libraries)
README
# Nova UI - Modern Angular UI Library
A modern Angular 20 UI component library built with signals, standalone components, and a CSS-first theming approach.
## ✨ Features
- 🎨 **CSS-First Theming** - Simple, customizable CSS variables
- 🌙 **Dark Mode Support** - Built-in light and dark themes
- 📦 **Tree-shakeable** - Import only what you need
- 🔧 **Fully Typed** - Complete TypeScript support
- ⚡ **Angular 20** - Built with latest Angular features and signals
- 🚀 **Standalone Components** - No NgModules required
- ⚙️ **Signal-based State** - Modern reactive patterns
## 🚀 Quick Start
### Installation
```bash
npm install ngx-nova-ui
```
### Basic Setup
1. Import the CSS in your `styles.css`:
```css
@import 'ngx-nova-ui/src/lib/styles/nova-ui.scss';
```
2. Import components as needed:
```typescript
import { NovaButton } from 'ngx-nova-ui';
@Component({
selector: 'app-root',
imports: [NovaButton],
template: `Click me`,
})
export class AppComponent {}
```
### Using Components
```html
Click me
```
### Customizing Theme
Override CSS variables in your styles:
```css
:root {
--nova-primary: #4f46e5;
--nova-primary-foreground: #ffffff;
--nova-radius: 0.5rem;
}
/* Dark mode is applied automatically with .dark class */
.dark {
--nova-background: #09090b;
--nova-foreground: #fafafa;
}
```
## 📚 CSS Variables
The library provides a comprehensive set of CSS variables for colors, spacing, typography, and more. All variables use the `--nova-` prefix for easy identification.
## 🛠️ Development
### Development Server
```bash
ng serve
```
Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
### Building the Library
```bash
# Build library only
npm run build
# Build library
npm run build:all
```
### Running Tests
```bash
# Unit tests
npm test
# Storybook
npm run storybook
```
## 🌙 Dark Mode
Use the theme service to toggle dark mode:
```typescript
import { NovaThemeService } from 'ngx-nova-ui';
export class AppComponent {
private themeService = inject(NovaThemeService);
toggleTheme() {
this.themeService.toggleMode();
}
setDarkMode() {
this.themeService.setMode('dark');
}
}
```
## 🏗️ Project Structure
```
ngx-nova-ui-workspace/
├── projects/
│ └── ngx-nova-ui/ # Library source
│ ├── src/
│ │ ├── lib/
│ │ │ ├── components/ # UI components
│ │ │ ├── services/ # Theme service
│ │ │ └── styles/ # CSS with variables
│ │ └── public-api.ts # Public exports
│ └── ng-package.json # Library config
└── .storybook/ # Storybook configuration
```
## 📦 Available Components
- **NovaButton** - Button component with variants and sizes
- More components coming soon!
## 🤝 Contributing
Contributions are welcome! Please read our contributing guidelines before submitting PRs.
## 📄 License
MIT License - see LICENSE file for details
## 🙏 Acknowledgments
CSS variables approach inspired by modern CSS-first design systems.
---
Built with ❤️ using Angular 20