Custom UI components vs Ionic UI components

Hi, This project I’m working on started out as just a “normal” Vue web project, but now I’m also looking to go for Native apps. Didn’t really work out with vue-native, so now looking into Ionic.

For this project i already build quite some custom components or used a plugin (and styled it to my likings). For example i now have a:

  • Modal
  • Toggle
  • Date & Time picker
  • Refresher
  • Skeletons

All of these are also available as Ionic UI components, and now I’m wondering if i should start using these over my own in this project. I’m Building for web (PWA), Android and iOS.

Why I’m not sure if i should the Ionic components:

  • Will overwrite a lot of styles because we have our own custom design.
  • Has to look mostly the same on all platforms
  • How is the responsiveness? For desktop things might look different (for example: the modal component will look quite different on a big screen, and the menu should be on the left side instead of the bottom)

What do you guys think? What are things to think about when making this decision? Are there some “hidden” advantages when i switch to Ionic UI components over my custom components?

One of the big parts of Ionic is that it provides components that look and feel like their native counter parts. So you can use Ionic’s modal component, and it will look like modals on iOS/Android. That being said, you can use our built in theming (CSS Variables mainly) to customize these components to make it fit the theme of the rest of your application. You can also make Ionic components look the same across platforms by setting a global “mode” (Currently 'ios’ or 'md')

Our components are responsive as well. For example, if you have a split view application (menu on the left and main view on the right), the menu will be visible alongside the main view on desktop. On mobile, the menu will collapse and can be swiped to open.

Happy to answer any other questions you have about Ionic!

1 Like