Issue on/with the new website UI & documentation section

[ha-sante]

Website:

• The header is many things that have good faith meanings behind them but don't help.
  Simply the header isn't about flowbite-react and get's you thinking in many places. (If you're curious like me and like to learn what this thing is about - In this case Flowbite react, you will click on it, deviating from why you actually visited the site in the first place - at least objectively)
  Objectively it is not helpful given I probably didn't visit the flowbite-react page to read the blog in the first place. (I am not saying it's bad, just the inspiration to spread your focus as a visitor to the site is a net negative)

• It will be a real superpower to have all the components just there and easy to jump to right when you visit flowbite-react.
  Flowbite is after all a frontend components tooling and that speed of being able to jump right to the core of its offering will be/is a superpower.
  Alot of people who will continuously visit flowbite-react.com are power users after their 2nd and 3rd focused visits.
  If I can quickly get to the components set, I would highly appreciate it.

Documentation:

• It looks better when things are bold and smaller (code examples too, more polished)
  When I could see the full code example without having to scroll, I loved it, because I am able to move from one example to another in strong single visual focuses.
  The New visual structure needs you to scroll to see everything and to recheck, you need to scroll up and down to recheck things.

• Icons and other visual markers are everything
  I know an accordion when I think about it for 2 minutes, but when I see the logo/icon indicator, I am able to quickly jump to it.
  The old documentation site, along with its content/component label spacing and bold font did this really well.
  A clutter-free scroll will always be appreciated as well.

I have just seen this change and as I use it some more, I will report/add everything else I see here.

Thank you for spending your precious time on building us this great component tooling, just know it is highly appreciated ❤️

[zoltanszogyenyi]

Hello @ha-sante,

Thanks for your valuable feedback and for using Flowbite React!

Your suggestion gives me a pretty nice idea which would be to offer two versions of the docs: Flowbite React and Flowbite React Lite (which would be much more similar to what we had before). You would be able to choose this via accessing the https://flowbite-react.com/lite/**/* URL pattern.

Now to give you a bit more context of why we are doing this redesign is because:

• we need to give Flowbite React a bit more identity (why we also used cyan instead of blue)
• the new layout gives us a lot of room to include features like search, better text, code previews
• the homepage now explains what the library is about while also keeping the list of components with those icons
• we also switched from Create React App to Next.js 13 to align with community standards
• and quite a few more (as a reference you can check the main Flowbite website and docs)

Now to get back to your suggestion:

The header is many things that have good faith meanings behind them but don't help.
Simply the header isn't about flowbite-react and get's you thinking in many places. (If you're curious like me and like to learn what this thing is about - In this case Flowbite react, you will click on it, deviating from why you actually visited the site in the first place - at least objectively)

Objectively it is not helpful given I probably didn't visit the flowbite-react page to read the blog in the first place. (I am not saying it's bad, just the inspiration to spread your focus as a visitor to the site is a net negative)

The links in the header will be revisited - we're still not done with the revamp. One problem is that I see that the quickstart link goes to flowbite.com which should not be the case - we'll probably keep a link to Figma still but as I've said, we'll revisited the header rather soon.

It will be a real superpower to have all the components just there and easy to jump to right when you visit flowbite-react.
Flowbite is after all a frontend components tooling and that speed of being able to jump right to the core of its offering will be/is a superpower.

Alot of people who will continuously visit flowbite-react.com are power users after their 2nd and 3rd focused visits.
If I can quickly get to the components set, I would highly appreciate it.

Agreed - there are two things here:

• we'll integrate search which will allow you to cmd + k for components
• currently you have the list on the homepage, but we'll add it to the introduction page too

It looks better when things are bold and smaller (code examples too, more polished)
When I could see the full code example without having to scroll, I loved it, because I am able to move from one example to another in strong single visual focuses.
The New visual structure needs you to scroll to see everything and to recheck, you need to scroll up and down to recheck things.

The component and code previews will be massively changed - currently we are aware the fonts and colors are not optimised at all - check out the main Flowbite or Flowbite Svelte docs as a reference as to how we plan to make it look and then build on top of that.

Icons and other visual markers are everything
I know an accordion when I think about it for 2 minutes, but when I see the logo/icon indicator, I am able to quickly jump to it.
The old documentation site, along with its content/component label spacing and bold font did this really well.
A clutter-free scroll will always be appreciated as well.

We had the icons in the sidebar - is that what you're referring to? Or is it the list of SVG thumbnails that we still have on the homepage? We are planning to add that to the introduction page back again.

Thank you for the valuable feedback <3
Zoltan

[rluders]

Well, this is actually a very nice feedback indeed.

Your suggestion gives me a pretty nice idea which would be to offer two versions of the docs: Flowbite React and Flowbite React Lite (which would be much more similar to what we had before). You would be able to choose this via accessing the https://flowbite-react.com/lite/**/* URL pattern.

