Duck Dev UI — Angular neobrutalism UI component library

English | Русский

A UI component library for Angular 21, built on signals. Two visual styles:

• Classic — clean, modern minimalism
• Neobrutalism — high contrast, bold outlines and saturated colors

Every component is standalone — no NgModules needed.

• Live docs and demos: https://www.duck-dev.com/documentation
• Repository: https://github.com/maxdevdoc/ui-duck-dev
• npm: https://www.npmjs.com/package/duck-dev-lib
• Bugs and ideas: https://github.com/maxdevdoc/ui-duck-dev/issues

Installation

npm i duck-dev-lib

Requires Angular ^21.0.0. Components that show text (notifications, calendars) use @jsverse/transloco, so install it as well:

npm i @jsverse/transloco

Add the library design tokens in angular.json:

"styles": [
  "node_modules/duck-dev-lib/tokens.css",
  "src/styles.scss"
]

or in your global stylesheet:

@import 'duck-dev-lib/tokens.css';

Quick start

import { Component } from '@angular/core';
import { ButtonCasper, Badge, AccentEnumColor } from 'duck-dev-lib';

@Component({
  selector: 'app-demo',
  imports: [ButtonCasper, Badge],
  template: `
    <duck-dev-button-casper [text]="'Click me'" [colorButton]="violet" (click)="save()" />
    <dd-badge [text]="'New'" [color]="orange" [variant]="'solid'" />
  `,
})
export class Demo {
  protected readonly violet = AccentEnumColor.Violet;
  protected readonly orange = AccentEnumColor.Orange;

  save(): void {}
}

A component's accent color is set with the AccentEnumColor enum: Orange, Dark, White, Gray, Violet.

Themes

Switch the theme with the ddTheme attribute on the root element. Built-in themes are light, dark and violet:

document.documentElement.setAttribute('ddTheme', 'dark');

A custom theme is just an override of the --dd-base-* CSS variables:

[ddTheme='brand'] {
  --dd-base-0: #ffffff;
  --dd-base-100: #f4f6ff;
  --dd-base-300: #dbe0ff;
  --dd-base-600: #0e1028;
  --dd-base-secondary: #6829ff;
  --dd-base-accent-orange: #fe7b20;
  --dd-base-accent-blue: #3254f3;
}

Components

Full API (inputs, outputs, examples) is in each component's docs (currently in Russian):

| Component | What's inside | | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | Getting started | Installation, palette, themes, common pitfalls | | Accordion | Classic + 2 Neobrutalism | | Badge | Classic + 3 Neobrutalism | | Breadcrumb | Classic + Neobrutalism | | Button | 4 Classic + 6 Neobrutalism | | Card | 5 Classic + 4 Neobrutalism | | Date / Time Picker | 4 calendars + 2 time rulers | | Directives | Utility directives | | Icon | SVG icons by name | | Input | Fields, toggle, radio — Reactive Forms | | Loader | 6 Classic + 6 Neobrutalism | | Modal | Modal dialog | | Notification | Container + service for showing notifications | | Progress | 3 Classic + 3 Neobrutalism | | Segment | Classic + 2 Neobrutalism | | Selector | Drum selector, Classic + Neobrutalism | | Slider | Horizontal scrolling of templates | | Speaker Bubble | 3 Classic + 2 Neobrutalism | | Tabs | Horizontal/vertical Classic + Neobrutalism | | Tooltip | Classic + Neobrutalism |

A guide to all Neobrutalism components at once — NEOBRUTALISM.md.

For AI assistants

The docs are written to be read by AI coding assistants (Claude, ChatGPT, Cursor, Copilot):

• llms.txt — index of all component docs (llmstxt.org)
• llms-full.txt — every doc in one file
• the same Markdown docs ship inside the npm package: node_modules/duck-dev-lib/docs/*.md, node_modules/duck-dev-lib/llms-full.txt

MCP server

The package ships an MCP server with the docs of the installed version — no extra install, no network. Tools: list_components, get_component_docs, search_docs.

# Claude Code (run in a project that has duck-dev-lib installed)
claude mcp add duck-dev -- npx duck-dev-mcp

Cursor / Claude Desktop / other clients (mcp.json):

{
  "mcpServers": {
    "duck-dev": { "command": "npx", "args": ["-y", "-p", "duck-dev-lib", "duck-dev-mcp"] }
  }
}

Without MCP, tell your assistant "use duck-dev-lib, read node_modules/duck-dev-lib/llms-full.txt".

License

Duck Dev UI is licensed under PolyForm Noncommercial 1.0.0.

Free for personal, educational, noncommercial and open-source projects, as well as for charitable, educational and government organizations.

Commercial use (a product or service of a company that makes money from it) requires a commercial license. It is perpetual and is granted in exchange for a small one-time thank-you to the author — you choose the amount. To get one, open an issue labeled commercial-license with your company name — you'll get payment details and a license confirmation in reply.

Development

npm start          # demo app at http://localhost:4200
npm run build      # build the library into dist/duck-dev-lib
npm run build:demo # build the demo app
npm test           # tests
npm run format     # Prettier

Structure:

projects/
  duck-dev-lib/   # the library (npm package duck-dev-lib)
    docs/         # component docs
    src/lib/      # components
  demo/           # demo app with every component