{"id":50372426,"url":"https://github.com/khangtrannn/ng-brutalism","last_synced_at":"2026-06-01T10:00:47.221Z","repository":{"id":356496891,"uuid":"1232771160","full_name":"khangtrannn/ng-brutalism","owner":"khangtrannn","description":"Ng Brutalism (@ng-brutalism/ui) - a neo-brutalist Angular UI component library. Signals, zoneless, Tailwind v4. Bold borders, offset shadows, drop in and ship loud.","archived":false,"fork":false,"pushed_at":"2026-05-29T16:09:22.000Z","size":67717,"stargazers_count":41,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-29T16:18:46.158Z","etag":null,"topics":["angular","angular-components","angular-ui","brutalist-design","component-library","design-system","neo-brutalism","neobrutalism","signals","tailwindcss","ui-library","zoneless"],"latest_commit_sha":null,"homepage":"https://ngbrutalism.khangtran.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/khangtrannn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-08T08:53:57.000Z","updated_at":"2026-05-29T16:08:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/khangtrannn/ng-brutalism","commit_stats":null,"previous_names":["khangtrannn/ng-neo-brutalism-workspace","khangtrannn/ng-brutalism"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/khangtrannn/ng-brutalism","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khangtrannn%2Fng-brutalism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khangtrannn%2Fng-brutalism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khangtrannn%2Fng-brutalism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khangtrannn%2Fng-brutalism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khangtrannn","download_url":"https://codeload.github.com/khangtrannn/ng-brutalism/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khangtrannn%2Fng-brutalism/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33769492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-components","angular-ui","brutalist-design","component-library","design-system","neo-brutalism","neobrutalism","signals","tailwindcss","ui-library","zoneless"],"created_at":"2026-05-30T08:00:26.078Z","updated_at":"2026-06-01T10:00:47.213Z","avatar_url":"https://github.com/khangtrannn.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries built on Tailwind CSS"],"readme":"# 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/ui or daisyUI, but for Angular and built around brutalism.\n\n[![npm version](https://img.shields.io/npm/v/@ng-brutalism/ui.svg)](https://www.npmjs.com/package/@ng-brutalism/ui)\n[![npm downloads](https://img.shields.io/npm/dm/@ng-brutalism/ui.svg)](https://www.npmjs.com/package/@ng-brutalism/ui)\n[![CI](https://github.com/khangtrannn/ng-brutalism/actions/workflows/ci.yml/badge.svg)](https://github.com/khangtrannn/ng-brutalism/actions/workflows/ci.yml)\n[![license](https://img.shields.io/npm/l/@ng-brutalism/ui.svg)](https://github.com/khangtrannn/ng-brutalism/blob/main/LICENSE)\n\n[Documentation](https://ngbrutalism.khangtran.dev) ·\n[npm](https://www.npmjs.com/package/@ng-brutalism/ui) ·\n[GitHub](https://github.com/khangtrannn/ng-brutalism)\n\n![ng-brutalism Angular component library demo — buttons, cards, dialogs in neo-brutalist style](docs/assets/introduction.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/ui\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/ui\n# or\npnpm add @ng-brutalism/ui\n```\n\nImport the styles once in your global CSS:\n\n```css\n@import 'tailwindcss';\n@import '@ng-brutalism/ui/styles.css';\n```\n\nUse a component:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NbButton } from '@ng-brutalism/ui';\n\n@Component({\n  selector: 'app-root',\n  imports: [NbButton],\n  template: `\u003cbutton nbButton\u003eClick\u003c/button\u003e`,\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/ui';\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://ngbrutalism.khangtran.dev/docs/installation)\n\n## Primitive System\n\nng-brutalism is a composition system, not just a component list. Use primitives\nlike `nbSurface`, `nbSection`, `nbSplit`, `nbStack`, and `nbCluster` as the\nlayout grammar. Add emphasis with `nbChip`, `nbCallout`, `nbSticker`, and\n`nbStatusDot`. Finish with typography, media, forms, and action primitives.\n\nInputs are for common design decisions. CSS variables are for local art\ndirection. Classes are for layout escape hatches.\n\n| Group | Primitives |\n| --- | --- |\n| Foundation | Tokens, theme provider, CSS variables, `nbClass` |\n| Layout | Stack, Cluster, Split, Section, Separator |\n| Surfaces | Surface, Card, Image Card, Media Frame |\n| Typography | Text, Display, Title |\n| Emphasis | Badge, Chip, Callout, Sticker, Status Dot, Rating, Progress |\n| Actions | Button, Icon Button, Button Trailing Icon |\n| Media | Avatar, Avatar Group, Icon, Media Item |\n| Forms | Input, Input Group, Textarea, Checkbox, Select, Label |\n| Overlays / Interaction | Accordion, Dialog, Marquee |\n| Recipes | Podcast Card, Travel Card, Job Card |\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/assets/showcase-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://github.com/khangtrannn). MIT licensed. Source code is available on GitHub.\n\n## Status\n\n`@ng-brutalism/ui` 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhangtrannn%2Fng-brutalism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhangtrannn%2Fng-brutalism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhangtrannn%2Fng-brutalism/lists"}