🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥



If you use Konsta UI with other frameworks (like Framework7 or Ionic), we still should specify Konsta UI's globals (like theme) with the help of KonstaProvider.

We also need to add k-ios or k-material class to the app's root element.

/* App.jsx */
import React from 'react';
// we use main App and Router components from Framework7
import { App, View, Page, Navbar } from 'framework7-react';
// we use KonstaProvider instead
import { KonstaProvider, Block, Button } from 'konsta/react';

export default function MyApp() {
  return (
      {/* Wrap our app with KonstaProvider */}
      <KonstaProvider theme="ios">
        {/* We add extra `k-ios` class to the app root element */}
        <App theme="ios" className="k-ios">
              <Navbar title="My App" />
              {/*  Konsta UI components */}
                <p>Here comes my app</p>
              <Block className="space-y-4">
                <p>Here comes the button</p>

KonstaProvider Props


Include dark: variants (if dark theme is in use)

theme'ios' | 'material' | 'parent''material'

App theme. If set to 'parent' it will look for ios or md class on root <html> element, useful to use with parent framework like Framework7 or Ionic


Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components

Code licensed under MIT.
2022 © Konsta UI by nolimits4web.