Building a Custom UI Component Library with Angular & Storybook

Creating a custom UI component library with Angular and Storybook enhances development efficiency and ensures consistency across applications. A well-structured component library improves maintainability, facilitates reuse, and provides clear documentation for teams.

In this article, we will cover:

• Installing and configuring Storybook for Angular
• Creating reusable UI components
• Documenting components for better team collaboration

By the end of this guide, you will have a well-structured Angular UI component library with Storybook integration.

---

1. Installing and Configuring Storybook for Angular

1.1 Prerequisites

Before proceeding, ensure you have the following installed:

• Node.js (v14 or later)
• Angular CLI (npm install -g @angular/cli)
• Storybook CLI (npx sb init)

1.2 Setting Up an Angular Project

Create a new Angular project if you don’t have one:

ng new my-component-library --style=scss --skip-tests
cd my-component-library

1.3 Installing Storybook

Navigate to the project root and install Storybook:

npx sb init --type angular

This will install necessary dependencies and create a .storybook directory for configuration.

1.4 Running Storybook

Start Storybook with:

npm run storybook

Storybook should now be available at http://localhost:6006.

---

2. Creating Reusable UI Components

2.1 Structuring the Component Library

Organize components inside a dedicated components module:

ng g module components

Create a button component:

ng g component components/button

2.2 Writing the Button Component

Edit button.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button [ngClass]="type">{{ label }}</button>`,
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent {
  @Input() label: string = 'Click Me';
  @Input() type: 'primary' | 'secondary' = 'primary';
}

Edit button.component.scss:

button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  &.primary {
    background-color: blue;
    color: white;
  }
  &.secondary {
    background-color: gray;
    color: black;
  }
}

---

3. Documenting Components for Team Collaboration

3.1 Creating a Storybook Story

Create button.component.stories.ts inside components/button/:

import { Meta, Story } from '@storybook/angular/types-6-0';
import { ButtonComponent } from './button.component';

export default {
  title: 'Components/Button',
  component: ButtonComponent,
} as Meta;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  type: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  type: 'secondary',
};

3.2 Running and Testing in Storybook

Restart Storybook to see the new button component:

npm run storybook

Now, you can view and interact with the button component in Storybook’s UI.

---

Conclusion

We successfully built a custom UI component library in Angular using Storybook by:

• Installing and configuring Storybook for an Angular project
• Creating a reusable button component with input properties
• Documenting components for better team collaboration

This setup provides a scalable approach to UI development, enabling teams to efficiently design, test, and reuse components across multiple projects.