Skip to main content

Welcome to TiKit UI Components

npm npm NPM

TiKit is a collection of UI components for Titanium built on top of Alloy and PurgeTSS.

TiKit Poster

Installation

To install it, run the following command in the terminal:

> [sudo] npm install -g tikit

Make sure you have PurgeTSS as well:

> [sudo] npm install -g purgetss

Installing the components

Once everything is installed on your machine, create a new Alloy project using PurgeTSS, make sure you have app.idprefix and app.idprefix settings configured.

> purgetss create myApp

Then, run tikit install and follow an interactive select prompt:

> tikit install
? Choose a component to install › - Use arrow-keys. Return to submit.
❯ all components
alerts
avatars
buttons
cards

Available components and their variants

Alerts

General properties: variant, color and classes

An alert displays a short and important message attracting the user’s attention without interrupting the user’s task.

TiKit Alert Component contains 3 variants:

  • callout
  • pop
  • solid

With 6 main colors each: success, danger, warning, info, dark and light.

And 2 custom colors for each variant called: primary and secondary.

You can add your own color values using the shades command in PurgeTSS:

> purgetss shades '#hexcode1' primary
> purgetss shades '#hexcode2' secondary

Additional properties: delay, duration and dismissible

Use delay to display the alert after a period of time and duration to set the speed of the animation. Both properties are in milliseconds.

Set the dismissible property to true to close it when the user clicks/taps on it.

<Alert module="tikit.ui" variant="pop" color="info" delay="500" dismissible="true" title="Dismissible Alert" text="Lorem ipsum dolor sit..." />

callout

Properties: title and text

A simple Alert with a title and brief description.

callout variant
<Alert module="tikit.ui" variant="callout" color="success" title="Callout variant" text="Lorem ipsum dolor sit..." />

Alerts callout variant

pop

Properties: title, text and icon

Alerts with a predefined icon to emphasize a message.

You can use icon fonts such as FontAwesome, Material Icons or any other icon font of your choice.

Change the icon using the icon property and its size with any of PurgeTSS’s font size classes:

pop variant with custom icon
<Alert module="tikit.ui" variant="pop" color="primary" title="Primary Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />

Alerts pop variant

solid

Properties: title and icon

A full-width, solid banner with a title and a predefined icon.

Just like the pop variant, you can change its icon using the icon property and its size with any of PurgeTSS’s font size classes.

solid variant with custom icon
<Alert module="tikit.ui" variant="solid" color="primary" title="Primary Alert with custom Icon" icon="mi mi-pending_actions text-2xl" />

Alerts solid variant

Avatars

General properties: variant, size and classes

Use Avatars to portray people or objects. It can be used as a visual identifier for a user profile on your app.

TiKit Avatar Component contains 6 variants:

  • chip
  • circular
  • square
  • portrait
  • landscape
  • stacked

With 6 different sizes each: xs, sm, base, lg, xl and 2xl.

Avatar Component
<Avatar module="tikit.ui" variant="chip" size="base" name="John Doe" image="link-to-image.jpg" />

chip

Properties: name and image

Set the name of the person and an image to display, using a local filesystem path, a remote URL, or a Blob object containing image data.

The default colors are bg-gray-200 and text-gray-500. To change them use the classes property, like the example below.

chip variant with custom colors
<Avatar module="tikit.ui" variant="chip" size="base" name="Mr. John Doe" image="https://randomuser.me/api/portraits/men/86.jpg" classes="bg-violet-900 text-violet-50" />

Avatars chip variant

circular

Properties: name, image and border

Set border to true to show a white border around the image.

Use the classes prop to change the border color.

circular variant with custom colors
<Avatar module="tikit.ui" variant="circular" size="base" border="true" image="https://randomuser.me/api/portraits/men/86.jpg" />

Avatars circular variant

square

Properties: name, image and border

Set border to true to show a white border around the image.

Use the classes prop to change the border color.

square variant with custom colors
<Avatar module="tikit.ui" variant="square" size="base" border="true" classes="border-violet-900" image="https://randomuser.me/api/portraits/men/86.jpg" />

Avatars square variant

portrait

Properties: name and image

Use the classes prop to change the border color.

The default border color is border-gray-500, use the classes prop to change it.

portrait variant with custom colors
<Avatar module="tikit.ui" variant="portrait" size="base" classes="border-violet-900" image="https://randomuser.me/api/portraits/men/86.jpg" />

Avatars portrait variant

landscape

Properties: name and image

Use the classes prop to change the border color.

The default border color is border-gray-500, use the classes prop to change it.

landscape variant with custom colors
<Avatar module="tikit.ui" variant="landscape" size="base" classes="border-violet-900" image="https://randomuser.me/api/portraits/men/86.jpg" />

Avatars landscape variant

stacked

Properties: title, icon and last

To properly adjust the right margin of the last avatar in a stack, set its last property to true.

stacked variant
<View class="horizontal">
<Avatar module="tikit.ui" variant="stacked" size="base" image="https://randomuser.me/api/portraits/men/86.jpg" />
<Avatar module="tikit.ui" variant="stacked" size="base" image="https://randomuser.me/api/portraits/men/87.jpg" />
<Avatar module="tikit.ui" variant="stacked" size="base" image="https://randomuser.me/api/portraits/men/62.jpg" />
<Avatar module="tikit.ui" variant="stacked" size="base" last="true" image="https://randomuser.me/api/portraits/men/88.jpg" />
</View>

Avatars stacked variant

Buttons

General properties: variant, size and classes

Buttons allow the user to take actions or make choices.

TiKit Button Component contains 6 variants:

  • border
  • border-rounded
  • filled
  • filled-rounded
  • icon-left
  • icon-right

With 6 different sizes each: xs, sm, base, lg, xl and 2xl.

<Button module="tikit.ui" variant="border" size="lg" title="Button Name" />

border

Property: title

Use the classes property to change the color of the title and border:

border variant
<Button module="tikit.ui" variant="border" size="base" title="Border" classes="border-violet-900 text-violet-900" />

Buttons border variant

border-rounded

Property: title

Use the classes property to change the color of the title and border:

border-rounded variant
<Button module="tikit.ui" variant="border-rounded" size="base" title="Border Rounded" classes="border-violet-900 text-violet-900" />

Buttons border-rounded variant

filled

Property: title

Use the classes property to change the color of the title and background:

filled variant
<Button module="tikit.ui" variant="filled" size="base" title="Filled" classes="text-violet-50 bg-violet-900" />

Buttons filled variant

filled-rounded

Property: title

Use the classes property to change the color of the title and background:

filled-rounded variant
<Button module="tikit.ui" variant="filled-rounded" size="base" title="Filled Rounded" classes="text-violet-50 bg-violet-900" />

Buttons filled-rounded variant

icon-left

Properties: title and icon

Use the icon property to change its icon, color and size.

Use the classes property to change the color of the title and background:

icon-left variant
<Button module="tikit.ui" variant="icon-left" size="base" title="Button" icon="fa fa-file text-violet-50" classes="text-violet-50 bg-violet-900" />

Buttons icon-left variant

icon-right

Properties: title and icon

Use the icon property to change its icon, color and size.

Use the classes property to change the color of the title and background:

icon-right variant
<Button module="tikit.ui" variant="icon-right" size="base" title="Button" icon="fa fa-file text-violet-50" classes="text-violet-50 bg-violet-900" />

Buttons icon-right variant

Custom Icons

Use any Icon Font Library

You can change to a different icon from the FontAwesome Icon Library or even to a different font vendor by setting the icon property with the font and icon classes, ej. fa fa-file-pdf or mi mi-pending_actions

You can even change its size with any of PurgeTSS’s font size classes, such as text-lg or text-2xl.

In this example, we are using the Material Icons font library.

Custom icon and color
<Button module="tikit.ui" variant="icon-left" size="base" icon="mi mi-pending_actions text-2xl text-violet-50" title="Pending Actions" classes="my-4 font-bold bg-violet-900" />

Buttons custom icon and color

Cards

General properties: variant, color and classes

Cards are used to group and display content in a way that is easily readable, it serves as an entry point to more detailed information.

TiKit Card Component contains 4 variants:

  • code
  • content
  • quote
  • showcase

With 4 colors each: black, dark, light and white.

<Card module="tikit.ui" variant="code" color="black" copy="true" title="Card Title" text="Some code or text to display!" />

code

Properties: title, text and copy

To display small snippets of code.

Use the copy property to display a copy button at the top-right corner.

The button’s title and the alert message are set with Titanium’s localization function: L('copy', 'Copy') and L('code_copied', 'Code copied to clipboard!') respectibly, so add both strings: copy and code_copied to your app’s target languages (app/i18n/xx/strings.xml) for personalization and translation.

Install a monotype family of your preference and create a font-mono style in ./purgetss/config.js.

We are using FiraCode-Light font family in all examples.

Cards code variant

showcase

Properties: title, text and image

When you need to display an image with a title and a small description.

showcase variant
<Card module="tikit.ui" variant="showcase" color="black" title="Pocket" text="Mobile app marketing website" image="images/showcase/1.png" />

Cards showcase dark

quote

Properties: name and text

When you need to display a quote from someone.

quote variant
<Card module="tikit.ui" variant="quote" color="black" name="John Doe" text="Quas ullam, quis eius a blanditiis..." />

Cards quote dark

content

Properties: title, subtitle and text

Display a block of text with a large title, a highlighted subtitle and paragraphs of text.

content variant
<Card module="tikit.ui" variant="content" color="black" title="content variant, black" subtitle="This is a subtitle" text="Alloy.Globals.lorem" />

Cards content dark

Tabs

The Tab component returns an instance of Titanium.UI.Tab that includes a custom icon created with an icon font such as FontAwesome, Material Icons or any other icon font of your choice.

By setting the title, icon and activeIcon (iOS only) properties, you’ll get a Tab component with the icons nicely rendered.

The icon property is defined with the icon font name and the icon code, for example: fa fa-home or mi mi-home.

Tab component
<Tab module="tikit.ui" title="Email" icon="far fa-envelope" activeIcon="fas fa-envelope">
<!-- tab’s-window-content -->
</Tab>

Additional properties

These are regular Titanium.UI.Tab objects, so you can use all the properties and methods available for them.

For example you can set active tint and title color for each tab by using the activeTintColor and activeTitleColor properties like this:

<Tab module="tikit.ui" class="active-tint-violet-900 active-title-violet-900" title="Tabs" icon="mio mi-security_update_good text-3xl" activeIcon="mit mi-security_update_good text-3xl">
<Require src="sections/tabs" />
</Tab>

Tab Active Tint Violet

Official Icon Fonts in PurgeTSS

To copy the free versions of Font Awesome, Material Icons, Material Symbols or Framework7 Icons to your project, use the icon-library command in PurgeTSS:

> purgetss icon-library --vendor=fa,mi,ms,f7

• fa, fontawesome = Font Awesome Icons
• mi, materialicons = Material Icons
• ms, materialsymbol = Material Symbols
• f7, framework7 = Framework7 Icons