---
title: "Developer Quickstart"
canonical: https://sky-ui.cf.sky.com/intro-to-sky-ui/developer-quickstart
---

# Developer Quickstart

Choose Sky UI packages, configure registry access, and find the guidance for your project.

## Introduction

Sky UI provides components, page sections, icons, design tokens, and brand assets for building
consistent, accessible experiences. Choose the resources that fit your project and platform.

## Packages

The packages serve different needs. Choose the resources and development tools your project needs,
and check their dependency and platform requirements.

| Package | What it provides | When to use it |
| --- | --- | --- |
| `@sky-uk/ui-core` | React components, foundation helpers, system modifiers, and hooks. | Build application UI with [components](/components/) and [Core helpers](/core/). |
| `@sky-uk/ui-sections` | Ready-made page sections composed from Core components. | Build common layouts such as Hero, FAQs, and Legal with [Sections](/sections/). |
| `@sky-uk/skycons` | Sky icons as importable SVG fragments. | Use icons in your application. Start with the [Skycons quickstart](/skycons/developer-quickstart/) and [icon browser](/skycons/icon-browser/). |
| `@sky-uk/ui-tokens` | Design tokens for colours, spacing, typography, and other foundations in JavaScript, CSS, SCSS, and native formats. | Use shared design values in web or native projects. See the [token package guide](https://github.com/sky-uk/sky-ui/tree/main/packages/tokens). |
| `@sky-uk/ui-assets` | Shared brand asset components, including OrganicSpectrum. | Add brand assets to your UI. See the [assets package](https://github.com/sky-uk/sky-ui/tree/main/packages/assets). |
| `@sky-uk/ui-codemods` | Automated source-code migrations for supported package upgrades. | Install as a development dependency when upgrading. See the [codemods guide](/guides/codemods/) for supported migrations and usage. |

## Installation

Sky UI packages are published to Sky's Artifactory registry. Configure the `@sky-uk` scope to use
Artifactory and authenticate with an Artifactory token before installing packages.

If your repo is not already migrated to Artifactory from npm, consult a Tech Lead or drop a message
in the #sky-ui-development
Slack channel.

Use your project's package manager to install the package you need. For example, to install Skycons:

```shell
pnpm add @sky-uk/skycons
```

```shell
yarn add @sky-uk/skycons
```

Check the chosen package's guide for required peer dependencies and any build-time setup. Keep
package versions compatible with the dependencies already in your project.

## Set up your chosen resources

Follow the guidance for the resources you are using:

- **Components and Sections:** Use their React API pages for imports, composition, supported props,
  and examples. Include [GlobalReset](/components/global-reset/) when using Sky UI's React UI.
  For Next.js App Router projects, check the
  [React Server Components guide](/guides/react-server-components/).
- **Icons:** Follow the [Skycons quickstart](/skycons/developer-quickstart/) and choose icons from the
  [icon browser](/skycons/icon-browser/).
- **Design tokens:** Choose the JavaScript, CSS, SCSS, or native output appropriate to your project.
  The [token package guide](https://github.com/sky-uk/sky-ui/tree/main/packages/tokens) covers imports
  and formats; [Foundations](/foundations/) explains the design values.
- **Brand assets:** Use the available exports and examples in the
  [assets package](https://github.com/sky-uk/sky-ui/tree/main/packages/assets).

## Build with Sky UI

Follow [Building with Sky UI](/intro-to-sky-ui/building-with-sky-ui/) for practical examples and
editable previews covering component usage, styling, responsive modifiers, and composition.

## AI skills

Sky UI provides AI skills that give your coding assistant guidance for working with our packages.
The available skills support:

- **Development:** Practical guidance, code examples, and troubleshooting based on Sky UI Docs.
- **Code review:** Check component usage, styling, accessibility, and version compatibility.
- **Adoption audits:** Understand which Sky UI packages your project uses and identify opportunities
  to adopt or update them.
- **Migration:** Plan and implement package upgrades using release notes and codemods.

See the [skills README](https://github.com/sky-uk/sky-ui/blob/main/skills/README.md) for installation
instructions and examples of how to use them.

## Keep packages up to date

Read the release notes before changing package versions, including dependency requirements and
manual migration steps. See the [Core release notes](/components/release-notes/),
[Sections release notes](/sections/release-notes/), and
[GitHub releases](https://github.com/sky-uk/sky-ui/releases) for other package releases.

For supported upgrades, `@sky-uk/ui-codemods` can automate source-code changes. Follow the
[codemods guide](/guides/codemods/), review the resulting changes, and validate your
application after each upgrade.

## Get support

For setup questions or help using Sky UI, ask in
#sky-ui-development.
Include the packages and versions involved, your framework or platform, and a small example or
error message so the team can help.