# Backpack Design System

> [!WARNING]
> This repository has been archived and is no longer maintained.
>
> The final public release is [`@skyscanner/backpack-web@43.16.0`](https://www.npmjs.com/package/@skyscanner/backpack-web/v/43.16.0). No further public releases will be published.
>
> Internal Skyscanner users should continue contributing in the `design-system` repository.

> Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.

[![npm version](https://badge.fury.io/js/@skyscanner%2Fbackpack-web.svg)](https://badge.fury.io/js/@skyscanner%2Fbackpack-web)
[![Build Status](https://github.com/Skyscanner/backpack/workflows/Backpack%20CI/badge.svg)](https://github.com/Skyscanner/backpack/actions)

## Quick links

- [Documentation](https://www.skyscanner.design/)
- [Changelog](https://github.com/Skyscanner/backpack/releases)

## Usage

### Installation

```sh
npm install --save @skyscanner/backpack-web
```

## Contributing

To contribute please see [contributing.md](CONTRIBUTING.md).

## List of packages

[`bpk-animate-height`](/packages/bpk-animate-height)
[`bpk-component-accordion`](/packages/backpack-web/src/bpk-component-accordion)
[`bpk-component-autosuggest`](/packages/backpack-web/src/bpk-component-autosuggest)
[`bpk-component-badge`](/packages/backpack-web/src/bpk-component-badge)
[`bpk-component-banner-alert`](/packages/backpack-web/src/bpk-component-banner-alert)
[`bpk-component-barchart`](/packages/backpack-web/src/bpk-component-barchart)
[`bpk-component-blockquote`](/packages/backpack-web/src/bpk-component-blockquote)
[`bpk-component-bottom-sheet`](/packages/backpack-web/src/bpk-component-bottom-sheet)
[`bpk-component-breadcrumb`](/packages/backpack-web/src/bpk-component-breadcrumb)
[`bpk-component-breakpoint`](/packages/backpack-web/src/bpk-component-breakpoint)
[`bpk-component-button`](/packages/backpack-web/src/bpk-component-button)
[`bpk-component-calendar`](/packages/backpack-web/src/bpk-component-calendar)
[`bpk-component-card`](/packages/backpack-web/src/bpk-component-card)
[`bpk-component-checkbox`](/packages/backpack-web/src/bpk-component-checkbox)
[`bpk-component-chip`](/packages/backpack-web/src/bpk-component-chip)
[`bpk-component-chip-group`](/packages/backpack-web/src/bpk-component-chip-group)
[`bpk-component-close-button`](/packages/backpack-web/src/bpk-component-close-button)
[`bpk-component-code`](/packages/backpack-web/src/bpk-component-code)
[`bpk-component-datatable`](/packages/backpack-web/src/bpk-component-datatable)
[`bpk-component-datepicker`](/packages/backpack-web/src/bpk-component-datepicker)
[`bpk-component-description-list`](/packages/backpack-web/src/bpk-component-description-list)
[`bpk-component-dialog`](/packages/backpack-web/src/bpk-component-dialog)
[`bpk-component-divider`](/packages/backpack-web/src/bpk-component-divider)
[`bpk-component-drawer`](/packages/backpack-web/src/bpk-component-drawer)
[`bpk-component-fieldset`](/packages/backpack-web/src/bpk-component-fieldset)
[`bpk-component-form-validation`](/packages/backpack-web/src/bpk-component-form-validation)
[`bpk-component-graphic-promotion`](/packages/backpack-web/src/bpk-component-graphic-promotion)
[`bpk-component-grid-toggle`](/packages/backpack-web/src/bpk-component-grid-toggle)
[`bpk-component-horizontal-nav`](/packages/backpack-web/src/bpk-component-horizontal-nav)
[`bpk-component-icon`](/packages/backpack-web/src/bpk-component-icon)
[`bpk-component-image`](/packages/backpack-web/src/bpk-component-image)
[`bpk-component-infinite-scroll`](/packages/backpack-web/src/bpk-component-infinite-scroll)
[`bpk-component-input`](/packages/backpack-web/src/bpk-component-input)
[`bpk-component-label`](/packages/backpack-web/src/bpk-component-label)
[`bpk-component-link`](/packages/backpack-web/src/bpk-component-link)
[`bpk-component-list`](/packages/backpack-web/src/bpk-component-list)
[`bpk-component-loading-button`](/packages/backpack-web/src/bpk-component-loading-button)
[`bpk-component-mobile-scroll-container`](/packages/backpack-web/src/bpk-component-mobile-scroll-container)
[`bpk-component-modal`](/packages/backpack-web/src/bpk-component-modal)
[`bpk-component-navigation-bar`](/packages/backpack-web/src/bpk-component-navigation-bar)
[`bpk-component-navigation-tab-group`](packages/backpack-web/src/bpk-component-navigation-tab-group)
[`bpk-component-nudger`](/packages/backpack-web/src/bpk-component-nudger)
[`bpk-component-page-indicator`](/packages/backpack-web/src/bpk-component-page-indicator)
[`bpk-component-pagination`](/packages/backpack-web/src/bpk-component-pagination)
[`bpk-component-panel`](/packages/backpack-web/src/bpk-component-panel)
[`bpk-component-phone-input`](/packages/backpack-web/src/bpk-component-phone-input)
[`bpk-component-popover`](/packages/backpack-web/src/bpk-component-popover)
[`bpk-component-price-range`](/packages/backpack-web/src/bpk-component-price-range)
[`bpk-component-progress`](/packages/backpack-web/src/bpk-component-progress)
[`bpk-component-radio`](/packages/backpack-web/src/bpk-component-radio)
[`bpk-component-rtl-toggle`](/packages/backpack-web/src/bpk-component-rtl-toggle)
[`bpk-component-card-button`](/packages/backpack-web/src/bpk-component-card-button)
[`bpk-component-section-header`](/packages/backpack-web/src/bpk-component-section-header)
[`bpk-component-section-list`](/packages/backpack-web/src/bpk-component-section-list)
[`bpk-component-select`](/packages/backpack-web/src/bpk-component-select)
[`bpk-component-skeleton`](/packages/backpack-web/src/bpk-component-skeleton)
[`bpk-component-slider`](/packages/backpack-web/src/bpk-component-slider)
[`bpk-component-spinner`](/packages/backpack-web/src/bpk-component-spinner)
[`bpk-component-star-rating`](/packages/backpack-web/src/bpk-component-star-rating)
[`bpk-component-switch`](/packages/backpack-web/src/bpk-component-switch)
[`bpk-component-table`](/packages/backpack-web/src/bpk-component-table)
[`bpk-component-text`](/packages/backpack-web/src/bpk-component-text)
[`bpk-component-textarea`](/packages/backpack-web/src/bpk-component-textarea)
[`bpk-theming`](/packages/bpk-theming)
[`bpk-component-ticket`](/packages/backpack-web/src/bpk-component-ticket)
[`bpk-component-tooltip`](/packages/backpack-web/src/bpk-component-tooltip)
[`bpk-react-utils`](/packages/bpk-react-utils)
[`bpk-mixins`](/packages/bpk-mixins)
[`bpk-stylesheets`](/packages/bpk-stylesheets)

## List of external packages

These components are part of Backpack and are utilised by the components but live in the Foundations repository.

These are installed separately and installation information can be found in the [`Backpack Foundations repo`](https://github.com/Skyscanner/backpack-foundations)

| Component                                                                                                                      | Version                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| [`@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)                       |
| [`@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) |