Skip to main content

Available Themes

Koval UI ships with three themes bundled: Podil, Dnipro and Dovzhenko.

Storybook

You can see and try all available themes at Koval Storybook. There is also a dedicated theme color palette story.

Apply Theme​

import type {FC} from 'react';
import {Provider, themeDnipro, themePodil, themeDovzhenko} from 'koval-ui';
import '@fontsource-variable/rubik/wght.css';
import 'koval-ui/dist/index.css';

export const App: FC = () => {
  // Theme Podil is set by default.
  return <Provider theme={themeDnipro}>{/*App code*/}</Provider>;
};

Podil​

Default theme. Named after my favorite Kiev district.

Podil uses Rubik Variable font.

Example​

Table with theme applied.

Dnipro​

Complementary theme to Podil. Has brand and accent colors swapped.

Dnipro uses Rubik Variable font.

Example​

Table with theme applied.

Dovzhenko​

Black and white theme that may be useful for UX testing purposes. Named after Alexander Dovzhenko, a famous movie director.

Dovzhenko uses system-ui font family.

Example​

Table with theme applied.