10
11 Comments

We've open-sourced the React component library we use to build great landing pages 🚀

everypage, our landing page builder, is built with react. Today we're announcing that it's open source and ready for others to use.

It's a kind of weird decision to use react for a landing page builder, given that landing pages are intended to be super fast and lean. But these days static site builders for react are getting increasingly better and React offers a much cleaner (imo) developer experience for re-using components and styles than pure html and css.

The component library live here: https://github.com/kibalabs/ui-react (we're working on the name). You can check out the components we have so far in our storybook: https://ui-react-docs.kibalabs.com. The library is very different from others as its build with very specific principles in mind, mainly theme-ability and responsiveness.

I'd love any feedback you have and if you have a github account I'd really appreciate a 🌟

posted to Icon for group Developers
Developers
on November 6, 2020
  1. 2

    Nice, but most important with SPA and SEO is server side rendering, it is supports next.js framework?

    1. 2

      It sure does.. and we've had lazy loaded images for ages! (Responsive images coming soon). But ye static generation with any of react static, next and Gatsby are easy 👍

    2. 1

      Hello, I don't understand this statement : "most important with SPA and SEO is server side rendering". Could you back it up with reasons please ? 🙂 I am a developer myself, and I never use SSR...

      1. 1

        The issue is when a web crawler requests your page it will get an HTML file with only a reference to index.js file. The crawler won’t render the page and therefore doesn’t get any of the content. This hurts your SEO. If you use server side rendering then you send the crawler a proper HTML file with content, enabling your SEO to work properly

        1. 1

          Alright. I built myfa.fr without SSR and SEO works just perfect. I usually use React and you can emulate SEO-related tags depending on the url... So each page has its own tags ! I don't know if it'll work at your location, but when I type on Google "myfa blog", I get the Blog page of MYFA, then the main page in Google results.

  2. 2

    It is showing 503 Service Temporarily Unavailable

    1. 1

      Thanks for pointing out, just updated the link.

  3. 1

    Congratulations on the launch! I know how challenging it is to build a component library. Maybe consider "Kiba-UI" as a possible name for the library :)

    Question for you: how did you approach accessibility when building this library? Was there a checklist you followed, or any goals in mind when ensuring components adhered to accessibility standards?

    This is a challenge I'm currently facing. Right now my solution is to follow the React docs + run a lighthouse test + make sure there are no @storybook/a11y errors, but something about that seems incomplete

    1. 1

      I follow a similar approach - at the moment all accessibility is basically building landing pages and then checking on google lighthouse. I know its not the greatest, and will use something more advanced in the coming months. I think the nice thing about this library is from the start I have embedded sensible defaults all over the place so users don't really have to think too hard to do the right thing.

  4. 1

    Hi, the storybook is taking forever to load....

    Plug: You can add a hire me button to your repo's readme checkout wannahireme.com

Trending on Indie Hackers
I shipped a productivity SaaS in 30 days as a solo dev — here's what AI actually changed (and what it didn't) User Avatar 258 comments Never hire an SEO Agency for your Saas Startup User Avatar 107 comments A simple way to keep AI automations from making bad decisions User Avatar 71 comments 85% of visitors leave our pricing page without buying. sharing our raw funnel data User Avatar 39 comments Are indie makers actually bad customers? User Avatar 39 comments We automated our business vetting with OpenClaw User Avatar 38 comments