Skip to main content

Getting started

Info 🇺🇦

Koval (koválʹ) is a smith in Ukrainian language. See vocabulary definition.

Install Koval UI​

tip

Rubik Variable font is required by Koval default themes: Podil and Dnipro.

// install Koval UI alongside with Rubik
npm i koval-ui @fontsource-variable/rubik

Set up Provider and theme​

Wrap your application code with a Provider component at the highest possible level. Include Koval UI CSS in your bundle. There are three themes available at the moment: themePodil, themeDnipro and themeDovzhenko

Import Koval CSS file and necessary fonts to your bundle.

import type {FC} from 'react';
// Import Provider and theme
import {Provider, themePodil} from 'koval-ui';
// Include installed Rubik Variable font in the build
import '@fontsource-variable/rubik/wght.css';
// Include Koval UI CSS in the build
import 'koval-ui/dist/index.css';

const App: FC = () => {
  return <Provider theme={themePodil}>{/*App contents*/}</Provider>;
};