@resolve-components/theme

v1.2.9

Published

4 days ago

Fully customizable Angular UI component library with 40+ standalone components, design tokens, and dark mode support.

0High
0Medium
0Low

@resolve-components/theme @resolve-components resolve-components angular components angular components theme angular theme ui ui components ui library ui framework

resolve-components

Fully customizable Angular UI component library – 40+ standalone, fully typed, OnPush components with a comprehensive theming system.

🎨 40+ Components — buttons, inputs, dialogs, tables, trees, virtual scroll, and more
🎭 Design Tokens — flat-map SCSS themes emit CSS custom properties at runtime
🌙 Dark Mode — built-in default and dark themes; create your own
✅ Standalone — every component is standalone with OnPush change detection
📦 Zero Dependencies — uses only Angular CDK overlay for dialogs
🚀 ng add Schematic — automatic setup with a single command

📖 Documentation | 🎨 Component Library | 📦 npm

Quick Start

Automatic Setup (Recommended)

ng add @resolve-components/theme

The schematic will:

✅ Install the package
✅ Configure angular.json
✅ Update app.config.ts
✅ Add @resolve-components entry to styles

Then start building! 🎉

Manual Setup

1. Install the package & Angular CDK

npm install @resolve-components/theme @angular/cdk eva-icons

2. Configure `angular.json`

Add the CDK overlay stylesheet to your build styles and register the styles/ folder as a Sass include path:

{
  "projects": {
    "<your-project>": {
      "architect": {
        "build": {
          "options": {
            "styles": ["node_modules/@angular/cdk/overlay-prebuilt.css", "node_modules/@resolve-components/theme/styles/resolve-components.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["node_modules/@resolve-components/theme/styles"]
            }
          }
        }
      }
    }
  }
}

3. Register the theme provider

Add provideRcTheme() to your application providers in app.config.ts:

import { provideRcTheme } from '@resolve-components/theme';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRcTheme({ name: 'default' }),
    // ...other providers
  ],
};

4. Wrap your root template with `<rc-layout>`

The layout component listens to theme changes and applies the correct CSS class to <body>:

<!-- app.html -->
<rc-layout>
  <rc-navbar position="fixed">...</rc-navbar>
  <router-outlet />
</rc-layout>

Import RcLayout in your root component:

import { RcLayout } from '@resolve-components/theme';

@Component({
  imports: [RcLayout /* , ... */],
})
export class AppComponent {}

What's Included

40+ Components

All standalone, fully typed, with OnPush change detection:

Layout & Display: Layout, Navbar, Sidenav, Card, Alert, Badge, Icon
Forms: Input, Select, Checkbox, Radio, Toggle, Datepicker, File Upload
Content: Table, Tree, Paginator, Infinite Scroll, Virtual Scroll
Feedback: Toast, Dialog, Tooltip, Menu
Input Patterns: Autocomplete, Slider, Tabs, Accordion
Progress: Spinner, Progress Bar
And more! → Browse all components

Design Tokens

Flat-map SCSS theming system:

Emit CSS custom properties at runtime
Swap themes instantly with a single class change on <body>
Fully customizable — extend the default theme or create your own

Built-in Themes

Default — light mode with professional neutral colors
Dark — dark mode optimized for low-light environments

Coming Soon 🚀

Pro Components (Q3 2026) — Advanced, production-grade components for data grids, charts, and complex business patterns
Figma UI Kit (Q2 2026) — Complete design system with all components, tokens, and variants for seamless design-to-code workflow

import { RcButtonComponent } from '@resolve-components/theme';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [RcButtonComponent],
  template: `
    <button rcButton variant="filled" status="primary">Click me</button>
    <button rcButton variant="outline">Secondary</button>
    <button rcButton variant="ghost">Ghost</button>
  `,
})
export class ExampleComponent {}

Peer Dependencies

@angular/common ≥ 17.0.0
@angular/core ≥ 17.0.0
@angular/forms ≥ 17.0.0
@angular/cdk ≥ 17.0.0
@angular/platform-browser ≥ 17.0.0
rxjs ≥ 7.4.0

Resources

Made with ❤️ using Angular, Angular CDK, and SCSS

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme