Tiki UI Kit for React-Native

The operation to build and maintain a Design Language System includes people, processes, rules, tools, guides, etc...

Contents

• Installation
• Get Started
• Documentation
• Changelog
• Contributors
• License

Installation

# NPM
npm install @lamvd0101/tiki-ui

# Yarn
yarn add @lamvd0101/tiki-ui

iOS

• Browse to node_modules/@lamvd0101/tiki-ui and drag the folder Fonts to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.

• Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added.

• List of all available fonts to copy & paste in info.plist

<key>UIAppFonts</key>
<array>
  <string>Inter-Black.ttf</string>
  <string>Inter-Bold.ttf</string>
  <string>Inter-ExtraBold.ttf</string>
  <string>Inter-ExtraLight.ttf</string>
  <string>Inter-Light.ttf</string>
  <string>Inter-Medium.ttf</string>
  <string>Inter-Regular.ttf</string>
  <string>Inter-SemiBold.ttf</string>
  <string>Inter-Thin.ttf</string>
</array>

Android

• Copy the contents in the Fonts folder to android/app/src/main/assets/fonts

Get Started

Add & run configure function from the library in your index file

import {configure} from '@lamvd0101/tiki-ui';

// Setup common configs of the UI Kit before rendering your Application
configure();

Custom Theme

The config function can pass a param. Allows to customize the look of the library.

type Configs = {
  mapping?: {[key: string]: string},
};

import {configure} from '@lamvd0101/tiki-ui';

const customTheme = {
  /*
  mapping is an object where the key is any color token
  (You can get it from the documentation content below)
  */
  mapping: {},
};

configure(customTheme);

Documentation

• Foundation
• Basic Components
• Advance Components

Changelog

• Releases

Contributors

This project exists thanks to all the people who contribute.

License

@Tiki