[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81412":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":14,"starSnapshotCount":14,"syncStatus":40,"lastSyncTime":41,"discoverSource":42},81412,"ng-brutalism","khangtrannn\u002Fng-brutalism","khangtrannn","Ng Brutalism (@ng-brutalism\u002Fui) - a neo-brutalist Angular UI component library. Signals, zoneless, Tailwind v4. Bold borders, offset shadows, drop in and ship loud.","https:\u002F\u002Fngbrutalism.khangtran.dev",null,"TypeScript",68,1,0,8,10,33,24,0.9,"MIT License",false,"main",true,[25,26,27,28,29,30,31,32,33,34,35,36],"angular","angular-components","angular-ui","brutalist-design","component-library","design-system","neo-brutalism","neobrutalism","signals","tailwindcss","ui-library","zoneless","2026-06-12 02:04:15","# ng-brutalism — Neo-brutalist Angular UI Component Library\n\nBuild loud. Stay sharp.\n\nng-brutalism is a neo-brutalist Angular UI component library — token-driven,\nsignals-first, zoneless, with directive APIs, keyboard-ready interactions, and\nTailwind v4 ergonomics from the first import.\n\nIf you like shadcn\u002Fui or daisyUI, but for Angular and built around brutalism.\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@ng-brutalism\u002Fui.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@ng-brutalism\u002Fui)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@ng-brutalism\u002Fui.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@ng-brutalism\u002Fui)\n[![CI](https:\u002F\u002Fgithub.com\u002Fkhangtrannn\u002Fng-brutalism\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fkhangtrannn\u002Fng-brutalism\u002Factions\u002Fworkflows\u002Fci.yml)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@ng-brutalism\u002Fui.svg)](https:\u002F\u002Fgithub.com\u002Fkhangtrannn\u002Fng-brutalism\u002Fblob\u002Fmain\u002FLICENSE)\n\n[Documentation](https:\u002F\u002Fngbrutalism.khangtran.dev) ·\n[npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@ng-brutalism\u002Fui) ·\n[GitHub](https:\u002F\u002Fgithub.com\u002Fkhangtrannn\u002Fng-brutalism)\n\n![ng-brutalism Angular component library demo — buttons, cards, dialogs in neo-brutalist style](docs\u002Fassets\u002Fintroduction.gif)\n\n## Install\n\nRequires Node 20.19+ or 22.12+, Angular 21, and Tailwind CSS v4.\n\nAutomatic setup:\n\n```sh\nng add @ng-brutalism\u002Fui\n```\n\nThe schematic installs the package, configures Tailwind CSS v4 when needed, and\nadds the bundled styles to your global stylesheet.\n\nManual setup:\n\n```sh\nnpm install @ng-brutalism\u002Fui\n# or\npnpm add @ng-brutalism\u002Fui\n```\n\nImport the styles once in your global CSS:\n\n```css\n@import 'tailwindcss';\n@import '@ng-brutalism\u002Fui\u002Fstyles.css';\n```\n\nUse a component:\n\n```ts\nimport { Component } from '@angular\u002Fcore';\nimport { NbButton } from '@ng-brutalism\u002Fui';\n\n@Component({\n  selector: 'app-root',\n  imports: [NbButton],\n  template: `\u003Cbutton nbButton>Click\u003C\u002Fbutton>`,\n})\nexport class App {}\n```\n\n## Why it stands out\n\n- **Angular first**: Built as Angular primitives with directive APIs,\n  signal-friendly internals, and native interaction patterns that fit modern\n  Angular apps.\n- **Loud by default**: Chunky borders, offset shadows, punchy color, and compact\n  motion make interfaces feel instantly brutalist.\n- **Easy to bend**: CSS custom properties and Tailwind utilities keep theme\n  overrides local, visible, and predictable.\n\nOptional — configure a subset of theme tokens from TypeScript at bootstrap.\nSets the corresponding `--nb-*` custom properties for these keys. Tokens\noutside `NbThemeConfig` (e.g. `--nb-background`, `--nb-field-bg`) must still be\noverridden in CSS.\n\n```ts\nimport { provideNgBrutalism } from '@ng-brutalism\u002Fui';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideNgBrutalism({\n      theme: {\n        primary: '#ffd166',\n        radius: '4px',\n        borderWidth: '3px',\n      },\n    }),\n  ],\n});\n```\n\n[Full installation guide →](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fdocs\u002Finstallation)\n\n## Components\n\n| Component | Description | Docs |\n| --- | --- | --- |\n| Accordion | Vertically stacked, collapsible content panels with single or multi-expand modes. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Faccordion) |\n| Avatar | Compact avatar with image and fallback support. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Favatar) |\n| Badge | Inline status pill with multiple variants. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fbadge) |\n| Button | Directive-driven button with size, variant, and shadow controls. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fbutton) |\n| Card | Container with header, title, description, content, actions, and footer slots. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fcard) |\n| Checkbox | Form checkbox with size variants and signal-friendly bindings. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fcheckbox) |\n| Dialog | Modal dialog with title, description, content, actions, and close slots. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fdialog) |\n| Image Card | Image-led card with caption overlay for portfolios and galleries. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fimage-card) |\n| Input | Single-line text input with size variants. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Finput) |\n| Input Group | Input wrapper with prefix and suffix slots for icons, addons, or units. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Finput-group) |\n| Label | Accessible label tied to form controls. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Flabel) |\n| Marquee | Looping horizontal scroller for logos, tags, or announcements. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fmarquee) |\n| Select | Native or custom dropdown select with option templating. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Fselect) |\n| Textarea | Multi-line text input with size variants. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Ftextarea) |\n| Title | Typographic heading primitive with brutalist defaults. | [Docs](https:\u002F\u002Fngbrutalism.khangtran.dev\u002Fcomponents\u002Ftitle) |\n\n## What it looks like\n\n![ng-brutalism component showcase — accordion, badge, button, card, checkbox, dialog, input, select rendered in brutalist design](docs\u002Fassets\u002Fshowcase-portfolio.png)\n\n## FAQ\n\n**Does ng-brutalism support Angular 21?**\nYes — it is built and tested against Angular 21. Earlier Angular versions are not supported.\n\n**Do I need Tailwind CSS v4?**\nYes. ng-brutalism is built around Tailwind CSS v4 and CSS custom properties. It ships with an Angular CLI schematic that helps you get the required styling setup ready out of the box.\n\n**Can I use ng-brutalism without zoneless mode?**\nYes. Components are designed for modern Angular: standalone imports, signal-friendly internals, and zoneless-friendly interaction patterns. They work in zoneless apps and in apps that still run with zone.js.\n\n**Does ng-brutalism work with server-side rendering (SSR)?**\nThe UI package avoids browser-only assumptions in core primitives where possible, and browser-dependent behavior is kept behind Angular platform checks when needed.\n\n**How customizable is the theme?**\nAll visual tokens are exposed as CSS custom properties (`--nb-*`). A subset of tokens can also be configured from TypeScript via `provideNgBrutalism({ theme: ... })` at bootstrap.\n\n**Is ng-brutalism ready for production?**\nIt is pre-1.0. Component APIs are usable today, but minor versions may include breaking changes while the library settles.\n\n## Author\n\nCreated by [Khang Tran](https:\u002F\u002Fgithub.com\u002Fkhangtrannn). MIT licensed. Source code is available on GitHub.\n\n## Status\n\n`@ng-brutalism\u002Fui` is pre-1.0. The component APIs are usable today, but minor\nversions may include breaking changes while the library settles.\n\n## Contributing\n\nIssues and pull requests are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n## License\n\nMIT\n","ng-brutalism 是一个新粗野主义风格的 Angular UI 组件库，旨在为现代 Angular 应用提供大胆、鲜明的设计。该项目采用信号驱动、无区（zoneless）架构，并与 Tailwind CSS v4 紧密集成，支持键盘交互和指令 API。其核心特色在于通过厚重边框、偏移阴影等元素实现强烈的视觉冲击力，同时保持高度可定制性，允许开发者利用 CSS 自定义属性轻松调整主题。适用于追求独特且具有强烈个性视觉效果的企业级应用或个人项目中，特别是在需要快速构建出引人注目的用户界面时尤为适用。",2,"2026-06-11 04:04:56","CREATED_QUERY"]