A modern Angular 20 UI component library built with signals, standalone components, and a CSS-first theming approach.

• 🎨 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

npm install ngx-nova-ui

1. Import the CSS in your styles.css:

@import'ngx-nova-ui/src/lib/styles/nova-ui.scss';

2. Import components as needed:

import{NovaButton}from'ngx-nova-ui'; @Component({selector: 'app-root',imports: [NovaButton],template: `<nova-button>Click me</nova-button>`,})exportclassAppComponent{}

<nova-buttonvariant="primary" (clicked)="handleClick()"> Click me </nova-button>

Override CSS variables in your styles:

: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}

The library provides a comprehensive set of CSS variables for colors, spacing, typography, and more. All variables use the --nova- prefix for easy identification.

ng serve

Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

# Build library only npm run build # Build library npm run build:all

# Unit tests npm test# Storybook npm run storybook

Use the theme service to toggle dark mode:

import{NovaThemeService}from'ngx-nova-ui';exportclassAppComponent{privatethemeService=inject(NovaThemeService);toggleTheme(){this.themeService.toggleMode();}setDarkMode(){this.themeService.setMode('dark');}}

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 

• NovaButton - Button component with variants and sizes
• More components coming soon!

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

MIT License - see LICENSE file for details

CSS variables approach inspired by modern CSS-first design systems.

Built with ❤️ using Angular 20