If you use Konsta UI with other frameworks (like Framework7), 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.svelte -->
  // we use main App and Router components from Framework7
  import { App, View, Page, Navbar } from 'framework7-svelte';
  // we use KonstaProvider instead
  import { KonstaProvider, Block, Button } from 'konsta/svelte';

<!-- Wrap our app with KonstaProvider -->
<KonstaProvider theme="ios">
  <!-- We add extra `k-ios` class to the app root element -->
  <App theme="ios" class="k-ios">
        <Navbar title="My App" />
        <!--  Konsta UI components -->
          <p>Here comes my app</p>
        <Block class="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


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.