May I said that I didn’t liked this idea? 😅 I think that by doing it we will have two docs to maintain. If we are looking for adding an extra documentation for the library to complement and not duplicate the one that we have I would say to have an low level documentation that would be autogenerated by comments in the code.

Just to have a lite documentation version that would duplicate the standard documentation doesn’t seems to be adding much value. Maybe we get learn something from Godoy documentation, in their getting started they have some tutorial where you learn how to create your first game. So, in our case she could add an tutorial to create the first app using flowbite? Nothing fancy, something like a TODO app, or just to build the first page structure.

We had the icons in the sidebar - is that what you're referring to? Or is it the list of SVG thumbnails that we still have on the homepage? We are planning to add that to the introduction page back again.

I think that here what it means is that in the previous sidebar we had some Icons before the name of the component that was adding some visual helpers to the users that are not very familiar with the component’s name to find them.

[zoltanszogyenyi]

Well, this is actually a very nice feedback indeed.

Your suggestion gives me a pretty nice idea which would be to offer two versions of the docs: Flowbite React and Flowbite React Lite (which would be much more similar to what we had before). You would be able to choose this via accessing the https://flowbite-react.com/lite/**/* URL pattern.

May I said that I didn’t liked this idea? 😅 I think that by doing it we will have two docs to maintain. If we are looking for adding an extra documentation for the library to complement and not duplicate the one that we have I would say to have an low level documentation that would be autogenerated by comments in the code.

Just to have a lite documentation version that would duplicate the standard documentation doesn’t seems to be adding much value. Maybe we get learn something from Godoy documentation, in their getting started they have some tutorial where you learn how to create your first game. So, in our case she could add an tutorial to create the first app using flowbite? Nothing fancy, something like a TODO app, or just to build the first page structure.

We had the icons in the sidebar - is that what you're referring to? Or is it the list of SVG thumbnails that we still have on the homepage? We are planning to add that to the introduction page back again.

I think that here what it means is that in the previous sidebar we had some Icons before the name of the component that was adding some visual helpers to the users that are not very familiar with the component’s name to find them.

The development implications of the lite versions would be indeed a hassle, unless we find a way of using the same content but applying it to a different layout :P

Either way, let's wait until we finish with the new docs as it's clearly not finished just yet, and then we can see how we can improve the content and the way users navigate throughout the website.

I definitely like your idea of creating a "game tutorial" that we can showcase in the introduction page.

[tulup-conner]

I agree the blog isn't pertinent for the majority of users of developer documentation.

I think we could do without most of the links in the Navbar and focus on a giant Algolia search bar. This is becoming a trend in developer documentation, and I like it.

You can find all of that stuff if you are THAT interested by simply going to flowbite.com. Users who actually want to read the blog will take that extra step.

I believe the idea @zoltanszogyenyi has is to create some uniformity across the many Flowbite variant websites that exist now for each of the popular JavaScript frameworks and other languages as well. It makes the experience switching between Flowbite.com and Flowbite-React.com seamless, which is nice for me, but I'm not sure if it's a common use case or not.

I agree with the general sentiment of removing visual clutter, and focusing on the code examples. I think there are some concrete things we intend to release in the next two weeks that will help that:

1. Code examples will be more similar to flowbite.com's, including:

• A button to copy to clipboard
• Set max height with a button to expand/collapse

2. Pages will have Tables of Contents

• You'll be able to get to each example component much faster

Also, like Zoltan mentioned, the Algolia search is going to be a game changer in terms of navigability. You'll be able to open any page in the docs, press Ctrl/Cmd/Super+K, type "Alert icon" and navigate directly to Alert with icon, for example.

It would be extremely helpful to get continued feedback over time as we add these features to gauge how much they actually help, and get a better idea of the most common use cases so we can better cater to them.

I think it's clear from your post that power users are out there, and I think the search is going to make your life 1000x easier. From my experience as a power user using things like Next, Tailwind CSS, Remix, Cloudflare Pages docs, I mean, basically everyone has this now, and it saves so much time.

[ha-sante]

I agree with all the general sentiments shared here.

I would add:

• Centralizing the flowbite-framework.com name all into flowbite.com is a great idea, as I remember it was hit-and-miss for me in finding flowbite-react initially, albeit, this particular change needs its time to come to fruition, which is normal as well.

For current improvements to the flowbite-react.com site/docs, I would add:

• One thing that can be a lifesaver is adding a Components Link somewhere on the homepage right on the entrance, all my visits are to the components page most of the time to cross-reference if I am doing the right thing

• (Because I passed the installation stage on my day one of the site visit, so it's already checked off and everything else is things I need to use continuously after the installation).

• Another will be (Best if done programmatically, if you depend on something like types), to list out all the possible properties/methods a component can support. (I usually find this, by clicking into the component and reading your source code).

• Everything else, it seems you already have plans for and some are already in the works, which is great.

This is good and thank you for taking the time to listen to my comments and for all the future solutions, you will be creating for it.

Thanks!
Henry