Konsta UI & Ionic

• Create Ionic Project
• Install Tailwind CSS
• Tailwind CSS Styles
• Install Konsta UI
• KonstaProvider
• Usage
• Example Page
• Color Theme

Let's see how to use Konsta UI React components with Ionic React.

Create Ionic Project

First, create an Ionic React project.

Install Tailwind CSS

If Ionic React project was generated with Ionic CLI, it actually creates a Create React App project.

So, to install Tailwind CSS, we can follow official Tailwind CSS with Create React App Guide

Tailwind CSS Styles

Create a src/App.css file with the following content to include Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Install Konsta UI

Now, we can install Konsta UI:

npm i konsta

And in your tailwind.config.js file we should extend config with Konsta UI's config:

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
});

KonstaProvider

Now we need to setup KonstaProvider so we can set some global parameters (like theme).

We need to wrap main Ionic's IonApp component with KonstaProvider in the src/App.tsx:

import React from 'react';
import { KonstaProvider } from 'konsta/react';
import { IonApp /* ... */ } from '@ionic/react';

const App: React.FC = () => (
  // Wrap IonApp with KonstaProvider with theme="parent"
  <KonstaProvider theme="parent">
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/home">
            <Home />
          </Route>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  </KonstaProvider>
);

Usage

To keep Ionic router work correctly we need to use Router-related components from Ionic: IonApp, IonReactRouter, IonPage, IonHeader, IonFooter, IonToolbar.

The rest of components (if there is a Konsta UI alternative) can be taken from Konsta UI (konsta/react)

Example Page

Now when everything is set up, we can use Konsta UI React components in Ionic page components.

For example, let's open src/pages/Home.tsx and change it to the following:

import {
  IonContent,
  IonHeader,
  IonFooter,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import { Block, Button, List, ListItem, BlockTitle, Link } from 'konsta/react';

const Home: React.FC = () => {
  return (
    // Use IonPage, IonHeader, IonFooter & IonToolbar from Ionic
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>My App</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonFooter>
        <IonToolbar>
          <Link slot="start" toolbar>
            Link 1
          </Link>
          <Link slot="end" toolbar>
            Link 2
          </Link>
        </IonToolbar>
      </IonFooter>

      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">My App</IonTitle>
          </IonToolbar>
        </IonHeader>

        {/* In page content we can use Konsta UI components  */}
        <Block strong>
          <p>
            Here is your Ionic & Konsta UI app. Let's see what we have here.
          </p>
        </Block>
        <BlockTitle>Navigation</BlockTitle>
        <List>
          <ListItem href="/about/" title="About" />
          <ListItem href="/form/" title="Form" />
        </List>

        <Block strong className="flex space-x-4">
          <Button>Button 1</Button>
          <Button>Button 2</Button>
        </Block>
      </IonContent>
    </IonPage>
  );
};

export default Home;

As a result we should see the following page:

Color Theme

Ionic and Konsta UI use different sources for main theme color. While Ionic's theme color is configured via CSS custom properties, Konsta UI theme should be set in tailwind.config.js.

Let's say our theme color is #ff6b22, we need to set the following:

In App.css (to configure Ionic theme color):

:root {
  --ion-color-primary: #ff6b22;
  --ion-color-primary-rgb: 255, 107, 34;
  --ion-color-primary-shade: #f85200;
  --ion-color-primary-tint: #ff864b;
}

And in tailwind.config.js (to configure Konsta UI theme color):

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // extend primary color
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#ff864b',
          DEFAULT: '#ff6b22',
          dark: '#f85200',
        },
      },
    },
  },
});