{"id":13808848,"url":"https://github.com/kirbydesign/designsystem","last_synced_at":"2026-03-05T21:22:18.505Z","repository":{"id":37385022,"uuid":"147814567","full_name":"kirbydesign/designsystem","owner":"kirbydesign","description":"Kirby Design System","archived":false,"fork":false,"pushed_at":"2025-05-13T14:41:44.000Z","size":709482,"stargazers_count":88,"open_issues_count":242,"forks_count":24,"subscribers_count":20,"default_branch":"develop","last_synced_at":"2025-05-13T15:53:00.329Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cookbook.kirby.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kirbydesign.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-09-07T11:29:26.000Z","updated_at":"2025-05-13T14:37:11.000Z","dependencies_parsed_at":"2023-12-27T12:29:37.391Z","dependency_job_id":"8f8335d1-030a-4fbb-baf6-7b06921e28ee","html_url":"https://github.com/kirbydesign/designsystem","commit_stats":{"total_commits":3219,"total_committers":100,"mean_commits":32.19,"dds":0.8238583410997204,"last_synced_commit":"e65d5def92599ea4345efa4d49c4b0a01d4706c1"},"previous_names":[],"tags_count":813,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirbydesign%2Fdesignsystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirbydesign%2Fdesignsystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirbydesign%2Fdesignsystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kirbydesign%2Fdesignsystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kirbydesign","download_url":"https://codeload.github.com/kirbydesign/designsystem/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253991168,"owners_count":21995889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:53.338Z","updated_at":"2026-01-08T15:19:10.617Z","avatar_url":"https://github.com/kirbydesign.png","language":"TypeScript","readme":"## Kirby Design System\n\n\u003c!-- Badges section here. --\u003e\n\u003c!-- [![npm](https://img.shields.io/npm/v/@kirbydesign/designsystem/next.svg)][npm-badge-url] --\u003e\n\n[![npm](https://img.shields.io/npm/v/@kirbydesign/designsystem.svg)](https://www.npmjs.com/package/@kirbydesign/designsystem)\n[![npm](https://img.shields.io/npm/l/@kirbydesign/designsystem.svg)](https://www.npmjs.com/package/@kirbydesign/designsystem)\n[![npm](https://img.shields.io/npm/dm/@kirbydesign/designsystem.svg)](https://www.npmjs.com/package/@kirbydesign/designsystem)\n\n[![GitHub forks](https://img.shields.io/github/forks/kirbydesign/designsystem.svg?style=social\u0026label=Fork)](https://github.com/kirbydesign/designsystem/fork)\n[![GitHub stars](https://img.shields.io/github/stars/kirbydesign/designsystem.svg?style=social\u0026label=Star)](https://github.com/kirbydesign/designsystem/stargazers)\n\n## About\n\nKirby Design System is a UX Component library implementing the [Kirby Design Philosophy][kirby.design].\n\nKirby Components are built on top of [Angular][angular] and can be used in Angular projects.\n\nThe Kirby Cookbook, containing samples, status of components etc. can be accessed from [https://cookbook.kirby.design][kirby.cookbook].\n\n## Table of Contents\n\n- [Kirby Design System](#kirby-design-system)\n- [About](#about)\n- [Table of Contents](#table-of-contents)\n- [Installation](#installation)\n  - [Include KirbyModule](#include-kirbymodule)\n  - [Sass](#sass)\n    - [Generic Print Styles (Optional)](#generic-print-styles-optional)\n  - [Testing](#testing)\n  - [Icons](#icons)\n  - [Migration Guides](#migration-guides)\n- [Folder Structure](#folder-structure)\n- [Scripts](#scripts)\n- [Contributing](#contributing)\n\n## Installation\n\nInstall through npm:\n\n```bash\nnpm i @kirbydesign/designsystem\n```\n\n### Include KirbyModule\n\n#### NgModule based application\n\nImport the `KirbyModule` in your `AppModule` :\n\n```ts\nimport { KirbyModule } from '@kirbydesign/designsystem';\n\n...\n\n@NgModule({\n    imports: [\n        ...,\n        KirbyModule\n    ],\n    ...\n})\nexport class AppModule {}\n```\n\n#### Standalone application\n\nSet up environment providers for Kirby with the `provideKirby()` function:\n\n```ts\nimport { provideKirby } from '@kirbydesign/designsystem';\n\n...\n\nawait bootstrapApplication(RootComponent, {\n  providers: [\n    ...,\n    provideKirby() // optionally takes config object, e.g. { focusManager: true, setHtmlDocTitle: true }\n  ]\n});\n```\n\n### Sass\n\nInclude the Kirby global styles in your app, e.g., in `src/styles.scss`:\n\n```css\n@use '@kirbydesign/designsystem/scss/global-styles';\n```\n\nIn each `.scss` file where you need to access the Sass utility functions from Kirby (e.g. [colors][kirby.cookbook.colors] or [fonts][kirby.cookbook.fonts]) you must import the scss utilities:\n\n```css\n@use '@kirbydesign/designsystem/scss/utils';\n```\n\n#### Generic Print Styles (Optional)\n\nKirby also provides a generic print stylesheet. It includes the basics. You most likely have to add local print styles specific to your app as well.\n\nImport it into your app, e.g., in `src/styles.scss` or in your local print stylesheet if you have one:\n\n```css\n@use '@kirbydesign/designsystem/scss/print';\n```\n\n### Testing\n\nTo unit-test applications using Kirby's Components, we recommend importing one of the following modules:\n\n- When using [jasmine][jasmine]: `import { KirbyTestingModule } from '@kirbydesign/designsystem/`**`testing-jasmine'`**`;`\n- When using [jest][jest]: `import { KirbyTestingModule } from '@kirbydesign/designsystem/`**`testing-jest'`**`;`\n\nExample:\n\n```ts\nimport { KirbyTestingModule } from '@kirbydesign/designsystem/testing-jasmine';\n\ndescribe('AppComponent', () =\u003e {\n  beforeEach(async(() =\u003e {\n    TestBed.configureTestingModule({\n      imports: [KirbyTestingModule],\n      declarations: [AppComponent]\n    }).compileComponents();\n  }));\n\n  ...\n\n});\n```\n\nFor unit test performance reasons it's highly recommended to utilize these modules, since they provide a template-less implementation of the Kirby Components, but still translude content through `\u003cng-content\u003e\u003c/ng-content\u003e` and provide `@Input` -decorated properties and `@Output` -decorated `EventEmitter` s, without\nhaving to reflow the DOM, execute component logic etc.\n\n### Icons\n\nKirby comes bundled with a default set of icons. Make sure the `.svg` files used by Kirby are copied to your output folder by adding the following to `build \u003e options \u003e assets` in `angular.json` :\n\n```json\n{\n  ...\n  \"build\": {\n    \"options\": {\n      \"assets\": [\n        ...,\n        {\n          \"glob\": \"**/*.svg\",\n          \"input\": \"node_modules/@kirbydesign/designsystem/icons/svg\",\n          \"output\": \"./assets/kirby/icons/svg\"\n        },\n        {\n          \"glob\": \"close.svg\",\n          \"input\": \"node_modules/@kirbydesign/designsystem/icons/svg\",\n          \"output\": \"./svg\"\n        },\n        ...\n      ],\n    }\n  }\n}\n```\n\nIt is possible to configure the path that the built-in icons are loaded from by providing the `BUILT_IN_ICONS_URL` injection token:\n\n```typescript\n// In app providers:\n{\n  provide: BUILT_IN_ICONS_URL,\n  useValue: 'https://example.org/1.0.1/kirby/icons/svg/'\n}\n```\n\n### Migration Guides\n\nFor details on migrating from earlier versions of Kirby see our [Migration Guides](./MIGRATION.md).\n\n## Folder Structure\n\nThe folder structure of the repository is based on [Nrwl][nrwl]'s [NX][nx] mono-repository project.\n\nA basic walkthrough is outlined in the structure below:\n\n```\n@kirbydesign/designsystem\n├── apps                    # Contains source code for applications\n|  └── cookbook             # - Cookbook application (showcase and examples)\n├── dist                    # Contains output files when building artifacts (for distribution)\n|  ├── apps\n|  └── libs\n├── libs                    # Contains source code for libraries\n|  └── designsystem         # - Actual implementation of library (designsystem)\n├── scripts                 # Scripts for building artifacts\n└── tools                   # Contains various tools\n   ├── generate-mocks       # - CLI utility for generating mocks for `@kirbydesign/designsystem/testing-jasmine`\n   |                        #   and `@kirbydesign/designsystem/testing-jest` entry points.\n   ├── sass-to-ts           # - CLI and Webpack plugin for extract global variables from SASS to TS\n   ├── schematics           # - Angular schematics\n```\n\n## Scripts\n\nBelow is an overview of most widely used scripts, available for this project.  \nUse them in your terminal like: `npm run \u003cscript\u003e` :\n\n| Command       | Description                                                                                                                    |\n| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| start         | Starts the development server, providing a means of running the cookbook while developing                                      |\n| start:ios     | Builds the flows app and deploys it to an iOS device (real or simulated) using Capacitor                                       |\n| start:android | Builds the flows app and deploys it to an Android device (real or simulated) using Capacitor                                   |\n| publish       | When run locally it produces a set of npm packages in `dist/` that can be installed locally with npm install \u003cpath to tarball\u003e |\n| storybook     | Opens up Storybook where component states are set up for snapshot testing with Chromatic                                       |\n\nWe use [nx][nx] to run common tasks like building, linting and testing projects.\nThis is done with `npx nx \u003ctarget name\u003e \u003cproject name\u003e`, e.g. `npx nx lint designsystem` preferrably _from the root of the workspace_ to ensure config paths are resolved correctly.\n\n## Contributing\n\nIf you wish to contribute new features, bug fixes or something third to the project have a look at the [contribution guidelines](./.github/CONTRIBUTING.md).\n\n[angular]: https://angular.io\n[jasmine]: https://jasmine.github.io/\n[jest]: https://jestjs.io/\n[nrwl]: https://nrwl.io/\n[nx]: https://nx.dev/getting-started/intro\n[kirby.design]: https://kirby.design/\n[kirby.cookbook]: https://cookbook.kirby.design\n[kirby.cookbook.fonts]: https://cookbook.kirby.design/home/showcase/fonts\n[kirby.cookbook.colors]: https://cookbook.kirby.design/home/showcase/colors\n[kirby.cookbook.list]: https://cookbook.kirby.design/home/showcase/list\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirbydesign%2Fdesignsystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkirbydesign%2Fdesignsystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkirbydesign%2Fdesignsystem/lists"}