Kirby Extensions Angular

The Kirby Extensions library is a collection of design guidelines and components that build on top of the core Kirby Design library. The components follow the Kirby Design guidelines, but they differ from the core components by being built by the community, often with specific product-needs or requirements in mind. This means that components in this library might not be universally useful to everyone, though some components can also become core-candidates and graduate once they are battle-tested and initial experimentation is over.

Extensions allow for quicker iteration and less focus on generalising behavior, while the test and especially documentation burden is also significantly lower.

Components in this library are developed and maintained by the community, with support from Team Kirby.

Using Kirby Extensions

[!IMPORTANT]
Kirby Extensions uses designsystem components from the @kirbydesign/designsystem package. See guidelines for installing @kirbydesign/designsystem before continuing below.

1. install the package through npm: npm i @kirbydesign/extensions-angular
2. import components directly from their specific entry points, and import them into your Angular module or standalone component:

import { ImageBannerComponent } from '@kirbydesign/extensions-angular/image-banner';

@Component({
  selector: 'my-component'
  standalone: true
  imports: [ImageBannerComponent],
})
export class MyComponent {}

// OR

@NgModule({
  imports: [ImageBannerComponent],
})
export class MyModule {}

Contributing

A comprehensive description of contributing fixes, features or components can be found in the Extensions Contribution Guidelines.

Quickstart

1. clone the kirbydesign/designsystem repo locally
2. run npm i to install dependencies
3. run npx nx dev extensions-angular to launch Storybook and build the local component libraries in watch-mode, so any changes you make will be reflected in Storybook
   1. if you are contributing to the documentation and do not need to modify any libraries, you can run Storybook directly with npx nx storybook extensions-angular
4. if you are contributing a feature or a bug fix, add it and follow the guidelines for updating docs and testing components
5. if you are contributing a component, follow the steps for creating a new component