Skip to main content
Starting with version 4.0, UI Kitten becomes a React Native implementation of Eva Design System. This means that components’ visual style and behavior are based on Design System rules and agreements.

​
What is Eva Design System?

Eva is a customizable Design System based on Atomic Design Principles. All components are built on basic elements with shared styles, connected with a single Visual Language for both Mobile and Web platforms.

​
Key Principles

1

Atomic Design

Components are built from basic elements with shared styles, creating a cohesive design language.
2

Cross-Platform Consistency

Single visual language works across both Mobile and Web platforms.
3

Customizable Architecture

Built for customization with architectural support for multiple themes across all components.
4

Theme System

Unified theming system with a single source of truth for styles.

​
Eva Ecosystem

Eva Design System is implemented for two platforms:

Mobile - UI Kitten

React Native implementation with full Eva Design System support

Web - Nebular

Angular implementation for web applications
Both implementations share:
  • Single source of truth for styles
  • Unified theming system
  • Consistent design language
  • Cross-platform compatibility

​
Built-in Themes

Eva Design System provides two themes out of the box:

​
Light Theme

A clean, bright theme with white backgrounds, perfect for most applications. 
{
  "color-primary-500": "#3366ff",
  "color-success-500": "#00e096",
  "color-info-500": "#0095ff",
  "color-warning-500": "#ffaa00",
  "color-danger-500": "#ff3d71",
  "background-basic-color-1": "#ffffff",
  "text-basic-color": "#222b45"
}

​
Dark Theme

A sophisticated dark theme optimized for low-light environments. 
{
  "color-primary-500": "#3366ff",
  "color-success-500": "#00e096",
  "color-info-500": "#0095ff",
  "color-warning-500": "#ffaa00",
  "color-danger-500": "#ff3d71",
  "background-basic-color-1": "#222b45",
  "text-basic-color": "#ffffff"
}
The theme extension mechanism allows modifying one theme with another, making it easy to create custom variations.

​
Theme Structure

Eva themes are organized into semantic groups:
5 semantic colors (primary, success, info, warning, danger) and basic color for backgrounds and text. Each color has 9 shades (11 for basic).
{
  "color-primary-100": "#f2f6ff",
  "color-primary-500": "#3366ff",
  "color-primary-900": "#14236e"
}

​
Variable References

Eva themes support variable references using the $ prefix: 
{
  "color-primary-500": "#3366ff",
  "color-primary-default": "$color-primary-500",
  "color-primary-hover": "$color-primary-400",
  "color-primary-active": "$color-primary-600"
}
The dollar sign ($) before a value means it references another variable in the theme scope. This creates a flexible system where changing one base color automatically updates all dependent colors.

​
Enterprise Ready

As part of the Eva Ecosystem, UI Kitten is an excellent choice for enterprise-grade products:
  • Complete control over application look & feel
  • Professional, polished design out of the box
  • Comprehensive theming capabilities
  • Cross-platform consistency
  • Well-documented and maintained

​
Getting Started

To start using Eva Design System with UI Kitten: 
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text category='h1'>Welcome to UI Kitten</Text>
    </Layout>
  </ApplicationProvider>
);
Make sure to wrap your entire application with ApplicationProvider and pass the Eva theme configuration to enable the design system.

​
Next Steps

Theme Customization

Learn how to customize themes to match your brand

Custom Mapping

Create custom component mappings

Theme Variables

Use theme variables in your components

Glossary

Understand Eva Design System terminology

Build docs developers (and LLMs) love

Get started for freeTalk to us