View Demo · Report Bug · Request Feature
raaghu-ng-elements is an opensource micro front end framework built on top of Bootstrap 5 and Storybook offering highly customizable and reusable Angular UI elements.
Raaghu elements can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability.
Here is a quick demo of the elements. We hope you enjoy it.
Liked it? Please give us a ⭐️ to show your appreciation
Many Thanks to all the supporters who have helped this project with stars(⭐)
- Promotes rusability throughout the UI and pages
- Reduces code duplication and helps in delivering a more consistent and even UI
- Each element is a separate micro front end on its own
- Elements can be worked on in isolation
- The theming engine provides a way to set custom theme for all the elements
- Control the theme of your project with only a few css variables
- All of the elements are built for a wide variety of screen sizes
You can run raaghu-ng-elements locally with a few easy steps.
- Clone the repository
git clone https://github.com/Wai-Technologies/raaghu-ng-elements.git- Change the working directory
cd raaghu-ng-elements- Install dependencies
npm install- Set localDev environment variable in
envronment.prod.tsfor a particular element
export const environment = {
production: true,
localDev: false
// serve as micro frontend on
// localhost:3000/rds-<element name>/main.js
};- Build and serve
# Build all projects and run server
npm run bootstrap
# Build a single project and start server
npm run bootstrap -- --project=rds-<element name>
# For rds-input
# npm run bootstrap -- --project=rds-input
# Start server without building project
npm run bootstrap -- --build=false- Storybook
# View all elements inside storybook
npm run storybook All set !! Now open localhost:3000/rds-<element name> to see the element locally or localhost:3000/rds-<element name>/main.js to serve it as a micro front end.
- Bootstrap 5: Sleek, intuitive, and powerful framework for faster and easier web development.
- Storybook: Build bulletproof UI components faster
- Angular Elements: Build bulletproof UI components faster
This project is licensed under the MIT License - see the LICENSE file for details.
raaghu-ng-elements has all the potentials to grow further. Here are some of the upcoming features,
- ✔️ Custom plugin to reveal the reusability within your angular project
- ✔️ Ability to convert existing elements in a project into micro front end enabled elements
- ✔️ Import custom elements into the library
- ✔️ Better Performance
- ✔️ Converiting plain angular components to custom elements
If you find something is missing, we are listening. Please create a feature request from here.
Any kind of positive contribution is welcome! Please help us to grow by contributing to the project.
If you wish to contribute, you can work on any features listed here or create one on your own. After adding your code, please send us a Pull Request.
We all need support and motivation. Raaghu is not an exception. Please give this project a ⭐️ to encourage and show that you liked it. Don't forget to leave a star ⭐️ before you move away.
If you found the app helpful, consider supporting us with a coffee.
Thanks goes to these wonderful people
 Apoorva Lele |
 Omkar Choudhari |
 Alok Nakhate |
This project follows the all-contributors specification. Contributions of any kind welcome!