Developer Quickstart
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 and Core helpers. |
@sky-uk/ui-sections | Ready-made page sections composed from Core components. | Build common layouts such as Hero, FAQs, and Legal with Sections. |
@sky-uk/skycons | Sky icons as importable SVG fragments. | Use icons in your application. Start with the Skycons quickstart and 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. |
@sky-uk/ui-assets | Shared brand asset components, including OrganicSpectrum. | Add brand assets to your UI. See the assets package. |
@sky-uk/ui-codemods | Automated source-code migrations for supported package upgrades. | Install as a development dependency when upgrading. See the codemods guide 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:
pnpm add @sky-uk/skycons
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 when using Sky UI's React UI. For Next.js App Router projects, check the React Server Components guide.
- Icons: Follow the Skycons quickstart and choose icons from the icon browser.
- Design tokens: Choose the JavaScript, CSS, SCSS, or native output appropriate to your project. The token package guide covers imports and formats; Foundations explains the design values.
- Brand assets: Use the available exports and examples in the assets package.
Build with Sky UI
Follow 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 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, Sections release notes, and GitHub releases for other package releases.
For supported upgrades, @sky-uk/ui-codemods can automate source-code changes. Follow the
codemods guide, 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.