Developers July 15, 2020

UI component library built with TailwindCSS open for beta users

Nehal Hasnayeen @hasnayeen

I'm working on a UI library called Zukoni which is a collection of ready made Html components built with TailwindCSS. Today I opened it for beta users to get some feedback.

I plan to release it on September. Currently there are 50+ components and I aim to have 200+ components when released. I'm working on this full time now and I'll keep adding on components continuously. I'll add page template also later on.

While this is kinda scary as this my first commercial product so I'm learning lot of things while I'm building this but I'm also very excited to see what the future holds. Hopefully my indie hacker journey won't be a short one. I'll also try to share things I learn about building and selling products online.

P.S: Lots of the early components are based on awesome design of another indie hacker @ildiko project UIDesignDaily. If you need design inspiration check out https://www.uidesigndaily.com/

Website Link: Zukoni

  1. 8

    Hey @hasnayeen,

    I bought it right away for two reasons:
    a) Great job on the components. They look really well designed and thought through.
    b) I have some improvement suggestions and didn't want to send those over before I was a client (and not some random hater, who just dropped by).

    I had a quick look over the website and spotted a few minor issues.

    1. I was accessing the site on mobile (on pretty bad connection) and the sliding hero section didn't load properly for me. Instead of leaving it "blank", you might want to change the wonderful transition to a static image on mobile breakpoints.

    2. Explore section gives a great overview of components themselves, but they are only shown as a screenshot on one screen size. It would be great if you could show how components behave on different breakpoints. I imagine something like having a breakpoint toggle on each component and being able to switch between screenshots on various sizes for the screen.

    3. I'm having some issues resizing the preview windows when on the client screen. (Browser is Brave, which is basically Chrome/Chromium)

    4. I have seen no refund policy in the FAQ section. It is a great way to communicate with your consumers that you are sure of the quality of your work and are willing to refund their money if they are not satisfied with the product.

    5. I think the $35 a year is a great price. However, your full price a $195 per year subscription gives me pause. Here is why:

    When I purchased TailwindUI, I knew who Adam Wathan and Steve Schoger were, have bought products from them in the past. I knew their work has made them enough money to support TailwindUI long term.

    Tailwind UI charges a 1-time $195 fee for their basic package, so Zukoni would have to match the quality and speed of creating and fixing potential issues. Zukoni would also become more expensive then TailwindUI in a period of 2 years, given the full price tag of $195.

    TailwindUI is now a product of a 4 person team working on Tailwind and TailwindUI full time, keeping up with them as a solo developer will be hard. (I'm not saying impossible, just hard). I also think that if people will see the two products priced the same, they will choose TailwindUI over Zukoni, just because of how well known Adam and Steve are compared to yourself.

    I would also think about adding a special pre-sale package price, which is a one-time fee (let's say a $120) with lifetime access. That would allow you to capture the charges for the period of next 3+ years on the $35 price and therefore ensure that you can work on Zukoni full-time without worrying if the number of sales can support you.

    Kind regards and best of luck,
    g

    1. 2

      Hello, first of all thanks for purchasing it, and appreciate the long feedback which is exactly I'm looking for so that I can make the product useful for the end user.

      1. I'll fix this soon, as the site is still under heavy development so there is few issue like this need to be fixed. I wanted to open the product after completing it but decided to open early so that I can get feedback like this so I work on things that matters to user and don't waste time on useless features.

      2. Components can be seen in different screen size but that is for the paid account so if you go to explore page after you bought it you'll see a drag element to change the viewport size of the component. For non customer one view is enough I think but will keep it in mind.

      3. I noticed the problem with resizing window, I'm working on the responsive preview.

      4. I've not decided on refund policy yet as I need to figure out how the refund process is. If I can make sure the refund process is smooth then I'll add a 2 weeks refund policy.

      5. Zukoni have a different model than TailwindUI as that TailwindUI has two package right now, Marketing and Application UI related components (each $149, $249 if bought together) and it'll be done completely at certain point. Adam said they will released other pack (like ecommerce pack) which will be sold separately, so they are selling each pack individually while Zukoni subscription will include all, that's why I think it's a fair price.

      I think the market is big enough for lot of Library to co exist and my target is to serve a different segment than what TailwindUI is serving though both have a lot of overlap. As I'm still figuring things out so lets see what happens in the future.

      Thanks again for your feedback and if you have any question let me know.

      Have a nice day. Cheers!

      1. 1

        First of all, nice work.
        I just have a question about this :
        "my target is to serve a different segment than what TailwindUI is serving though both have a lot of overlap"

        How's you target different than tailwind UI ?

        1. 2

          Almost same, only difference I think is mine is case based, for example with Tailwind UI you have form elements and using those you may build a create post form, where as mine is a composed one, like a form for bug report or a form for inviting new team members.

    2. 1

      Pls give Bytehub.dev also a try

      1. 1

        Hey @bytehub,

        your solution looks really nice as well.

        Let me explain why I'm not an ideal customer, though.

        1. I'm primarily a backend and PHP developer. Therefore I prefer to have TailwindCSS classes are exposed and not necessarily packaged within a component. I will usually do small tweaks to existing components and not necessarily use them as they are.

        2. React is not exactly my cup of tea. And similar to the classes argument above, I might want to tweak some stuff and I'm not really comfortable enough in React to buy/subscribe for a product, which I will have a hard time maintaining due to my lack of React knowledge.

        On the UX side note, here are two comments I have:

        1. If you are trying to sell something, make sure the price of whatever you are trying to sell is visible somewhere on the landing page or there is a Pricing link. If I can't find the price easily, I will not usually spend a lot of time looking for it and will probably end up not buying the product.

        2. Google sign-up when you click on a free component is an unexpected action. The user expects to see a page open up with some code displayed and perhaps the usage documentation. When they see sign up with Google, you instinctively think: "What am I getting myself into?". I would remove this option entirely and only have account created as part of the purchasing process.

        That being said, I would just like to reiterate - I'm not your customer, but that doesn't mean I don't think the product itself is worth people's time or money.

        Good luck!
        g

        1. 1

          Thanks for your detailed reply @morpheus7CS. More than an ideal customer, your comments looks liken a much better feedback to me.

          On framework side
          1,2: we hear you. We’re making some of our new components on tailwind. Also bringing in react native and flutter soon.

          On UX side:

          1. Were revamping the site with pricing details to make things clearer
          2. Nothing to respond here. Removing it ASAP

          I’ll definitely ping you once we’ve something useful for you.

  2. 3

    I like the design :)

    1. 1

      Thanks

  3. 3

    Most of the components I see in the package are designed by @ildiko from UIDesignDaily. I know the credit is not required but if you sell these I would add the credit somewhere on the site and post.

    1. 2

      Thanks for reminding. Added to the post.

      1. 1

        No offense man at all. I just know it took Ildiko three years to put this together so she would really appreciate it. 😀

        1. 2

          No problem, its the least I should do. She did an amazing job and making it fully open source is more amazing. I have an open source project myself so I understand.

          1. 1

            Thank you!

  4. 2

    Good luck with your launch :)

    1. 1

      Thank you.

  5. 2

    Www, I love it, I've never buy assets, but I fallen in love with TailWind and your components looks awesome. I wish you the best luck with this project, not fear, we are learning every day.

    1. 1

      Thank you for your encouraging word.

  6. 2

    Easy purchase. Thanks!

    1. 1

      Thanks for the purchase. If you have any question or feedback please let me know.

  7. 2

    Great idea! We need more options when in comes to component libraries. One thing I’d be concerned about is if the Tailwind CSS license allows for you to commercialize the framework? I only ask because I know they make money by selling a component library themselves.

    1. 1

      The thing is, some of TailwindUI components are dead simple and ubiquitous in terms of design, like a simple top nav bar or a hero section.
      I know there're many ways to design a nav bar but imagine if @hasnayeen made a simple top navbar (logo, links, cta) and end up looking like the one in Tailwind UI, using the same utility classes and all.
      How much the nav bar should be different for it to be okay ?
      Can Tailwind UI creators claim copyright on something so simple and common ?
      Should @hasnayeen avoid those simple components just because Tailwind did it first ?
      Should @hasnayeen find convoluted ways to implement the nav bar just so the code look different ?

    2. 1

      TailwindCSS is MIT licensed so it is allowed. You can make any commercial project using it. You can check MIT license on the web for the scope of the license. As the component library TailwindUI is a separate product from TailwindCSS and you can't use that to build a derivative products which competes with TailwindUI, which I'm not using to build mine.

      1. 1

        Great! Keep up the good work 👍🏼

    3. 1

      yeaaaa. About that, this is directly from their websites license agreement. https://www.notion.so/Tailwind-UI-License-644418bb34ad4fa29aac9b82e956a867

      You cannot:

      • Use the Components to create End Products that are designed to allow an End User to build their own End Products using the Components or derivatives of the Components.
      • Re-distribute the Components or derivatives of the Components separately from an End Product.
      • Share your access to the Components with any other individuals
      1. 1

        perhaps you didn't use their components. But their components are just html markup with tailwindcss classnames. So there might be a grey area but I would highly recommend you research more into it so that you avoid any legal trouble. I might even put the site on hold and stop sales until you know for sure

        1. 1

          Dear @monsieurBoutte & @robertcooper, Tailwind CSS itself is released under the MIT license and can be used for commercial projects.

          Even Tailwind UI components can be used in a commercial project, but not in a way where they would offer the and-user the chance to pick and choose from the whole library. For more, see Adam Wathan's tweet here: https://twitter.com/adamwathan/status/1219396214355058688?s=20

          1. 1

            this is precisely what I was getting at. What Adam says here, "only things we want to avoid are people basically redistributing them as a derivative component library or essentially reselling them by including them in “site builder” style projects."

            1. 1

              cc: @hasnayeen 👆

              Perhaps it's not an issue, so long as you're not bundling in the latest tailwindUI.

              https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE

              1. 1

                The question was for TailwindUI specifically, not TailwindCSS. Once again, let's not mix apples and oranges.

                You can create components with TailwindCSS and sell them. No problem. Zukoni is good on that front.

                You cannot buy a TailwindUI license, grab all the components and make a product, which would use the TailwindUI components in a site builder, because you are then taking the work of the UI team and competing with them with the work they have provided. Major problem.

  8. 1

    This comment was deleted 24 days ago.