Help: Developing a UI Components & Styles Library with Ember V2 Addons

Questions
1

Hi everyone,

I’m looking for some help to develop a v2 addon that will serve as a UI components library (buttons, forms, modals, cards, badges, etc.) to be used across multiple apps I’m developing.

  • Where can I find documentation on how to create a version 2 addon from scratch?
  • How can I implement a color scheme (nothing complex, just 2-3 main colors) that can be redefined in each app that uses the addon? (I would prefer to use Tailwind if possible)

Thanks in advance for your help!

2

Hello!!

UI Components / Styles Library with V2 Addons

This is why I made this org: universal-ember · GitHub

There is a lot of common behaviors between all our components when we make new design systems (or implementing an existing design system that maybe already has CSS).

Libraries that may be of use to you along your journey:

Docs tools:

Where can I find documentation on how to create a version 2 addon from scratch?

Your best starting point is here, the v2 addon blueprint:

From there, you’ll find links to more documentation than exists for v1 addons:

How can I implement a color scheme (nothing complex, just 2-3 main colors) that can be redefined in each app that uses the addon? (I would prefer to use Tailwind if possible)

For this, I would use css variables everywhere, and then define the values in your app’s index.html (or somewhere else central)

Example:

// in your app
:root {
  --primary: #9900bb;
  --secondary: #eeeeee;
}

// in your library
button.primary {
  background: var(--primary);
}

Hope this helps! And don’t hesitate to ask more questions :tada:

3 Likes