{"id":21313694,"url":"https://github.com/Skyscanner/backpack","last_synced_at":"2025-07-12T00:33:31.218Z","repository":{"id":37431359,"uuid":"85820377","full_name":"Skyscanner/backpack","owner":"Skyscanner","description":"Backpack Design System for the Web","archived":false,"fork":false,"pushed_at":"2024-11-21T15:59:23.000Z","size":231478,"stargazers_count":501,"open_issues_count":13,"forks_count":185,"subscribers_count":43,"default_branch":"main","last_synced_at":"2024-11-21T16:37:31.022Z","etag":null,"topics":["backpack","component-library","design-system","nodejs","react","skyscanner"],"latest_commit_sha":null,"homepage":"https://skyscanner.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Skyscanner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-22T11:34:41.000Z","updated_at":"2024-11-21T01:55:04.000Z","dependencies_parsed_at":"2023-12-11T11:44:39.773Z","dependency_job_id":"c2c3ff47-f44c-44b4-a161-f3e5c351aa2f","html_url":"https://github.com/Skyscanner/backpack","commit_stats":{"total_commits":6381,"total_committers":215,"mean_commits":29.67906976744186,"dds":0.8624040119103589,"last_synced_commit":"696a3bb606cd62483bd346d68bd7024240af4c06"},"previous_names":[],"tags_count":30966,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2Fbackpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2Fbackpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2Fbackpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Skyscanner%2Fbackpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Skyscanner","download_url":"https://codeload.github.com/Skyscanner/backpack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225769795,"owners_count":17521339,"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":["backpack","component-library","design-system","nodejs","react","skyscanner"],"created_at":"2024-11-21T18:02:10.117Z","updated_at":"2025-07-12T00:33:31.202Z","avatar_url":"https://github.com/Skyscanner.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Backpack Design System\n\n\u003e Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.\n\n[![npm version](https://badge.fury.io/js/@skyscanner%2Fbackpack-web.svg)](https://badge.fury.io/js/@skyscanner%2Fbackpack-web)\n[![Build Status](https://github.com/Skyscanner/backpack/workflows/Backpack%20CI/badge.svg)](https://github.com/Skyscanner/backpack/actions)\n\n## Quick links\n\n- [Documentation](https://www.skyscanner.design/)\n- [Changelog](https://github.com/Skyscanner/backpack/releases)\n\n## Usage\n\n### Installation\n\n```sh\nnpm install --save @skyscanner/backpack-web\n```\n\n## Contributing\n\nTo contribute please see [contributing.md](CONTRIBUTING.md).\n\n## List of packages\n\n[`bpk-animate-height`](/packages/bpk-animate-height)\n[`bpk-component-accordion`](/packages/bpk-component-accordion)\n[`bpk-component-autosuggest`](/packages/bpk-component-autosuggest)\n[`bpk-component-badge`](/packages/bpk-component-badge)\n[`bpk-component-banner-alert`](/packages/bpk-component-banner-alert)\n[`bpk-component-barchart`](/packages/bpk-component-barchart)\n[`bpk-component-blockquote`](/packages/bpk-component-blockquote)\n[`bpk-component-bottom-sheet`](/packages/bpk-component-bottom-sheet)\n[`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb)\n[`bpk-component-breakpoint`](/packages/bpk-component-breakpoint)\n[`bpk-component-button`](/packages/bpk-component-button)\n[`bpk-component-calendar`](/packages/bpk-component-calendar)\n[`bpk-component-card`](/packages/bpk-component-card)\n[`bpk-component-checkbox`](/packages/bpk-component-checkbox)\n[`bpk-component-chip`](/packages/bpk-component-chip)\n[`bpk-component-chip-group`](/packages/bpk-component-chip-group)\n[`bpk-component-close-button`](/packages/bpk-component-close-button)\n[`bpk-component-code`](/packages/bpk-component-code)\n[`bpk-component-datatable`](/packages/bpk-component-datatable)\n[`bpk-component-datepicker`](/packages/bpk-component-datepicker)\n[`bpk-component-description-list`](/packages/bpk-component-description-list)\n[`bpk-component-dialog`](/packages/bpk-component-dialog)\n[`bpk-component-drawer`](/packages/bpk-component-drawer)\n[`bpk-component-fieldset`](/packages/bpk-component-fieldset)\n[`bpk-component-form-validation`](/packages/bpk-component-form-validation)\n[`bpk-component-graphic-promotion`](/packages/bpk-component-graphic-promotion)\n[`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle)\n[`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav)\n[`bpk-component-icon`](/packages/bpk-component-icon)\n[`bpk-component-image`](/packages/bpk-component-image)\n[`bpk-component-infinite-scroll`](/packages/bpk-component-infinite-scroll)\n[`bpk-component-input`](/packages/bpk-component-input)\n[`bpk-component-label`](/packages/bpk-component-label)\n[`bpk-component-link`](/packages/bpk-component-link)\n[`bpk-component-list`](/packages/bpk-component-list)\n[`bpk-component-loading-button`](/packages/bpk-component-loading-button)\n[`bpk-component-mobile-scroll-container`](/packages/bpk-component-mobile-scroll-container)\n[`bpk-component-modal`](/packages/bpk-component-modal)\n[`bpk-component-navigation-bar`](/packages/bpk-component-navigation-bar)\n[`bpk-component-navigation-tab-group`](packages/bpk-component-navigation-tab-group)\n[`bpk-component-nudger`](/packages/bpk-component-nudger)\n[`bpk-component-page-indicator`](/packages/bpk-component-page-indicator)\n[`bpk-component-pagination`](/packages/bpk-component-pagination)\n[`bpk-component-panel`](/packages/bpk-component-panel)\n[`bpk-component-phone-input`](/packages/bpk-component-phone-input)\n[`bpk-component-popover`](/packages/bpk-component-popover)\n[`bpk-component-price-range`](/packages/bpk-component-price-range)\n[`bpk-component-progress`](/packages/bpk-component-progress)\n[`bpk-component-radio`](/packages/bpk-component-radio)\n[`bpk-component-rtl-toggle`](/packages/bpk-component-rtl-toggle)\n[`bpk-component-card-button`](/packages/bpk-component-card-button)\n[`bpk-component-section-header`](/packages/bpk-component-section-header)\n[`bpk-component-section-list`](/packages/bpk-component-section-list)\n[`bpk-component-select`](/packages/bpk-component-select)\n[`bpk-component-skeleton`](/packages/bpk-component-skeleton)\n[`bpk-component-slider`](/packages/bpk-component-slider)\n[`bpk-component-spinner`](/packages/bpk-component-spinner)\n[`bpk-component-star-rating`](/packages/bpk-component-star-rating)\n[`bpk-component-switch`](/packages/bpk-component-switch)\n[`bpk-component-table`](/packages/bpk-component-table)\n[`bpk-component-text`](/packages/bpk-component-text)\n[`bpk-component-textarea`](/packages/bpk-component-textarea)\n[`bpk-theming`](/packages/bpk-theming)\n[`bpk-component-ticket`](/packages/bpk-component-ticket)\n[`bpk-component-tooltip`](/packages/bpk-component-tooltip)\n[`bpk-react-utils`](/packages/bpk-react-utils)\n[`bpk-mixins`](/packages/bpk-mixins)\n[`bpk-stylesheets`](/packages/bpk-stylesheets)\n\n## List of external packages\n\nThese components are part of Backpack and are utilised by the components but live in the Foundations repository.\n\nThese are installed separately and installation information can be found in the [`Backpack Foundations repo`](https://github.com/Skyscanner/backpack-foundations)\n\n| Component                                                                                                                      | Version                                                                                                                                          |\n| ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| [`@skyscanner/bpk-svgs`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-svgs)                       | [![npm version](https://badge.fury.io/js/%40skyscanner%2Fbpk-svgs.svg)](https://badge.fury.io/js/%40skyscanner%2Fbpk-svgs)                       |\n| [`@skyscanner/bpk-foundations-web`](https://github.com/Skyscanner/backpack-foundations/tree/main/packages/bpk-foundations-web) | [![npm version](https://badge.fury.io/js/%40skyscanner%2Fbpk-foundations-web.svg)](https://badge.fury.io/js/%40skyscanner%2Fbpk-foundations-web) |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSkyscanner%2Fbackpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSkyscanner%2Fbackpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSkyscanner%2Fbackpack/lists"}