search

LangbaseInc / langui

UI for your AI. Open Source Tailwind components tailored for your GPT, generative AI, and LLM projects.
https://LangUI.dev
MIT License
2.45k stars 125 forks source link

Create a demo that combines components #23

Open MichaelCurrin opened 1 month ago

MichaelCurrin commented 1 month ago

I like the components viewed separately on the Components part of the site, but it would be good to see a Demo section which integrates them together as an entire page. So it is more realistic for seeing it presented together (even as a screenshot preview on the LangUI homepage) and also to see how one would combine the elements.

Especially for someone like me who is new who Tailwind and I want to put side, main window and another sidebar together.

I was able to stitch this together for example. image

It is unfortunately very limited as the sidebars don't animate though and there's no menu options flying out from the buttons e.g. user -> Settings or Logout.

MichaelCurrin commented 1 month ago

Even if you put a demo on Codepen and link to it for the code and live preview, that would be useful.

ahmadbilaldev commented 3 weeks ago

I am adding releasing blocks using LangUI v2 soon, that will help with this. We are already using them here.

One problem with blocks is, they need opininated code, and a selected framework (like React) with state management etc. Our blocks will be React focused. Is that okay for now?

MichaelCurrin commented 3 weeks ago

Oh thanks. A folder of runnable React examples there will be useful.

based on the Tailwind website, you could add a button for Explore Templates / Explore Examples next to Browse Components, which could go to a webpage gallery of the examples in the examples folder (even if they are just static screenshots like you have). Then it accomplishes by suggestion which is to see a full page combination of your components as soon as possible when exploring the LangUI homepage.

I still think it can be useful to have a static screenshot on your homepage below the Browse components button. Something like the one I sent of everything together (you can even pull in a favorite image from the examples folder).