Konsta UI - Pixel perfect mobile UI components built with Tailwind CSS with iOS and Material Design components for React, Vue & Svelte

  • By Konsta UI
  • Last update: Jan 9, 2023
  • Comments: 17

Konsta UI

Konsta UI

Konsta UI - Pixel perfect mobile UI components built with Tailwind CSS with iOS and Material Design components for React, Vue & Svelte

Documentation

Documentation available at https://konstaui.com

Konsta UI Development

First, install all dependencies:

$ npm install

Production Builds

To build production versions the following npm scripts are available:

  • build - build production version

Compiled results will be available in package/ folder.

Kitchen Sink

To run Kitchen Sink with development environment (development version will be built first) use the following npm scripts:

  • react - build development version of Konsta UI React package and run React Kitchen Sink

Contributing

All changes should be committed to src/ files only. Before you open an issue please review the contributing guideline.

Github

https://github.com/konstaui/konsta

Comments(17)

  • 1

    iOS theme don't work in newer vite version 3.1.0 in dev mode

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://stackblitz.com/edit/sveltejs-kit-template-default-yznzfw

    Bug description

    The iOS theme doesn't apply and won't show correctly in SvelteKit using newer vite version (3.1.0-beta.1 and 3.1.0-beta.2) in dev mode only (when runing npm run dev). But works in build version (npm run preview). When reverting to vite 3.0.9 the iOS theme applies and works perfectly in both dev mode and preview mode.

    I guess something changed in newer vite version: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md

    Expected Behavior

    iOS theme

    Actual Behavior

    Material theme

    Konsta UI version

    v0.11.1 v1.0.0-beta.5

    Platform/Target and Browser Versions

    Linux/Brave Version 1.42.86 Chromium: 104.0.5112.81 (Official Build) (64-bit)

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    • [X] Make sure this is a Konsta UI issue and not a framework-specific issue

    Would you like to open a PR for this bug?

    • [X] I'm willing to open a PR
  • 2

    Error using konsta with nuxt3

    I can't get konsta to work with nuxt 3.0.0-rc3.

    In dev-mode everything is fine, but when i build the app with "nuxt build" I get an Error: TypeError: Cannot read properties of null (reading 'isCE')

    Can someone please help me to fix this?

  • 3

    Svelte support will be added in January

    @nolimits4web, any update on svelte ? Svelte support will be added in January

    Originally posted by @nolimits4web in https://github.com/konstaui/konsta/issues/2#issuecomment-989826503

  • 4

    Svelte Support

    Hi @nolimits4web How can i help/ contribute to getting out a svelte version . I see there is currently only react version in the source. I thought i could mix tailwind styling with framework 7 component's given that each component exports a className property , but that didn't seem to take any effect. I happened upon this project while searching for a way to do that.

  • 5

    SyntaxError: Named export 'AppClasses' not found.

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://github.com/tranhoang1010vn/nextjs-konsta.git

    Bug description

    error - SyntaxError: Named export 'AppClasses' not found. The requested module '../../../shared/esm/classes/AppClasses.js' is a CommonJS module, which may not support all module.exports as named exports.

    file:///D:/Repo-Nextjs-QLGV/node_modules/konsta/react/esm/components/App.js:6 import { AppClasses } from '../../../shared/esm/classes/AppClasses.js'; ^^^^^^^^^^ SyntaxError: Named export 'AppClasses' not found. The requested module '../../../shared/esm/classes/AppClasses.js' is a CommonJS module, which may not support all module.exports as named exports.

    I use dependencies : { "axios": "^0.26.1", "konsta": "^0.8.1", "next": "^12.1.5", "next-auth": "^4.3.2", "react": "^18.0.0", "react-dom": "^18.0.0" },

    Expected Behavior

    No response

    Actual Behavior

    No response

    Konsta UI version

    0.8.1

    Platform/Target and Browser Versions

    Windows 10

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    • [X] Make sure this is a Konsta UI issue and not a framework-specific issue

    Would you like to open a PR for this bug?

    • [ ] I'm willing to open a PR
  • 6

    Suggest to write as Web Component

    Have a look on this web components concept & functions, etc. https://developer.mozilla.org/en-US/docs/Web/Web_Components

    I would suggest to use Vue js to develop web components. Hence you just write a single codebase, it can be used across any framework. https://v3.vuejs.org/guide/web-components.html#web-components-vs-vue-components

    Based on my experience on React js, its hooks is very good to use, but its not friendly to write or use web component, we have to build a wrapper to use it with web component, but its still works well with web components, check this out https://reactjs.org/docs/web-components.html

  • 7

    Add script for running on mobile devices

    Clear and concise description of the problem

    The premise of the library is "Mobile UI components" except there are no docs on how to run it on mobile.

    Suggested solution

    Add a script to run each kitchen on a native device, simulator or emulator.

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    Would you like to open a PR for this feature?

    • [ ] I'm willing to open a PR
  • 8

    Example code does not work - Some svelte conflict?

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://konstaui.com/svelte/usage

    Bug description

    Hi. I just created a basic svelte application with the following App.svelte code:

    <script>
    	/* App.svelte */
    	import { Block, Button } from 'konsta/svelte';
      </script>
    
      <Block class="space-y-4">
    	<p>Here comes the button</p>
    	<Button>Action</Button>
      </Block>
    

    I Installed tailwind css and followerd all Instructions, but my application won't buid

    ────────────────── LOGS ──────────────────
    
    publicFolder is public
    rollup v1.16.3
    bundles src/main.js → public\bundle.js...
    [!] (plugin svelte) ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component
    node_modules\konsta\svelte\components\ActionsButton.svelte
    71: </script>
    72:
    73: <svelte:element
         ^
    74:   this={Component}
    75:   bind:this={rippleEl.current}
    ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component
        at error$1 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\utils\error.ts:25:16)
        at Parser$2.error (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:93:3)
        at read_tag_name (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\state\tag.ts:303:10)
        at tag (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\state\tag.ts:101:15)
        at new Parser$2 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:45:12)
        at parse$2 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:208:17)
        at parse (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\compile\index.ts:68:14)
        at C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\rollup-plugin-svelte\index.js:252:22
    

    Expected Behavior

    Should display a basic app

    Actual Behavior

    Throws an error

    Konsta UI version

    1.0.2 (just installed it from npm)

    Platform/Target and Browser Versions

    Firefox

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    • [X] Make sure this is a Konsta UI issue and not a framework-specific issue

    Would you like to open a PR for this bug?

    • [ ] I'm willing to open a PR
  • 9

    on: click event on button does not work

    Check that this is really a bug

    • [ ] I confirm

    Reproduction link

    https://stackblitz.com/edit/vite-fh6u6e

    Bug description

    I tried adding simple increment count click handler on one of the buttons in Buttons.svelte ` let count = 0; function incrementCount() { count += 1; }

    <Button on:click={incrementCount}> Button {count} ` I get following error.

    was created with unknown prop 'location' Buttons.svelte:3578:92 was created with unknown prop 'navigate' Buttons.svelte:3578:92

    Expected Behavior

    counter should increment and should show on top of button.

    Actual Behavior

    incremented counter not showing up on button.

    Konsta UI version

    0.11.1

    Platform/Target and Browser Versions

    chrome, firefox

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    • [X] Make sure this is a Konsta UI issue and not a framework-specific issue

    Would you like to open a PR for this bug?

    • [ ] I'm willing to open a PR
  • 10

    defaultValue for ListInputs in Svelte/Vue doesn't work

    Clear and concise description of the problem

    When using Konsta UI with Svelte or Vue and setting default values for inputs in ListInput via defaultValue, the inputs remain empty. See the documentation example:

        <ListInput
          label="Birthday"
          type="date"
          defaultValue="2014-04-30"
          placeholder="Please choose..."
        >
    

    Suggested solution

    defaultValues should be set for inputs

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    Would you like to open a PR for this feature?

    • [ ] I'm willing to open a PR
  • 11

    Could't get the ListInput to render

    <svelte:element this="input"> is self-closing and cannot have content.
    Error: <svelte:element this="input"> is self-closing and cannot have content.
        at Proxy.validate_void_dynamic_element (/home/ansel/Development/svelte/kudura-app/node_modules/svelte/internal/index.js:2082:15)
        at eval (/node_modules/konsta/svelte/components/ListInput.svelte:243:31)
        at eval (/node_modules/konsta/svelte/components/ListInput.svelte:245:10)
        at Object.inner (ListInput.svelte:198:16)
        at eval (/node_modules/konsta/svelte/components/ListItem.svelte:268:33)
        at eval (/node_modules/konsta/svelte/components/ListItem.svelte:270:13)
        at ListItem.svelte:163:14
        at eval (/node_modules/konsta/svelte/components/ListItem.svelte:318:8)
        at ListItem.svelte:156:10
        at Object.$$render (/home/ansel/Development/svelte/kudura-app/node_modules/svelte/internal/index.js:1758:22)
    
  • 12

    On Vacation until January 11th

    Dear community, as the maintainer of this project, I have put the repository in "vacation mode" so that I can take a much needed and deserved break without worrying about tasks piling up while I recharge. I hope you can understand the need to take this action and not just "turn off notifications". Anyone who has experienced a company-wide shutdown would understand, that it's much easier to disconnect from work when everyone does at the same time.

    Know that your contributions are valuable and appreciated, so please subscribe to this issue and get notified when I'm back and ready to resume actively maintaining this project.

  • 13

    Breadcrumb Inkwell Shape Incorrect

    Check that this is really a bug

    • [X] I confirm

    Reproduction link

    https://konstaui.com/svelte/kitchen-sink

    Bug description

    The shape of the inkwell for the breadcrumb is incorrect

    Expected Behavior

    No response

    Actual Behavior

    https://user-images.githubusercontent.com/7126128/209065739-5766a906-f117-4350-8899-8f0e7b24fc7f.mp4

    Konsta UI version

    Konsta kitchen sink

    Platform/Target and Browser Versions

    Chrome Android

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    • [X] Make sure this is a Konsta UI issue and not a framework-specific issue

    Would you like to open a PR for this bug?

    • [ ] I'm willing to open a PR
  • 14

    Animation events?

    Clear and concise description of the problem

    I have a small modal (Popup) and would like to know when its animation ended. onWillClose and onDidClose would be really helpful.

    Suggested solution

    N/A

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    Would you like to open a PR for this feature?

    • [ ] I'm willing to open a PR
  • 15

    ListInput -> Dropdown options are not visible in dark mode

    Clear and concise description of the problem

    In ListInput the dropdown uses a white background with white text on it so it's not visible. The issue exists in the kitchen-sink example code as well.

    Suggested solution

    Use dark background with white text by default.

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    Would you like to open a PR for this feature?

    • [ ] I'm willing to open a PR
  • 16

    Use the direction attribute / Support RTL

    Clear and concise description of the problem

    If we set the element's dir it should change the layout.

    image

    But setting html attribute dir = 'rtl' or CSS direction: rtl;:

    image

    Suggested solution

    Add dir support for components

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    Would you like to open a PR for this feature?

    • [ ] I'm willing to open a PR
  • 17

    Solid JS Version

    Clear and concise description of the problem

    Hi, so I noticed that there is a solid js version of Swiper JS. I was wondering if you have considered adding support for Solid JS to Konsta UI?

    Suggested solution

    Add support for solid js

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the docs.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

    Would you like to open a PR for this feature?

    • [ ] I'm willing to open a PR