For developers

YDS ships as npm packages for web and React Native, plus static files for native apps. See Overview for the full package list.

Get access to the packages

The packages are published to Yle's GitHub Packages registry, so installing them needs a GitHub account with access to the Yleisradio organisation.

1. Point the @yleisradio scope to GitHub Packages in the project's .npmrc:

   @yleisradio:registry=https://npm.pkg.github.com/

2. Create a personal access token (classic) with the read:packages scope. Fine-grained tokens don't work with the npm registry.

3. Authorise the token for the Yleisradio organisation: in the token list, select Configure SSO and Authorize next to yleisradio. Without this step, installs fail with 401 Unauthorized.

4. Authenticate npm with the token, for example in .npmrc:

   //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

   Keep the token itself out of version control.

5. Give the same access to every environment that installs packages: CI, deployment builds and AI agent sandboxes. In GitHub Actions:

   - uses: actions/setup-node@v4
     with:
       node-version: '22'
       registry-url: https://npm.pkg.github.com/
       scope: '@yleisradio'
   - run: npm ci
     env:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Choose your starting point

You're building	Start here
A React web app	Get started with yds-components-react 3.0
A web app without React (Vue, Svelte, plain HTML)	Without React
Your own styles with YDS tokens	Using tokens
Icons only	Icons and Logos
A React Native app	React Native
A native iOS or Android app	Native apps
Charts and infographics	Infographics

Every web setup loads the Yle Next font: see Load Yle Next.

React Native

npm install @yleisradio/yds-core @yleisradio/yds-components-react-native @yleisradio/yds-icons-react-native react-native-svg

Wrap the component tree in the theme provider:

import { YdsThemeProvider, Tag } from '@yleisradio/yds-components-react-native';

<YdsThemeProvider theme="light">
  <Tag>Hello world</Tag>
</YdsThemeProvider>;

Components available for React Native are tagged React Native on the Components page.

Native apps

YDS doesn't provide native iOS or Android components, but native apps can use its assets:

• Icons: archives of basic and illustrative icons, SVG for iOS and VectorDrawable for Android. See CDN.
• Colours: Android colour resources (colors.xml, theme-dark.xml) are included in @yleisradio/yds-core under tokens/build/android/.

Infographics

npm install @yleisradio/yds-core @yleisradio/yds-infographic-components-react @yleisradio/yds-infographic-icons-react

@yleisradio/yds-core exports the infographic colour themes as infographicLight, infographicDark and infographicDefault (CSS custom properties).

Contributing code

Local setup, commit conventions and the release flow are in the repository README. Before opening a pull request for anything larger than a fix, see Support and contributing.