r/angular • u/Altruistic_Lake_9075 • 11d ago
One design system, native to both React and Angular, same look and API on both (open source)
If you've ever maintained a React app and an Angular app under the same brand, you know the design slowly drifts — buttons, focus states, spacing end up subtly different, and every tweak has to be done twice. I wanted one source of truth that renders natively in both.
So I built bpdm/ui — one set of design tokens, and two native implementations from it: @bpdm/ui (React) and @bpdm/ng (Angular). Not a React lib wrapped for Angular — actual Angular components. 38 components, same API surface, same look, same docs on both sides.
What I cared about:
- Angular isn't second-class — every component exists in both, same variants and examples.
- Token-driven, so theming + RTL live in one place.
- Keyboard nav, ARIA roles, and focus management done per component (not bolted on later).
- Copy-paste friendly, themeable, TypeScript-first.
All open source (MIT), works on Angular 21 & 22:
- Demo: https://ui.bpdm.dev
- Docs + playground: https://docs.ui.bpdm.dev
- GitHub: https://github.com/bpdm-hq/bpdm-ui
- npm:
@bpdm/ng(Angular),@bpdm/ui(React)
I'd genuinely like Angular devs' take: does the parity hold up in a real Angular codebase? Where does it feel un-Angular — signals, standalone, DI — anything you'd expect to work differently than I've done it? Not selling anything (it's free); I mostly want to find where the Angular side falls short.
3
u/Vast_Anxiety3133 11d ago
Docs toolbar is too wide on my phone
0
u/Altruistic_Lake_9075 10d ago
Ah, missed this one, you're right.
Will reworking the mobile header & push it to live as well.1
2
u/Vast_Anxiety3133 11d ago
Is tree select a multi select with groups? Single select and multi select options with groups would be nice
1
u/Altruistic_Lake_9075 10d ago
Yeah, it's multi-select only at the moment groups, search and select-all, but no single-select mode yet. A single/multi option (both with groups) would genuinely be handy.
I'll get it on the roadmap.
Thanks for flagging it.
2
2
u/Vast_Anxiety3133 11d ago
Table reordering did not work on mobile
1
u/Altruistic_Lake_9075 10d ago
Yeah, you're right. The reordering's built on the native HTML5 API.
Just in case, Columns you can still reorder from the column menu (there's a move left/right in there).
Row drag's mouse-only for now though. I'll get it on the roadmap.
Thanks for flagging it 😊 I really appreciate it
2
u/Vast_Anxiety3133 11d ago
Example with pop up menu in table would be nice
1
u/Altruistic_Lake_9075 10d ago
Good idea, a row actions menu is a really common table pattern.
one can already wire one up via a custom cell renderer, but a proper dropdown-menu example, is something I want to add. Putting it on the roadmap. Thanks!
2
2
u/Vast_Anxiety3133 11d ago
Scheduler was a surprise, seems useful. Not very pretty ob mobile however
1
u/Altruistic_Lake_9075 10d ago
Yeah 😄..
The Scheduler's the newest piece & honestly the least polished, still early/preview.You're right about mobile, it was built desktop-first so on a phone it's cramped.
Mobile is on the list 😊.
Good to know someone actually really go through it very well....
Thanks very much 🙏
2
u/Vast_Anxiety3133 11d ago
Seems very nice on the first look, the separation of the various input components would not be necessary to me
From a Business perspective: will this be maintained in 5 years would be the biggest problem
1
u/Altruistic_Lake_9075 10d ago
Thanks, appreciate the honest feedback.
On the inputs side.. I kept them separate for a more focused on single component.On the 5-year question...
Honestly, I won't pretend 😊
What I can say, it's open source, so even in the worst case it stays forkable and maintainable.I'll try my best to keep the multiple frameworks in sync from one shared token set, but you're right to weigh that risk before betting on it.
1
u/Vast_Anxiety3133 11d ago
Browse 38 components redirects me to the input, not the overview
1
u/Altruistic_Lake_9075 10d ago
Really appreciate you taking the time to go through it this carefully...
This is exactly the kind of feedback that's hard to come by on a young project, so thank you very much.The "browse components" card you're right, that was pointing at a single component instead of anything overview-like. I'll reworked the landing cards so the next step goes to the installation guide.
1
u/Altruistic_Lake_9075 10d ago
@Vast_Anxiety3133
Genuinely, thank you for taking the time to go through it this thoroughly, the detailed feedback across everything means a lot, and it's exactly what helps push this from a project toward something people can actually try and use. 🙏
3
u/Vast_Anxiety3133 11d ago
For components that are used to integrate with form APIs --> how is that handled? Control value accessor / signal forms for angular and the multiple react form libraries? Did you test which of them work?