Konsta UI & Ionic

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

Contents

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

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

Install Konsta UI

Now, we can install Konsta UI:

npm i konsta

Tailwind CSS Styles

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

@import 'tailwindcss';
/* import Konsta UI theme */
@import 'konsta/react/theme.css';

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: