ui kit for Valk Digital

Usage no npm install needed!

<script type="module">
  import valkdigitalUiKit from 'https://cdn.skypack.dev/@valkdigital/ui-kit';


Valk Digital UI-kit


A fully typed component library for react native (web) development.


Instructions for using the library


Install this package in your React Native or React project.

npm install @valkdigital/ui-kit


yarn add @valkdigital/ui-kit


This project uses Source Sans Pro. When you add a font to your project use the same names as the ones in the ./src/style/typography.ts file. When you set up an expo project you can use the Fonts enum like this:

import React from "react";
import { useFonts } from "expo-font";
import { Fonts } from "vex-ui";

export default function App() {
  const [loaded] = useFonts({
    [Fonts.Bold]: require("../assets/fonts/SourceSansPro-Bold.ttf"),
    [Fonts.Regular]: require("../assets/fonts/SourceSansPro-Regular.ttf"),
    [Fonts.SemiBold]: require("../assets/fonts/SourceSansPro-SemiBold.ttf"),
    [Fonts.Italic]: require("../assets/fonts/SourceSansPro-Italic.ttf"),
    [Fonts.IconSetSolid]: require("../assets/fonts/icomoon_solid.ttf"),
    [Fonts.IconSetOutline]: require("../assets/fonts/icomoon_outline.ttf"),


In order for this component library to work you need to provide your app with a theme. Wrap your app with a provider and set your theme with the value prop. See the following examples.

Set a custom theme

Set a light and/or a dark theme.

        light: YourAwsomeLightTheme,
        dark: YourAwsomeDarkTheme


Get the theme value (dark/light) from Theme and place the provider around your app.

import { Theme } from "@valkdigital/ui-kit"

    value={darkModeOn ? Theme.dark : Theme.light}
    <YourAwesomeApp />


You can see an extensive documented web preview of the component library at https://valkdigital.github.io/ui-kit or by running yarn storybook. With the use of storybook you'll be able to see each component with the following topics:

  • Preview
  • Props overview
  • Additional information regarding the behavior of the component

To preview the UI-kit components on iOS and Android you can run:

  • iOS:

    yarn run-ios

  • Android:

    yarn run-android