npm package: @resolve-components/theme
Description: Fully customizable Angular UI component library with 40+ standalone components, design tokens, and dark mode support.
Latest version: 1.2.9

# 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](https://resolve-components.web.app) | [🎨 Component Library](https://resolve-components.web.app/components) | [📦 npm](https://www.npmjs.com/package/@resolve-components/theme)

---

## Quick Start

### Automatic Setup (Recommended)

```bash
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

```bash
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:

```json
{
  "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`:

```typescript
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>`:

```html
<!-- app.html -->
<rc-layout>
  <rc-navbar position="fixed">...</rc-navbar>
  <router-outlet />
</rc-layout>
```

Import `RcLayout` in your root component:

```typescript
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](https://resolve-components.web.app/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

---

```typescript
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

- 📖 [Full Documentation](https://resolve-components.web.app)
- 🎨 [Component Showcase](https://resolve-components.web.app/components)
- 📦 [npm Package](https://www.npmjs.com/package/@resolve-components/theme)

---

**Made with ❤️ using Angular, Angular CDK, and SCSS**