15 ms·
Konsta UI – Mobile UI Components Built with TailwindCSS
- claytongulick 4y agoI'm both impressed and very confused by this project. Looking through the source code, they reimplemented all components for react, Vue and svelte. That's an impressive amount of work. What confuses me is why they would do that... Why not just use Web Components as the core? If you want clean integration with a framework, a small "glue" wrapper component should be easy. I question whether the current development approach is maintainable.
- pjmlp 4y agoReact doesn't do Web Components, the community is pretty much against them.
- diceduckmonk 4y agoReally curious about this. Can you link to some context? We're looking to find the lowest common denominator of expressing UI components and thinking about JSON metadata instead of Web Components. With this, we'd have to implement some adaptor that maps JSON to each UI library, but in our case we really only have to worry about React and Native Mobile.
- pjmlp 4y agoI guess because of how JSX works and what is required to support Web Components semantics. It is like "you kind of can, but you're on your own" thing, https://reactjs.org/docs/web-components.html https://reactjs.org/docs/web-components.html
- esperent 4y agoFrom that page: > Most people who use React don’t use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components. So it seems like this would be exactly the kind of use case where using web components would be ok.
- WA 4y agoIonic components are web components with bindings for React, Vue and more. The advantage is that you can use Ionic in vanilla JS as well.
- fermigier 4y agoSame impression here. The project has basically 4 parts: - 1 for the CSS parts: basically a DSL to define a giant tree of Tailwind CSS class properties, with some conditionals to take care of the context (iOS vs. Material) and other optional features. - 3 for the React/Vue/Svelte components. They seem to provide the same features, each implemented independently. There is definitively a separation of concern between style and behavior, so the style part could be reused in other frameworks. But there is also a "DRY" violation with the 3 independently developed framework-dependent parts. Could this be improved by having a framework-independent part (you suggest Web Components, what would be the easier way to get this part done?) and framework-dependent adapter, or would this extra layer of indirection make things harder to understand?
- sgt 4y agoAre web components actually mature yet though?
- dmitriid 4y ago> Why not just use Web Components as the core? Because web components suck and are an overkill for what should really be the job of Scoped CSS (now indefinitely delayed because of web components)?
- chenxi9649 4y agoI originally thought it was something like DaisyUI but for React Native with NativeWind, but this seems quite different, and almost a little strange haha. I'm very impressed by the polish of the project but am curious about the main use case for a library like this. (I guess, in what situation would one want a webpage to feel like a system native app? Potentially this paves the way for PWAs?)
- nprateem 4y agoMaybe to simplify creating cross-platform apps by just wrapping a webview of something implemented with this.
- devkwan 4y agoHigh chance to got rejected by Apple
- NayamAmarshe 4y ago> I'm very impressed by the polish of the project but am curious about the main use case for a library like this. I'd be very interested in something like Tamagui (https://tamagui.dev/ https://tamagui.dev/) but for Tailwind. I tried Tamagui but it's a bit too complicated when it comes to styling and layouts.
- CodeWriter23 4y ago> in what situation would one want a webpage to feel like a system native app? When one has an app that can function as an SPA, wants to distribute outside of app stores but still give a native visual presentation. Currently working on such a side app myself right now. And that I can use this and continue implementing in Vue is a big plus for me. Konsta UI looks exciting but their Framework7 App Framework looks even more so.
- nprateem 4y agoI used Framework7 for an app. It was good. I hadn't realised the dev had pulled out the UI library into a standalone project.
- diceduckmonk 4y agoMy startup team is working on a new project and elected Tailwind this week. Konsta looks like a great fit as we want to work well on mobile. Wondering if there are plans to add a grid with drag+drop? We're looking to emulate the iOS homescreen where you have a grid of Icons that can be dragged/dropped using https://shopify.github.io/draggable https://shopify.github.io/draggable. Having an integrated solution would help us avoid haphazard glue code.
- crucialfelix 4y agoAlso check https://daisyui.com/ https://daisyui.com/ Which looks great, rather than trying to look like material or ios
- NayamAmarshe 4y agoDaisyUI is great! A little less variety but still awesome! I'm using it in Upscayl (https://upscayl.github.io https://upscayl.github.io)
- itsuka 4y agoAfter taking a quick look at their documentation page, I noticed that some of the buttons, especially the default secondary and a few of the outline buttons, seem to have a low contrast ratio when viewed in default light mode: https://daisyui.com/components/button/ https://daisyui.com/components/button/ Hopefully, developers won't use these components as is. Although I'm not very familiar with Tailwind and its component library ecosystem, I found the DIY approach taken by https://github.com/shadcn/ui https://github.com/shadcn/ui to be better suited to my needs. This approach offers greater customization and flexibility in designing UI components, which is where I find the most enjoyment in building UI. Of course, pre-built component libraries like OP can provide a quicker solution if resources are limited.
- lman99 4y agoWhat about https://www.chimera-ui.com/docs/components https://www.chimera-ui.com/docs/components, made on top of ui from shadcn?
- fleetfox 4y agoI'm trying not to be a hater but really how is this: https://github.com/konstaui/konsta/blob/master/src/shared/classes/ButtonClasses.js https://github.com/konstaui/konsta/blob/master/src/shared/cl... better than css or even css in js
- BoorishBears 4y agoI don't write CSS (normally) and yet I understand every single statement, and can easily find which statement I'd need to change for a given. It's that simple. You could argue "well you should learn CSS!" but at the end of the day, I don't need CSS often enough to want to bother. Frameworks like TailwindCSS have been great for people like me. - Also you went and dug into its guts to find the implementation details, the actual usage is nowhere near that complicated: https://github.com/konstaui/konsta/blob/master/kitchen-sink/react/pages/SheetModal.jsx https://github.com/konstaui/konsta/blob/master/kitchen-sink/... I can't even imagine what raw CSS lovecraftian horror captures all of the corner cases the classes you linked are hiding away from me (and to be clear, I'd rather not know or care)
- simooooo 4y agoInteresting, I write CSS and react/js all the time, and I don’t understand a bit of that usage example.
- BoorishBears 4y agoI mean taking some random statements from a shorter line: "uppercase" => "text-transform: uppercase;" "duration-100" => "transition-duration: 100ms;" "px-2" => "padding-left: 0.5rem; padding-right: 0.5rem;" For someone who knows CSS I don't see it as a big downgrade in readability? But for someone like me, the right side of that equation isn't something I could go around writing in my HTML, the left form is. Even if all it's doing is acting as a short form for CSS that allows me to do a "no-no" and embed CSS in my markup, it enables me to be infinitely more productive in CSS than I've ever been. - And the reality is, if one day I work on a product that's so cursed with success that breaking that encapsulation starts to bite me: a) It's rare there won't be a lot about the design that has to change anyways b) I can hire/pay people who do this stuff for a living. And in the meantime I'll still get a ton of value from it
- cobertos 4y agoAnyone notice all the gambling sponsors? Looks like they're fed from OpenCollective (see BACKERS.md in the github repo). Feels like they're trying to get backlinks as their URLs end up as anchor tags on the site Such a weird ecosystem the sponsorships have created. I see a lot of other sites with irrelevant sponsors and non-trivial amounts of money, there just for the SEO/ranking
- hobo_mark 4y agoIt's definitely not an isolated case either https://news.ycombinator.com/item?id=33529742 https://news.ycombinator.com/item?id=33529742
- 9dev 4y agoSeems like a win-win situation to me: open source projects get the funding they need, and the sponsors get their SEO traffic. Gift horses mouth and all.
- Cthulhu_ 4y agoIt's the same with having advertisers on your website I guess, you don't actually know what is shown on your webpage, just that you earn money to turn a blind eye.
- WA 4y agoI’m using Ionic heavily and judge it through this lens. - The components for iOS look nice, but some things are off: Sheet modal is weird. Animation of modals or side panels feel too slow. - There are no animations when navigating forward or backwards. - The demo has scrolling issues on iOS Safari and doesn’t always show the header. - Unfaithful communication: it claims to give you native look and feel, which can never be true for HTML/CSS-based UIs that merely replicate native components. - I see no point in using this instead of Ionic, because Ionic has the same or more components with less bugs, because it has been around a lot longer.
- conradfr 4y agoYes I'm impressed by their extensive documentation and the Ionic integration seems well thought out but it's not clear to me why I would use that instead of the integrated Ionic components that looks almost identical to this library.
- sgt 4y agoOn mobile, the scrolling seems to be all over the place. Based on what you select, the title and top part of the next screen is often slightly obscured.
- askariwa 4y agoEhm, this remind me that there is https://framework7.io/ https://framework7.io/ too and i spot a similarity on the web sites ;-) IMO Framework7 has way more components available and it can be used in many use cases.
- crubier 4y agoThat’s awesome, I might use it soon! One small regret: I wish the library was structured like https://ui.shadcn.com/ https://ui.shadcn.com/ , which I love because it allows to copy paste the source code of each component and customize it further in your app, rather than importing a rigid pre made component into your app
- lman99 4y agoWhat about https://www.chimera-ui.com/docs/components https://www.chimera-ui.com/docs/components, made on top of ui from shadcn?
- mulhoon 4y agoThese kind of libraries are always easy to spot in the wild because of their transitions on things like modals and action sheets don’t match native. They’re just not as smooth.
- antihero 4y agoWhat exactly is a native mobile modal? That said I’m inclined to agree - emulating system controls with CSS always feels very uncanny valley to me.
- tobz1000 4y agoMy guess is a dropdown selection box.
- Cthulhu_ 4y agoAnd that's fine; it's a compromise sacrificing native look & feel and performance for cross-platform development and being able to assign web developers to mobile projects. I mean personally I think any developer worth their salt should be able to learn native development, and any company that wants to make a good app should hire and invest in native developers / development. But that's a hard sell these days.
- s1k3s 4y agoThe "Action Sheet" component is impressively smooth on my iPhone.
- satvikpendem 4y agoWhat is it about everyone using Tailwind? It inevitably becomes a mess in every codebase I've used it in; it's like Perl, a write only language. I just use Vanilla Extract (with their Sprinkles API) and call it a day, it uses TypeScript as the preprocessor language and then compiles it to raw CSS, similar to SCSS but without writing SCSS. https://vanilla-extract.style https://vanilla-extract.style
- sonicgear1 4y ago[flagged]
- satvikpendem 4y agoI see the Tailwind fans come out on any criticism of their library. I posted my comment a few minutes ago and already got a few combative comments almost immediately afterwards.
- antihero 4y agoYeah because you’ve jumped in on the attack on a post about something built with a tool that clearly gives a lot of people joy, in order to hawk your own thing. Getting whiny about people defending their own thing in response is kind of disingenuous. People got tired of vue people continuously doing the same thing about anything vaguely related to react, too.
- satvikpendem 4y agoNo, what I'm actually getting tired of is people getting on the hip new proprietary but trendy JS/CSS thing like Tailwind and leaving other devs to clean it up in a few years.
- antihero 4y agoAnd your Typescript CSS in JS thing using some new thing? TW is at least well documented and widely used and based on a fairly formalised bunch of classes that builds upon a concept that’s been used for 10+ years.
- meerita 4y agoWhile these projects may add additional complexity and potentially detract from the simplicity of functional CSS, they can still be a valuable option in comparison to traditional CSS architectural paradigms like BEM: http://minid.net/2019/08/12/in-defense-of-functional-css/ http://minid.net/2019/08/12/in-defense-of-functional-css/
- wheresmycraisin 4y agoIsn't making a component library antithetical to the way Tailwind is meant to be used?
- ajvs 4y agoNo, the components come with specific JS behaviours, and the documentation has the Tailwind classes you need to add separately (which means it's still modifiable if necessary).
- esperent 4y agoNot in the slightest, tailwind even have their own UI library. Theirs is unstyled but there's nothing wrong with creating one with default styles.
- wheresmycraisin 4y agoI always thought that was so the Tailwind developers could generate revenue.
- crubier 4y agoTailwind does not have their own UI library as reusable self-contained components. Instead Tailwind UI gives you the source code of these components so you can customize them to your needs. I much prefer that approach to that of pre-baked rigid components
- esperent 4y agoI meant this one: https://headlessui.com/ https://headlessui.com/
- gimliapp 4y agoLooks cool! Shameless plug: I've created a Tailwind extension for chrome: https://gimli.app/tailwinddx.html https://gimli.app/tailwinddx.html
- kytazo 4y agoOn the tailwind argument I don't really feel like ever going back in spending a good 2 minutes coming up with a non conflicting yet descriptive class name only to end not using it at all cause I decided to implement the requirement in a different way. Not to mention the relief from the constant css/html context switch you undergo indefinitely. I can't really comment on how it scales in big projects tho.
- deergomoo 4y agoI always find the criticism of localised styles and so-called separation-of-concerns violations amusing, given that the vast majority of user interface APIs to have ever existed have you set the styles directly on the elements. I think there’s maybe a few desktop UI APIs that use a similar approach to CSS, but having a separate declarative style sheet is almost unique to the web in the grand scheme of things. I guess it’s mostly people with a document-first mindset to stuff on the web, but I don’t think CSS is a good way to style application UIs.
- kaba0 4y agoDesktop UI APIs had/has the benefit of some OOP inheritance and a good set of standard components, plus separating layouts from styling. The web has only recently caught up with 2nd, and solved the 3rd in its own way - but it really is funny how insane amount of work is needed to have a custom date picker on the web vs on even something like WinForms.
- agloe_dreams 4y agoThis. And for big projects it comes with the advantage of locking everyone into the tailwind.config. Everything has tradeoffs. But to me, removing the context switch is like an ADHD cheat code. I’ve grown to enjoy the ability to look at one block and know exactly what it looks like as well. There’s no key value search to know why some bit of text is red for example.
- mekster 4y agoFunny it took humans 20 years to figure that out.
- chrismsimpson 4y agoIs there anything like this for bootstrap 5?
- s1k3s 4y agoHey SaaS'ers, this is how you showcase a product.
- MrPatan 4y agoThere's two distinct camps talking past each other: - Devs who make relatively small e-commerce-type websites, who loves tailwind, bootstrap, etc. Good defaults, fast throughput, maintenance is less important - Devs who make relatively big web apps, who hates them. Everything ends up customized one way or another, maintenance is most of the work, tailwind and bootstrap end up only getting in the way. The problem here is that this distinction is seldom make explicit, and here we are.
- twism 4y agoProblem is tailwind is not hard to maintain. I would argue it's easier. Folks look at it and it looks like a nightmare (the documentation even says so) but you have to actually give it a fair shake. I can always jump back into a tailwind codebase and not only do I know what mr-4 does I know where it is when looking at the rendered component. You find yourself having to do "Right click > inspect" a whole lot less often to figure out what's going on
- Aeolun 4y ago> You find yourself having to do "Right click > inspect" a whole lot less often to figure out what's going on Instead I find myself going to the Tailwind docs to find out how they renamed this random css property. But it’s still better than plain CSS.
- waboremo 4y agoTailwind is not easier to maintain than vanilla CSS in any way. There are no standards in Tailwind, tomorrow if they wanted they could rename everything. CSS actually has standards to adhere itself to. On top of this, Tailwind has to go through a process to adopt bleeding edge CSS changes, which makes maintenance a chore when you really wanted that new feature. Tailwind is not easier than a custom internal design system either, as that has been tailored to your company and the maintenance of that system is integral to your design team. You might think that offloading to Tailwind is better, but you're just doubling up duties because someone internally is going to have to customize away from the defaults. Tailwind can be easier to maintain than similar libraries. After trying most of these, I can't say whether that actually shows itself during development. I suppose if one was exclusively used to Vue or was brought up in the world of overzealous BEM, Tailwind might seem easier/refreshing. But if you've worked with Bootstrap or its alternatives (of the time), Tailwind isn't much different and can feel like a step back when you now have to rely on additional libraries like Konsta, Daisy, or Tailwind UI to create premade components for you. Your example confuses me too, because why wouldn't your devtools be open anyways? You're in development so use the tools you have to make your job less of a guessing game. I guess what you say might be true, you can load a page and just tell a component has a margin right but you're going to be opening the devtools anyways to double check. I still think Tailwind is great for solo devs, it's a design system with sane defaults they can rely on and get something in production very fast. Every other reason I've seen Tailwind devs give winds up confusing me about how they're actually working, or if they've ever bothered with anything else.