UI component library starter logo

Angular UI component
library starter

Build custom Angular component libraries in no time

Scroll down for more content icon

Who is this product for?

This product is for you and your team if you want to build a high-quality UI component library with an outstanding showcase app in no time. With this starter, you can focus on building your components and avoid losing countless hours on tooling, project setup, and exploring best practices.

UI components library starter logo

Stop losing sleep over setup and tooling.
Elevate your productivity and deliver your first UI component in record time!

What do I get?

You get a full-featured Angular component library starter with a showcase app that you can use to build your component library. The starter includes the following features:

RxJs handles asynchronous logic in Angular application illustration

What's included in the library setup?

  • Full setup to ship your library with subentries for high performance and best possible tree shaking.
  • Complete setup to ship CSS classes, components and helpers.
  • Complete setup to ship SCSS mixins, functions and variables.
  • Ship harness objects for each component as a testing sub-entry.
  • Complete testing setup with Jest.
  • Automated accessibility tests for desktop and mobile.
  • Linting & Formatting: Write the best possible code with Prettier, ESLint and Stylelint.
  • Git: Automated hooks and commit message validation with husky, lint-staged and commitlint.
  • Mobile first styles.
  • Best practices: Proven architecture for Angular libraries & stylesheets.

What's included in the showcase setup?

  • Splash screen to demonstrate the highlights of your library.
  • Quick search on all components.
  • Automated table of content and navigation for all showcase pages.
  • API docs for all components, directives, pipes and harnesses.
  • TypeScript, HTML, SCSS and Test preview for showcase examples.
  • Automated accessibility tests for desktop and mobile.
  • Links from showcase examples to source files in your repository.
  • Cards with links to chats and Scrum boards for easy collaboration.
  • Responsive.
  • Out of the box theming - The starter provides a light and dark mode.
  • Header with important information such as repository and library version.
RxJs handles asynchronous logic in Angular application illustration

What happens after the purchase?

Using the UI Component Library Starter is a breeze. With the help of our customization script you can start building your library right away.

Customization wizard

Our customization wizard will help you to get started with your library in no time.

RxJs handles asynchronous logic in Angular application illustration
  • Automatically adjust showcase, folders and configurations to fit your company name.
  • Automatically adjust components prefixes to match your company abbreviation.
  • Integrate links to your repository, chat and Scrum board.
  • Theming. Our wizard adjust the showcase to match your company's brand colors.

Up to date with the latest technology

The starter is on the latest Angular version

The starter is built with Angular 15

Feature complete showcase

Our component starter provides splash screen, code preview, API display and much more. Click here to see it in action.

Showcase previewShowcase previewShowcase preview

Pricing & options

Choose the pricing plan that fits your needs

ui-components-library-starter icon

UI Component Library Starter

Background waves
Price background
$ 239.20 + applicable VAT
  • Complete library setup with all the mentioned features
  • Complete showcase setup with all the mentioned features
  • Getting started and how to develop guides
  • Setup call and walkthrough
Buy now
$299.00
$239.20
-20%
By buying you agree to our terms of service
ui-components-library-starter icon

UI Component Library Starter
+ Setup call

Background waves
Price background
$1990.00 + applicable VAT
  • Complete library setup with all the mentioned features
  • Complete showcase setup with all the mentioned features
  • Getting started and how to develop guides
  • Setup call and walkthrough (max 8 hours)
Get in touch and schedule a call

FAQ

How can I get support?

We believe that our starter is easy to use and understand. However, if you have any questions, you can always reach out to us by using our contact form.

How do I develop new components with the starter?

There are a bunch of best practices when developing UI components. But don't worry, the starter contains a CONTRIBUTION.md file that explains the best practices and the conventions used in the starter.

You might also like

Explore more of our outstanding products

Angular Signals Ebook

Angular Signals Ebook

Learn everything about the future of Angular with Angular Signals. In this comprehensive ebook, you will not only master the API and advanced concepts but also gain valuable insights into how this cutting-edge technology works behind the scenes. Elevate your development skills today and be at the forefront of real-time communication with Angular Signals!

Angular Enterprise Architecture Ebook

Angular Enterprise Architecture Ebook

Learn how to architect a new or existing enterprise grade Angular application with tooling based automated architecture validation.

This will ensure that Your project stays maintainable, extendable and therefore with high delivery velocity over the whole project lifetime!

Skol

Skol

Skol is the missing IDE scheme for all JetBrains products. It brings that Northern lights feeling straight to your IDE.

Omniboard - Enterprise Polyrepo Tooling

Omniboard - Enterprise Polyrepo Tooling

Omniboard is enterprise polyrepo management tool that helps you understand and evolve your codebases

Angularic Oh My Posh Theme

Angularic Oh My Posh Theme

Angularic is a theme for Oh My Posh, a cross-shell prompt theming engine. It brings lots of infos relevant to Angular development packaged in a sleek and modern design.

ng-parsel

ng-parsel

Parse your Angular code base to JSON - Great for displaying APIs and running custom analysis.

Angular library starter

Angular library starter

About Starter project to build epic Angular libraries with fully automated release setup, testing, linting, contribution guidelines, prettier, husky and more

Code tailor

Code tailor

Code tailor is a tool to create code snippets with syntax highlighting and export them as images.

Get in touch

Do you want to know more about our starter? Or do you need support with frontend development? We are happy to help you!

To learn more about our services please visit our service page or use the form below to reach out to us directly.

or